Nk-CS.Ru: Все для вашего портала uCoz
Авторизация

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

Новое раздвижное меню (переделка от 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] (cкачиваний: 0)

7.6
5 оценок
7.0
Дизайн:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
8.0
Функционал:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
8.5
Мобильность:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
7.0
Общая оценка:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Читайте также
Данил Дерягин
3 февраля 2018 23:40
+ 0 -
Не пойму как сделать еще пару раздвижных категорий. Там только их два это:
Рипы от nk-cs.ru
Система Ucoz
Как допустим сделать еще пару таких, не могу разобраться с кодом.
na3uTuB4uk
4 февраля 2018 10:31
+ +2 -
Данил Дерягин,
Отредактировал материал и добавил подробное описание, теперь трудностей быть не должно.
Nk-CS.Ru - The Best of Web!
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Авторизация
лучший сайт где можно скачать шаблоны для dle 11.3 бесплатно