Как сделать это меню навигации на сайт ?

И снова здравствуйте
Знаю наверное я уже достала со своими меню навигации, но просто я сама никак не могу понять куда его ставить и как переоформлять под второй бобик, да и вообще под 2х2. Обычное меню навигации не подходит и мне очень хочется сделать как у многих новое и классное меню
Я нашла подходящее для меня меню и я хочу попросить помощи специалистов. Вот ссылка на страницу сайта, где находиться код меню:

Пожалуйста помогите сделать это меню вместо стандартного меню. Ссылки уж сама потом изменю,хотя бы подскажите где и как нужно делать изменения и какой код нужно вставить,чтобы он не портился...
Заранее спасибо, всем кто окажет помощь

Вариант для BB2

1.1 Откройте в ПА > Оформление > Шаблоны > Общие настройки шаблон overall_header (Верхняя часть страницы)

Найдите строку

Код:

<td align="{MENU_POSITION}" {MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

и замените на

Код:

<td align="{MENU_POSITION}" {MENU_NOWRAP} class="basemn" style="display: none">{GENERATED_NAV_BAR}</td>

1.2 Затем, после фрагмента

Код:

<td align="{MENU_POSITION}" {MENU_NOWRAP} class="basemn" style="display: none">{GENERATED_NAV_BAR}</td>
</tr>
</table>

добавьте код самого меню:

Код:

<div id="top-menu">
<ul class="menu">

   <li><a href="/forum">Форум</a></li>
     <li><a href="/faq">FAQ</a></li>
     <li><a href="/groups">Группы</a></li>
     <li><a href="/memberlist">Юзеры</a></li>
   <li><a href="#">Список</a>
      <ul>
         <li><a href="#" class="docu">Файлы</a></li>
         <li><a href="#" class="docu">Объявления</a></li>
         <li><a href="#" class="docu">Разделы</a></li>
      </ul>
   </li>
   <li><a href="/profile?mode=editprofile" id="mn_prof">Профиль</a></li>
   <li><a href="/msg.forum?folder=inbox" id="mn_ls">Мои ЛС</a></li>
   <li><a href="/login.forum?logout" id="mn_logout">Выход</a></li>
     <li><a href="/login" id="mn_login">Вход</a></li>
       <li><a href="/profile?mode=register" id="mn_reg">Регистрация</a></li>
</ul>
</div>

Сохраните шаблон и опубликуйте (!), нажав на иконку "опубликовать"

В коде выпадающего подменю

Код:

<li><a href="#" class="documents">Файлы</a></li>
<li><a href="#" class="messages">Объявления</a></li>
<li><a href="#" class="signout">Разделы</a></li>


замените пустые ссылки # на те, которые Вам нужно и переименуйте сами пункты подменю. "Файлы", "Объявления" и "Разделы" написаны для примера.

2. В Па > Оформление > Цвета > Каскадная таблица стилей CSS добавьте настройки для меню:

Код:

/* начало настроек топ меню */

#top-menu #top-menu .menu,
#top-menu .menu ul,
#top-menu .menu li,
#top-menu .menu a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

/* линия меню - высота, цвет и фоновое изображение */

#top-menu .menu {   
   height: 40px;
   background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

#top-menu .menu li {
   position: relative;
   list-style: none;
   float: left;
   display: block;
   height: 40px;
}

/* ссылки */

#top-menu .menu li a {
   display: block;
   padding: 0 14px;
   margin: 6px 0;
   line-height: 28px;
   text-decoration: none;   
   border-left: 1px solid #393942;
   border-right: 1px solid #4f5058;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   font-size: 13px;
   color: #f3f3f3;  /* цвет ссылок меню */
   text-shadow: 1px 1px 1px rgba(0,0,0,.6);
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

#top-menu .menu li:first-child a { border-left: none; }
#top-menu .menu li:last-child a{ border-right: none; }

 /* цвет пунктов меню при наведении */
#top-menu .menu li:hover > a {
color: #8fde62;
}

/* подменю */

#top-menu .menu ul {
   position: absolute;
   top: 40px;
   left: 0;
   opacity: 0;   
   background: #1f2024; /* фон выпадающей панели */
   -webkit-border-radius: 0 0 5px 5px;
   -moz-border-radius: 0 0 5px 5px;
   border-radius: 0 0 5px 5px;
   -webkit-transition: opacity .25s ease .1s;
   -moz-transition: opacity .25s ease .1s;
   -o-transition: opacity .25s ease .1s;
   -ms-transition: opacity .25s ease .1s;
   transition: opacity .25s ease .1s;
}

#top-menu .menu li:hover > ul { opacity: 1; }

#top-menu .menu ul li {
   height: 0;
   overflow: hidden;
   padding: 0;

   -webkit-transition: height .25s ease .1s;
   -moz-transition: height .25s ease .1s;
   -o-transition: height .25s ease .1s;
   -ms-transition: height .25s ease .1s;
   transition: height .25s ease .1s;
}

#top-menu .menu li:hover > ul li {
   height: 36px;
   overflow: visible;
   padding: 0;
}

#top-menu .menu ul li a {
   width: 100px;
   padding: 4px 0 4px 40px;
   margin: 0;

   border: none;
   border-bottom: 1px solid #353539;
}

#top-menu .menu ul li:last-child a { border: none; }

/* цвет ссылки Новое ЛС */

.nova {
  color: #5FC723 !important;
}

/* иконка подменю */

#top-menu .menu a.docu {
  background: url(http://i70.servimg.com/u/f70/17/37/83/89/arrow10.png) no-repeat 6px center;
}

.fa_ticker_content div > * {
z-index: 1 !important; 
}
#top-menu .menu > * {
z-index: 999 !important; 
}

/* конец настроек топ меню */

Сохраните.

3. В ПА > Модули > Управление кодами JS создайте новый файл

Активировать управление кодами Javascript : Да
Название : любое
Расположение : на всех страницах
Код:

Код:

$(document).ready(function() {

if (jQuery('.basemn').is(":has('#i_icon_mini_logout')")) {
jQuery("#mn_reg, #mn_login, #tbry").hide()
}
else {jQuery("#mn_reg, #mn_login, #tbry").show();
jQuery("#mn_ls, #mn_prof, #mn_logout").hide()
}

if (jQuery('.basemn').is(":has('#i_icon_mini_new_message')")) {
jQuery("a#mn_ls").text("Новое ЛС!").addClass("nova");
}
else {jQuery("a#mn_ls span").text("Мои ЛС")
}

});

Сохраните.

---

Вариант для Pun

1.1 Откройте в ПА > Оформление > Шаблоны > Общие настройки шаблон overall_header (Верхняя часть страницы)

Найдите строку

Код:

<div id="pun-head">

и замените на

Код:

<div id="pun-head" style="display:none">

1.2 После фрагмента

Код:

<div id="pun-head" style="display:none">
   <div id="pun-navlinks">
   <ul class="clearfix">
   <li>{GENERATED_NAV_BAR}</li>
   </ul>
   </div>
</div>

добавьте код самого меню:

Код:

<div id="top-menu">
<ul class="menu">

  <li><a href="/forum">Форум</a></li>
    <li><a href="/faq">FAQ</a></li>
    <li><a href="/groups">Группы</a></li>
    <li><a href="/memberlist">Юзеры</a></li>
  <li><a href="#">Список</a>
      <ul>
        <li><a href="#" class="docu">Файлы</a></li>
        <li><a href="#" class="docu">Объявления</a></li>
        <li><a href="#" class="docu">Разделы</a></li>
      </ul>
  </li>
  <li><a href="/profile?mode=editprofile" id="mn_prof">Профиль</a></li>
  <li><a href="/msg.forum?folder=inbox" id="mn_ls">Мои ЛС</a></li>
  <li><a href="/login.forum?logout" id="mn_logout">Выход</a></li>
    <li><a href="/login" id="mn_login">Вход</a></li>
      <li><a href="/profile?mode=register" id="mn_reg">Регистрация</a></li>
</ul>
</div>

Сохраните шаблон и опубликуйте (!), нажав на иконку "опубликовать" .

2. В Па > Оформление > Цвета > Каскадная таблица стилей CSS добавьте настройки для меню:

Код:

/* начало настроек топ меню */

#top-menu #top-menu .menu,
#top-menu .menu ul,
#top-menu .menu li,
#top-menu .menu a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

/* линия меню - высота, цвет и фоновое изображение */

#top-menu .menu { 
  height: 40px;
  background: #474954 url(http://i70.servimg.com/u/f70/17/37/83/89/snap0010.jpg) repeat;
}

#top-menu .menu li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
  height: 40px;
}

/* ссылки */

#top-menu .menu li a {
  display: block;
  padding: 0 14px;
  margin: 6px 0;
  line-height: 28px;
  text-decoration: none; 
  border-left: 1px solid #393942;
  border-right: 1px solid #4f5058;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #f3f3f3;  /* цвет ссылок меню */
  text-shadow: 1px 1px 1px rgba(0,0,0,.6);
  -webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}

#top-menu .menu li:first-child a { border-left: none; }
#top-menu .menu li:last-child a{ border-right: none; }

 /* цвет пунктов меню при наведении */
#top-menu .menu li:hover > a {
color: #8fde62;
}

/* подменю */

#top-menu .menu ul {
  position: absolute;
  top: 40px;
  left: 0;
  opacity: 0; 
  background: #1f2024; /* фон выпадающей панели */
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  -webkit-transition: opacity .25s ease .1s;
  -moz-transition: opacity .25s ease .1s;
  -o-transition: opacity .25s ease .1s;
  -ms-transition: opacity .25s ease .1s;
  transition: opacity .25s ease .1s;
}

#top-menu .menu li:hover > ul { opacity: 1; }

#top-menu .menu ul li {
  height: 0;
  overflow: hidden;
  padding: 0;

  -webkit-transition: height .25s ease .1s;
  -moz-transition: height .25s ease .1s;
  -o-transition: height .25s ease .1s;
  -ms-transition: height .25s ease .1s;
  transition: height .25s ease .1s;
}

#top-menu .menu li:hover > ul li {
  height: 36px;
  overflow: visible;
  padding: 0;
}

#top-menu .menu ul li a {
  width: 100px;
  padding: 4px 0 4px 40px;
  margin: 0;

  border: none;
  border-bottom: 1px solid #353539;
}

#top-menu .menu ul li:last-child a { border: none; }

/* цвет ссылки Новое ЛС */

.nova {
  color: #5FC723 !important;
}

/* иконка подменю */

#top-menu .menu a.docu {
  background: url(http://i70.servimg.com/u/f70/17/37/83/89/arrow10.png) no-repeat 6px center;
}

.fa_ticker_content div > * {
z-index: 1 !important; 
}
#top-menu .menu > * {
z-index: 999 !important; 
}

/* конец настроек топ меню */

Сохраните.

3. В ПА > Модули > Управление кодами JS создайте новый файл

Активировать управление кодами Javascript : Да
Название : любое
Расположение : на всех страницах
Код:

Код:

$(document).ready(function() {

if (jQuery('#pun-head').is(":has('#i_icon_mini_logout')")) {
jQuery("#mn_reg, #mn_login, #tbry").hide()
}
else {jQuery("#mn_reg, #mn_login, #tbry").show();
jQuery("#mn_ls, #mn_prof, #mn_logout").hide()
}

if (jQuery('#pun-head').is(":has('#i_icon_mini_new_message')")) {
jQuery("a#mn_ls").text("Новое ЛС!").addClass("nova");
}
else {jQuery("a#mn_ls span").text("Мои ЛС")
}

});

Сохраните.

Уточнение: специфика кнопок такова, что без параметра float:left они некорректно работают, поэтому данные кнопки нельзя выровнять по центру меню. Оно может быть только прижато к левому или правому краю.