Главная » Шаблоны и Скрипты для uCoz » Скрипты для uCoz » Меню для uCoz |
Светлое Раздвижное меню для сайта uCoz
12.06.2015, 22:32 | |
Светлое Раздвижное меню для сайта uCoz. Новое меню, в простом стиле, подходит под светлый дизайн сайта. Меню раздвижное для uCoz. 1. В блок ставим этот код: Код <div class="zp-links"> <ul class="InfBlock"> <a class="bmenu_new" href="/" title="Главная страница"><img src="/img/icons2/1.png" align="absmiddle" width="16" style="margin-right: 4px;">Главная страница</a> <a class="bmenu_new" href="/forum" title="Форум сайта"><img src="/img/icons2/3.png" align="absmiddle" width="16" style="margin-right: 4px;">Форум сайта</a> <a rel="rip-menu" class="bmenu_new" href="javascript://" title="uWebik.ru"><img src="/favicon.ico" align="absmiddle" width="15"> uWebik.ru</a> <div class="s-level" id="rip-menu" style="display: none; "> <a class="bmenu_new" href="http://uwebik.ru/">Главная BS</a> <a class="bmenu_new" href="http://uwebik.ru//forum">Форум BS</a> <a class="bmenu_new" href="http://uwebik.ru/forum/3-5-1">Баннерообмен</a> </div> <a rel="ucoz-menu" class="bmenu_new" href="javascript://" title="Система uCoz"><img src="/img/icons2/9.png" align="absmiddle" width="15"> Система uCoz</a> <div class="s-level" id="ucoz-menu" style="display: none; "> <a class="bmenu_new" href="/load/11">Шаблоны</a> <a class="bmenu_new" href="/load/12">Шаблоны форума</a> <a class="bmenu_new" href="/load/13">Баннеры и Логотипы</a> <a class="bmenu_new" href="http://uwebik.ru/">Кнопки для форума</a> <a class="bmenu_new" href="/load/15">Награды и Медали</a> <a class="bmenu_new" href="/load/16">Смайлы</a> <a class="bmenu_new" href="/load/17">Ранги</a> <a class="bmenu_new" href="/load/18">Скрипты</a> <a class="bmenu_new" href="http://uwebik.ru/">pHp Скрипты</a> <a class="bmenu_new" href="/load/20">Шапки</a> <a class="bmenu_new" href="/load/21">Иконки групп</a> <a class="bmenu_new" href="/load/22">Страницы 404</a> <a class="bmenu_new" href="/load/23">Кнопки Скачать</a> <a class="bmenu_new" href="http://uwebik.ru/">Иконки Favicon</a> </div> <a class="bmenu_new" href="/news" title="Новости"><img src="/img/icons2/2.png" align="absmiddle" width="16" style="margin-right: 4px;">Новости</a> <a class="bmenu_new" href="/publ" title="Статьи"><img src="/img/icons2/4.png" align="absmiddle" width="16" style="margin-right: 4px;">Статьи</a> <a class="bmenu_new" href="/gb" title="Отзывы о сайте"><img src="/img/icons2/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} 3. Качаем архив, из архива папку img переместите к себе в файловый менеджер. Готово!. | |
Просмотров: 477 | Загрузок:20 Скачать (6.8 Kb) |
Всего комментариев: 0 | |