Помощь админам бесплатных форумов на PHPBB3
http://admins.bestforums.org/

Меню в стиле выплывающих картинок
http://admins.bestforums.org/viewtopic.php?f=6&t=379
Страница 1 из 5

Автор:  vikweb [ 20 апр 2014, 14:59 ]
Заголовок сообщения:  Меню в стиле выплывающих картинок

в шаблон overall_header.html с новой строки после тега <head> подключаем скрипты

Код:
<script type="text/javascript" src="ССЫЛКА/jquery.js"></script>
<script type="text/javascript" src="ССЫЛКА/interface.js"></script>


затем в нужное место вставляем код меню
Код:
   <div id="main_content">
   
            <div id="menu_tab">
<div id="dock" class="dock">
<div class="dock-container" style="left: 500px; width: 500px;">
<a class="dock-item" href="ССЫЛКА" style="width: 40px; left: 0px;">
<img alt="home" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/home.png">
<span style="display: none;">Главная</span>
</a>
<a class="dock-item" href="ССЫЛКА" style="width: 40px; left: 40px;">
<img alt="contact" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/email.png">
<span style="display: none;">Contact</span>
</a>
<a class="dock-item" href="ССЫЛКА" style="width: 40px; left: 80px;">
<img alt="portfolio" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/portfolio.png">
<span style="display: none;">Portfolio</span>
</a>
<a class="dock-item" href="ССЫЛКА" style="width: 40px; left: 120px;">
<img alt="music" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/music.png">
<span style="display: none;">Music</span>
</a>
<a class="dock-item" href="ССЫЛКА" style="width: 40px; left: 160px;">
<img alt="video" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/video.png">
<span style="display: none;">Video</span>
</a>
<a class="dock-item" href="ССЫЛКА" style="width: 40px; left: 200px;">
<img alt="history" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/history.png">
<span style="display: none;">History</span>
</a>
<a class="dock-item" href="ССЫЛКА" style="width: 40px; left: 240px;">
<img alt="calendar" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/calendar.png">
<span style="display: none;">Calendar</span>
</a>
<a class="dock-item" href="[c]ССЫЛКА[/c]" style="width: 40px; left: 280px;">
<img alt="rss" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ/rss.png">
<span style="display: none;">RSS</span>
</a>
</div>
</div>

<script type="text/javascript">
   
   $(document).ready(
      function()
      {
         $('#dock').Fisheye(
            {
               maxWidth: 50,
               items: 'a',
               itemsText: 'span',
               container: '.dock-container',
               itemWidth: 40,
               proximity: 90,
               halign : 'center'
            }
         )
      }
   );

</script>



в тему стиля вставляем
Код:
#main_content {
    clear: both;
}
#menu_tab {
    background-color: #424242;
    height: 50px;
    width: 100%;
}
.dock {
    height: 50px;
    position: relative;
    text-align: center;
}
.dock-container {
    background: url(" ") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 50px;
    padding-left: 50px;
    position: absolute;
}
a.dock-item {
    color: #000000;
    display: block;
    font: bold 16px Arial,Helvetica,sans-serif;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 40px;
}
.dock-item img {
    border: medium none;
    margin: 5px 10px 0;
    width: 100%;
}
.dock-item span {
    display: none;
    padding-left: 20px;
}


затем скачиваем архив, распаковываем, полученные изображения и скрипты закачиваем в Админразделе в "Картинки" и сохраняем полученные ссылки.

строки
ССЫЛКА/jquery.js
ССЫЛКА/interface.js
ССЫЛКА
ССЫЛКА НА ИЗОБРАЖЕНИЕ/rss.png
меняем на полученные ссылки

пример: index.php?page=8

Автор:  Рок [ 20 апр 2014, 16:22 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Когда ставлю, получаются большими картинками, которые кучкуются квадратом и не выстраиваются в одну линию. Причем значки большие. В чем может быть проблема?

Автор:  vikweb [ 20 апр 2014, 17:17 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Рок писал(а):Когда ставлю, получаются большими картинками, которые кучкуются квадратом и не выстраиваются в одну линию. Причем значки большие. В чем может быть проблема?

я не знаю что и как вы делаете.
вы бы написали что вы делали пошагова и что получилось, и ссылку на форум где вы делали эти изменения
я не телепат...

Автор:  Рок [ 20 апр 2014, 17:52 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Вот код хидера
[+]
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<link rel="shortcut icon" href="http://lost.5nx.ru/images/ranks3/lost_5nx_ru/favicon8.ico" type="image/x-icon"><head>
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and not S_IN_UCP -->
<div id="info"><div id="infobar">
<a href="{U_REGISTER}"><img style="width: 50px; height: 50px; padding-right: 100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/reg.png" /> Добро пожаловать на НФСС: Нумизматический Форум Северной Столицы. Для получения полной информации войдите под своим логином или нажмите <span style="color: #FF0000">{L_REGISTER}</span> <img style="width: 50px; height: 50px; padding-left:100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/reg.png" /></a>
</div></div>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN and S_DISPLAY_PM and (S_USER_NEW_PRIVMSG or S_USER_UNREAD_PRIVMSG) -->
<div id="info"><div id="infobar">
<a href="{U_PRIVATEMSGS}"><img style="width:50px; height: 50px; padding-right: 100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/mail.png" />Привет {S_USERNAME}, у вас {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --><img style="width: 50px; height: 50px; padding-left:100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/mail.png" /></a>
</div></div>
<!-- ENDIF -->
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="монеты, стоимость монет, оценка монет, брак монет, оценка бон, нумизматика, бонистика, нумизматический форум, НФСС, разновидности монет, жетоны, боны, чешуя, каталог Кульвелиса, нумизматический форум северной столицы, монеты СССР, царские монеты, современные монеты, покупка монет, продажа монет, Нумизматический Форум Северной Столицы, сайт нумизматов, нумизматика Санкт-Петербург, монетный брак, бракованные монеты, coins, coinsspb.com, античные монеты, советские монеты, юбилейные монеты, ходячка" />
<meta name="description" content="НФСС, нумизматика, бонистика, чешуя, проволочные копейки, античные монеты, монеты Российской Империи, монеты СССР, монеты России, иностранные монеты, браки монет, разновидности монет, жетоны, антиквариат" />
<meta name='yandex-verification' content='560fe19c1d567f24' />
<meta name="google-site-verification" content="Lf5XpYBMcNKJL9sbrzmPbzbKsqpYeDGyqQ3CqIyXMoA" />
{META}
<!-- IF TOPIC_TITLE -->
<title>{TOPIC_TITLE} &bull; {SITENAME} </title>
<!-- ELSE -->
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>
<!-- ENDIF -->

<link rel="alternate" type="application/rss+xml" title="{SITENAME}" href="/rss.php" />
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<script type="text/javascript">
// <![CDATA[


function popup(url, width, height, name)
{
   if (!name)
   {
      name = '_popup';
   }

   window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
   return false;
}

function jumpto()
{
   var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
   var perpage = '{PER_PAGE}';
   var base_url = '{A_BASE_URL}';

   if (page !== null && !isNaN(page) && page > 0)
   {
      document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * perpage);
   }
}

/**
* Find a member
*/
function find_username(url)
{
   popup(url, 760, 570, '_usersearch');
   return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
   var parent = document.getElementById(id);
   if (!parent)
   {
      eval('parent = document.' + id);
   }

   if (!parent)
   {
      return;
   }

   var rb = parent.getElementsByTagName('input');
   
   for (var r = 0; r < rb.length; r++)
   {
      if (rb[r].name.substr(0, name.length) == name)
      {
         rb[r].checked = state;
      }
   }
}

<!-- IF ._file -->

   /**
   * Play quicktime file by determining it's width/height
   * from the displayed rectangle area
   *
   * Only defined if there is a file block present.
   */
   function play_qt_file(obj)
   {
      var rectangle = obj.GetRectangle();

      if (rectangle)
      {
         rectangle = rectangle.split(',')
         var x1 = parseInt(rectangle[0]);
         var x2 = parseInt(rectangle[2]);
         var y1 = parseInt(rectangle[1]);
         var y2 = parseInt(rectangle[3]);

         var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
         var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
      }
      else
      {
         var width = 200;
         var height = 0;
      }

      obj.width = width;
      obj.height = height + 16;

      obj.SetControllerVisible(true);

      obj.Play();
   }
<!-- ENDIF -->

// ]]>
</script>
<link href="/lytebox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/lytebox.js"></script>
</head>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/jquery.js"></script>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/interface.js"></script>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/postlink.js"></script>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<div id="wrapheader">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
          <td width="295" height="32" style="background:url('{T_THEME_PATH}/images/topl.gif');">
<div id="toplink">
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --><span class="genmedw"><a class="genmedw" href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></span>
<!-- ENDIF -->
<!-- ENDIF -->
</div></td>

<td style="background:url('{T_THEME_PATH}/images/topm.gif');">&nbsp;</td>

<td width="458" height="32" align="right" style="background:url('{T_THEME_PATH}/images/topr.gif');">
<div id="toplink">
<!-- IF not S_USER_LOGGED_IN --><span class="genmedw"><a class="genmedw" href="{U_REGISTER}">{L_REGISTER}</a> &bull; </span><!-- ENDIF -->
<span class="genmedw"><a class="genmedw" href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></span>
<!-- IF S_USER_LOGGED_IN --><!-- ENDIF -->
<!-- ENDIF -->
</div>
</td>
  </tr>
  </table> 

  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="243" height="80" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazhon.jpg');"><div id="midlink"><a href="/index.php"><span class="headw">{SITENAME}</span></a><br />
      <span class="genmedw">{SITE_DESCRIPTION}</span></div></td>

<td style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazh.jpg');">&nbsp;</td>
   
<td width="494" height="80" align="right" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazhon.jpg');">
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="midlink">
<div id="search-box">
<form action="{U_SEARCH}" method="post" id="search">
            <fieldset class="nb">
               <input name="keywords" style="opacity:0.8;filter:alpha(opacity=80)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" type="text" class="inputbox search" id="keywords" title="{L_SEARCH_KEYWORDS}" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" maxlength="50" />
               <input class="nb" style="opacity:0.8;filter:alpha(opacity=80)" name="submit" type="image" src="{T_THEME_PATH}/images/search.gif" align="absmiddle" /><br />
{S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
</form>
</div>
</div>
      <!-- ENDIF -->
      </td>
  </tr>
  </table>

  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="228" height="32" align="left" class="genmedw" style="background:url('{T_THEME_PATH}/images/bottoml.gif');"><div id="bottomlink">
               <!-- IF S_USER_LOGGED_IN --><a class="genmedw" href="{U_PROFILE}">{L_PROFILE}</a><!-- ENDIF -->
            <!-- IF U_RESTORE_PERMISSIONS --> <a class="genmedw" href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
            <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
                </div>
     </td>

<td style="background:url('{T_THEME_PATH}/images/bottomm.gif');">&nbsp;</td>

  <td width="519" align="{S_CONTENT_FLOW_END}" class="genmedw" style="background:url('{T_THEME_PATH}/images/bottomr.gif');">
  <div id="bottomlink"><span class="genmedw">
<a class="genmedw" href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a> &bull;
            <a class="genmedw" href="{U_FAQ}">{L_FAQ}</a> &bull;  <a class="genmedw" href="{U_MEDALS}">{L_MEDALS_VIEW}</a>
<!-- IF not S_IS_BOT --><!-- IF S_DISPLAY_MEMBERLIST --> &bull; <a class="genmedw" href="{U_MEMBERLIST}">{L_MEMBERLIST}</a><!-- ENDIF --><!-- IF S_DISPLAY_SEARCH --> &bull; <a class="genmedw" href="{U_SEARCH}">{L_SEARCH}</a><!-- ENDIF --><!-- ENDIF -->
</span></div>
     </td>
    </tr>
  </table>
</div>

   <div id="datebar">
      <table width="100%" cellspacing="0">
      <tr>
         <td class="gensmall"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
         <td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
      </tr>
      </table>
   </div>

<div id="wrapcentre">

   <!-- IF S_DISPLAY_SEARCH -->
   <p class="searchbar">
      <span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
      <!-- IF S_USER_LOGGED_IN -->
      <span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
      <!-- ENDIF -->
   </p>
   <!-- ENDIF -->

   <br style="clear: both;" />

   <!-- INCLUDE breadcrumbs.html -->

   <br />
<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru"
data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"

></div>
   <div id="main_content">
   
            <div id="menu_tab">
<div id="dock" class="dock">
<div class="dock-container" style="left: 500px; width: 500px;">
<a class="dock-item" href="http://coinsspb.com/index.php?sid=a62de383e739d364d4c22b834c27e809" style="width: 40px; left: 0px;">
<img alt="home" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/home.png">
<span style="display: none;">Главная</span>
</a>
<a class="dock-item" href="http://coinsspb.com/ucp.php?i=pm&folder=inbox" style="width: 40px; left: 40px;">
<img alt="contact" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/email.png">
<span style="display: none;">Contact</span>
</a>
<a class="dock-item" href="http://coinsspb.com/gallery/index.php" style="width: 40px; left: 80px;">
<img alt="portfolio" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/portfolio.png">
<span style="display: none;">Portfolio</span>
</a>
<a class="dock-item" href="http://coinsspb.com/viewforum.php?f=18" style="width: 40px; left: 120px;">
<img alt="music" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/music.png">
<span style="display: none;">Music</span>
</a>
<a class="dock-item" href="http://coinsspb.com/viewforum.php?f=109" style="width: 40px; left: 160px;">
<img alt="video" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/video.png">
<span style="display: none;">Video</span>
</a>
<a class="dock-item" href="http://coinsspb.com/search.php" style="width: 40px; left: 200px;">
<img alt="history" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/history.png">
<span style="display: none;">History</span>
</a>
<a class="dock-item" href="http://coinsspb.com/medals.php" style="width: 40px; left: 240px;">
<img alt="calendar" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/calendar.png">
<span style="display: none;">Calendar</span>
</a>
<a class="dock-item" href="http://coinsspb.com/ucp.php" style="width: 40px; left: 280px;">
<img alt="rss" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/rss.png">
<span style="display: none;">RSS</span>
</a>
</div>
</div>

<script type="text/javascript">
   
   $(document).ready(
      function()
      {
         $('#dock').Fisheye(
            {
               maxWidth: 50,
               items: 'a',
               itemsText: 'span',
               container: '.dock-container',
               itemWidth: 40,
               proximity: 90,
               halign : 'center'
            }
         )
      }
   );

</script>

Вот скрин, какие значки:
Изображение

В тему стиля добавлял, как у вас показано в последнем действии.

Автор:  vikweb [ 20 апр 2014, 18:24 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Рок
я сильно не рассматривал ваш шаблон но сразу заметно что вы не внимательно читали инструкцию!
в первом сообщение я писал
vikweb писал(а):в шаблон overall_header.html с новой строки после тега <head> подключаем скрипты

Код:
<script type="text/javascript" src="ССЫЛКА/jquery.js"></script>
<script type="text/javascript" src="ССЫЛКА/interface.js"></script>


а вы поставили после тега </head>
вот то что у вас в шаблоне

Код:
</head>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/jquery.js"></script>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/interface.js"></script>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/postlink.js"></script>


: будьте внимательнее

Автор:  Рок [ 20 апр 2014, 18:37 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Поставил после <head>, ничего не изменилось, вот новый код хидера
[+]
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<link rel="shortcut icon" href="http://lost.5nx.ru/images/ranks3/lost_5nx_ru/favicon8.ico" type="image/x-icon"><head>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/jquery.js"></script>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/interface.js"></script>
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and not S_IN_UCP -->
<div id="info"><div id="infobar">
<a href="{U_REGISTER}"><img style="width: 50px; height: 50px; padding-right: 100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/reg.png" /> Добро пожаловать на НФСС: Нумизматический Форум Северной Столицы. Для получения полной информации войдите под своим логином или нажмите <span style="color: #FF0000">{L_REGISTER}</span> <img style="width: 50px; height: 50px; padding-left:100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/reg.png" /></a>
</div></div>
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN and S_DISPLAY_PM and (S_USER_NEW_PRIVMSG or S_USER_UNREAD_PRIVMSG) -->
<div id="info"><div id="infobar">
<a href="{U_PRIVATEMSGS}"><img style="width:50px; height: 50px; padding-right: 100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/mail.png" />Привет {S_USERNAME}, у вас {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --><img style="width: 50px; height: 50px; padding-left:100px; vertical-align:middle;" alt="" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/mail.png" /></a>
</div></div>
<!-- ENDIF -->
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="монеты, стоимость монет, оценка монет, брак монет, оценка бон, нумизматика, бонистика, нумизматический форум, НФСС, разновидности монет, жетоны, боны, чешуя, каталог Кульвелиса, нумизматический форум северной столицы, монеты СССР, царские монеты, современные монеты, покупка монет, продажа монет, Нумизматический Форум Северной Столицы, сайт нумизматов, нумизматика Санкт-Петербург, монетный брак, бракованные монеты, coins, coinsspb.com, античные монеты, советские монеты, юбилейные монеты, ходячка" />
<meta name="description" content="НФСС, нумизматика, бонистика, чешуя, проволочные копейки, античные монеты, монеты Российской Империи, монеты СССР, монеты России, иностранные монеты, браки монет, разновидности монет, жетоны, антиквариат" />
<meta name='yandex-verification' content='560fe19c1d567f24' />
<meta name="google-site-verification" content="Lf5XpYBMcNKJL9sbrzmPbzbKsqpYeDGyqQ3CqIyXMoA" />
{META}
<!-- IF TOPIC_TITLE -->
<title>{TOPIC_TITLE} &bull; {SITENAME} </title>
<!-- ELSE -->
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>
<!-- ENDIF -->

<link rel="alternate" type="application/rss+xml" title="{SITENAME}" href="/rss.php" />
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<script type="text/javascript">
// <![CDATA[


function popup(url, width, height, name)
{
   if (!name)
   {
      name = '_popup';
   }

   window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
   return false;
}

function jumpto()
{
   var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
   var perpage = '{PER_PAGE}';
   var base_url = '{A_BASE_URL}';

   if (page !== null && !isNaN(page) && page > 0)
   {
      document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * perpage);
   }
}

/**
* Find a member
*/
function find_username(url)
{
   popup(url, 760, 570, '_usersearch');
   return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
   var parent = document.getElementById(id);
   if (!parent)
   {
      eval('parent = document.' + id);
   }

   if (!parent)
   {
      return;
   }

   var rb = parent.getElementsByTagName('input');
   
   for (var r = 0; r < rb.length; r++)
   {
      if (rb[r].name.substr(0, name.length) == name)
      {
         rb[r].checked = state;
      }
   }
}

<!-- IF ._file -->

   /**
   * Play quicktime file by determining it's width/height
   * from the displayed rectangle area
   *
   * Only defined if there is a file block present.
   */
   function play_qt_file(obj)
   {
      var rectangle = obj.GetRectangle();

      if (rectangle)
      {
         rectangle = rectangle.split(',')
         var x1 = parseInt(rectangle[0]);
         var x2 = parseInt(rectangle[2]);
         var y1 = parseInt(rectangle[1]);
         var y2 = parseInt(rectangle[3]);

         var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
         var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
      }
      else
      {
         var width = 200;
         var height = 0;
      }

      obj.width = width;
      obj.height = height + 16;

      obj.SetControllerVisible(true);

      obj.Play();
   }
<!-- ENDIF -->

// ]]>
</script>
<link href="/lytebox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/lytebox.js"></script>
</head>
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/postlink.js"></script>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<div id="wrapheader">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
          <td width="295" height="32" style="background:url('{T_THEME_PATH}/images/topl.gif');">
<div id="toplink">
<!-- IF not S_IS_BOT -->
<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_DISPLAY_PM --><span class="genmedw"><a class="genmedw" href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></span>
<!-- ENDIF -->
<!-- ENDIF -->
</div></td>

<td style="background:url('{T_THEME_PATH}/images/topm.gif');">&nbsp;</td>

<td width="458" height="32" align="right" style="background:url('{T_THEME_PATH}/images/topr.gif');">
<div id="toplink">
<!-- IF not S_USER_LOGGED_IN --><span class="genmedw"><a class="genmedw" href="{U_REGISTER}">{L_REGISTER}</a> &bull; </span><!-- ENDIF -->
<span class="genmedw"><a class="genmedw" href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></span>
<!-- IF S_USER_LOGGED_IN --><!-- ENDIF -->
<!-- ENDIF -->
</div>
</td>
  </tr>
  </table> 

  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="243" height="80" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazhon.jpg');"><div id="midlink"><a href="/index.php"><span class="headw">{SITENAME}</span></a><br />
      <span class="genmedw">{SITE_DESCRIPTION}</span></div></td>

<td style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazh.jpg');">&nbsp;</td>
   
<td width="494" height="80" align="right" style="background:url('http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/kolazhon.jpg');">
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="midlink">
<div id="search-box">
<form action="{U_SEARCH}" method="post" id="search">
            <fieldset class="nb">
               <input name="keywords" style="opacity:0.8;filter:alpha(opacity=80)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" type="text" class="inputbox search" id="keywords" title="{L_SEARCH_KEYWORDS}" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" maxlength="50" />
               <input class="nb" style="opacity:0.8;filter:alpha(opacity=80)" name="submit" type="image" src="{T_THEME_PATH}/images/search.gif" align="absmiddle" /><br />
{S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
</form>
</div>
</div>
      <!-- ENDIF -->
      </td>
  </tr>
  </table>

  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td width="228" height="32" align="left" class="genmedw" style="background:url('{T_THEME_PATH}/images/bottoml.gif');"><div id="bottomlink">
               <!-- IF S_USER_LOGGED_IN --><a class="genmedw" href="{U_PROFILE}">{L_PROFILE}</a><!-- ENDIF -->
            <!-- IF U_RESTORE_PERMISSIONS --> <a class="genmedw" href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
            <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
                </div>
     </td>

<td style="background:url('{T_THEME_PATH}/images/bottomm.gif');">&nbsp;</td>

  <td width="519" align="{S_CONTENT_FLOW_END}" class="genmedw" style="background:url('{T_THEME_PATH}/images/bottomr.gif');">
  <div id="bottomlink"><span class="genmedw">
<a class="genmedw" href="{U_GALLERY_MOD}" title="{L_GALLERY_EXPLAIN}">{L_GALLERY}</a> &bull;
            <a class="genmedw" href="{U_FAQ}">{L_FAQ}</a> &bull;  <a class="genmedw" href="{U_MEDALS}">{L_MEDALS_VIEW}</a>
<!-- IF not S_IS_BOT --><!-- IF S_DISPLAY_MEMBERLIST --> &bull; <a class="genmedw" href="{U_MEMBERLIST}">{L_MEMBERLIST}</a><!-- ENDIF --><!-- IF S_DISPLAY_SEARCH --> &bull; <a class="genmedw" href="{U_SEARCH}">{L_SEARCH}</a><!-- ENDIF --><!-- ENDIF -->
</span></div>
     </td>
    </tr>
  </table>
</div>

   <div id="datebar">
      <table width="100%" cellspacing="0">
      <tr>
         <td class="gensmall"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
         <td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
      </tr>
      </table>
   </div>

<div id="wrapcentre">

   <!-- IF S_DISPLAY_SEARCH -->
   <p class="searchbar">
      <span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
      <!-- IF S_USER_LOGGED_IN -->
      <span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
      <!-- ENDIF -->
   </p>
   <!-- ENDIF -->

   <br style="clear: both;" />

   <!-- INCLUDE breadcrumbs.html -->

   <br />
<script type="text/javascript" src="//yandex.st/share/share.js"
charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru"
data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"

></div>
   <div id="main_content">
   
            <div id="menu_tab">
<div id="dock" class="dock">
<div class="dock-container" style="left: 500px; width: 500px;">
<a class="dock-item" href="http://coinsspb.com/index.php?sid=a62de383e739d364d4c22b834c27e809" style="width: 40px; left: 0px;">
<img alt="home" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/home.png">
<span style="display: none;">Главная</span>
</a>
<a class="dock-item" href="http://coinsspb.com/ucp.php?i=pm&folder=inbox" style="width: 40px; left: 40px;">
<img alt="contact" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/email.png">
<span style="display: none;">Contact</span>
</a>
<a class="dock-item" href="http://coinsspb.com/gallery/index.php" style="width: 40px; left: 80px;">
<img alt="portfolio" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/portfolio.png">
<span style="display: none;">Portfolio</span>
</a>
<a class="dock-item" href="http://coinsspb.com/viewforum.php?f=18" style="width: 40px; left: 120px;">
<img alt="music" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/music.png">
<span style="display: none;">Music</span>
</a>
<a class="dock-item" href="http://coinsspb.com/viewforum.php?f=109" style="width: 40px; left: 160px;">
<img alt="video" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/video.png">
<span style="display: none;">Video</span>
</a>
<a class="dock-item" href="http://coinsspb.com/search.php" style="width: 40px; left: 200px;">
<img alt="history" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/history.png">
<span style="display: none;">History</span>
</a>
<a class="dock-item" href="http://coinsspb.com/medals.php" style="width: 40px; left: 240px;">
<img alt="calendar" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/calendar.png">
<span style="display: none;">Calendar</span>
</a>
<a class="dock-item" href="http://coinsspb.com/ucp.php" style="width: 40px; left: 280px;">
<img alt="rss" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/rss.png">
<span style="display: none;">RSS</span>
</a>
</div>
</div>

<script type="text/javascript">
   
   $(document).ready(
      function()
      {
         $('#dock').Fisheye(
            {
               maxWidth: 50,
               items: 'a',
               itemsText: 'span',
               container: '.dock-container',
               itemWidth: 40,
               proximity: 90,
               halign : 'center'
            }
         )
      }
   );

</script>

Автор:  vikweb [ 20 апр 2014, 18:59 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Рок писал(а):ничего не изменилось

у вас в шаблоне установлен скрипт /postlink.js вот он конфликтует с этими
/jquery.js
/interface.js
скриптами

попробуйте из шаблона удалить эту строку
Код:
<script type="text/javascript" src="http://coinsspb.5nx.ru/images/ranks3/coinsspb_5nx_ru/postlink.js"></script>

и посмотрите результат

Автор:  Рок [ 20 апр 2014, 19:03 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Удалил. Все равно коряво, значки большие. Но они уже задвигались :)

Автор:  vikweb [ 20 апр 2014, 19:08 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

Рок писал(а):Все равно коряво, значки большие

не вижу, ни коряво, ни большие

Изображение

и ещё я вижу что картинки выплывают

может вам лучше поставить меню как тут index.php?style=2 ?

Автор:  Рок [ 20 апр 2014, 19:15 ]
Заголовок сообщения:  Re: Меню в стиле выплывающих картинок

У меня счетчики наплыли прямо по середине.
Изображение

Страница 1 из 5 Часовой пояс: UTC + 1 час [ Летнее время ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/