Новое раздвижное меню (переделка от Nk-CS.Ru)

Красивое светлое меню с иконками для uCoz. Особенности меню заключаются в том, что это не просто меню, но оно еще и раздвижное, а значит можно добавить много пунктов, но при этом не занимать много места на сайте.

Установка:
1. В глобальный блок в нужное вам место вставляем код:

<div class="zp-links">
<ul class="InfBlock">
<a class="bmenu_new" href="/" title="Главная страница"><img src="/images/1.png" align="absmiddle" width="16" style="margin-right: 4px;">Главная страница</a>
<a class="bmenu_new" href="#" title="Форум сайта"><img src="/images/3.png" align="absmiddle" width="16" style="margin-right: 4px;">Форум сайта</a>

<a rel="rip-menu" class="bmenu_new" href="javascript://" title="Рипы от Nk-CS.Ru"><img src="/images/favicon.ico" align="absmiddle" width="15"> Рипы от Nk-CS.Ru</a>
<div class="s-level" id="rip-menu" style="display: none; ">
<a class="bmenu_new" href="#">Шаблоны</a>
<a class="bmenu_new" href="#">Скрипты</a>
<a class="bmenu_new" href="#">Информеры</a>
<a class="bmenu_new" href="#">PSD</a>
<a class="bmenu_new" href="#">Другие рипы</a>
</div>

<a rel="ucoz-menu" class="bmenu_new" href="javascript://" title="Система uCoz"><img src="/images/9.png" align="absmiddle" width="15">Система uCoz</a>
<div class="s-level" id="ucoz-menu" style="display: none; ">
<a class="bmenu_new" href="#">Шаблоны</a>
<a class="bmenu_new" href="#">Шаблоны форума</a>
<a class="bmenu_new" href="#">Баннеры и Логотипы</a>
<a class="bmenu_new" href="#">Кнопки для форума</a>
<a class="bmenu_new" href="#">Награды и Медали</a>
<a class="bmenu_new" href="#">Смайлы</a>
<a class="bmenu_new" href="#">Ранги</a>
<a class="bmenu_new" href="#">Скрипты</a>
<a class="bmenu_new" href="#">pHp Скрипты</a>
<a class="bmenu_new" href="#">Шапки</a>
<a class="bmenu_new" href="#">Иконки групп</a>
<a class="bmenu_new" href="#">Страницы 404</a>
<a class="bmenu_new" href="#">Кнопки Скачать</a>
<a class="bmenu_new" href="#">Иконки Favicon</a>
</div>
<a class="bmenu_new" href="#" title="Новости"><img src="/images/2.png" align="absmiddle" width="16" style="margin-right: 4px;">Новости</a>
<a class="bmenu_new" href="#" title="Статьи"><img src="/images/4.png" align="absmiddle" width="16" style="margin-right: 4px;">Статьи</a>
<a class="bmenu_new" href="#" title="Отзывы о сайте"><img src="/images/5.png" align="absmiddle" width="16" style="margin-right: 4px;">Отзывы о сайте</a>
</ul></div>
<script type="text/javascript">
$(function(){
$(".s-level").hide();
$(".zp-links a.bmenu_new").click(function(){
var submenu = $(this).attr('rel');
$("#"+submenu+"").toggle('fast');
});
});
</script>

2. Далее идем в таблицу стилей CSS и в самый низ ставим код:

a.bmenu_new, a.bmenu_new:visited {display:block; padding:3px 5px 3px 5px; background:#FAFAFA; border-top:1px solid #fff; border-bottom:1px solid #E8E8E8; color:#696969; font-weight:bold; text-shadow:0px 1px 0px #fff;}
a.bmenu_new:hover, a.bmenu_new:active {color:#696969; background:#F0F0F0;}
.diz-a_menu-box {-moz-box-shadow:0px 0px 3px #aaaaaa inset; -webkit-box-shadow:0px 0px 3px #aaaaaa inset; box-shadow:0px 0px 3px #aaaaaa inset;}
.InfBlock {display:block; padding:0; margin:0; list-style:none}
.InfBlock {margin:-4px -4px}
.zp-links .s-level a.w-sub:hover{background-position:190px 7px}
.zp-links .s-level{padding-left:22px}
.zp-links .s-level a{border-left:2px solid #ea7609;font-weight:normal}
.zp-links .s-level a:hover{padding-left:8px;margin-left:-8px}

Дополнительно:
Если хотите добавить еще раздвижное меню, то вставляем в меню код:

<a rel="new-menu" class="bmenu_new" href="javascript://" title="Новое меню"><img src="/images/favicon.ico" align="absmiddle" width="15"> Новое меню</a>
<div class="s-level" id="new-menu" style="display: none; ">
<a class="bmenu_new" href="#">Ссылка</a>
<a class="bmenu_new" href="#">Ссылка</a>
<a class="bmenu_new" href="#">Ссылка</a>
<a class="bmenu_new" href="#">Ссылка</a>
<a class="bmenu_new" href="#">Ссылка</a>
</div>

В коде есть rel="new-menu" и id="new-menu", каждый раз когда добавляете новое меню, то new-menu меняете на свое, например dle-menu, other-menu и т.д, главное, чтобы они не повторялись иначе будут открываться сразу обе.

3. Скачиваем архив и заливаем иконки в папку images.
4. На этом установка завершена.

images.zip [7.8 Kb] (Скачали 2)