Выполняя просьбу, для одного человека, пришлось править один скрипт меню. Начиналось все просто - нужно было сделать, чтобы при переходе в категорию, нужный, скрытый по умолчанию, блок с подкатегориями, раскрывался. Ничего, вроде, сложного. Но, у него уже стоял скрипт, для очень простой функции - при клике на картинку с плюсом - показывать скрытые подменю, а при клике на минусе, при клике - картинка меняется с плюса на минус, скрывать. Всё бы хорошо, да скрипт тот уж больно мне не понравился. Для такой простой операции - он был просто огромным, кроме того, все стили для этого меню, тоже были составной частью скрипта, что ещё на порядок увеличивало его размер. Помучившись немного .... я ещё раз пришёл к давно уже понятному лично мне умозаключению: «хочешь, что бы было по твоему - пиши по своему». Для данной ситуации это означало примерно следующее: «хочешь, чтобы всё было красиво, и понятно - пиши свой скрипт меню». Вот по этому этот пост увидел свет, а вы увидели его.
Итак пишем скрипт меню.Как мне нравится делать, давайте определимся с функциями, которые должен выполнять будущий скрипт, и набросаем примерный список: - 1. Должен скрывать подменю.
- 2. При открытии страницы раздела, показывать скрытые подразделы этого раздела.
- 3. Для скрытых разделов - показывать плюс, а для раскрытых - минус.
- 4. При клике на блоке раздела, если находится не в этом разделе, должен осуществлять переход по ссылке, а не сворачивать/разворачивать блоки.
- 5.Должен быть лёгким и понятным для восприятия.
- 6.
Исходники, с которыми будем работать и для которых будем писать скрипт: HTML-каркас всего меню (сокращенный вариант - три ветки): Code (HTML-каркас всего меню) <div id="mySiteMenuDiv"> <ul id="mySiteMenu"> <li class="mSec"><a class="mLink" href="/shop/mobile/">Телефоны</a> <ul class="mSub"> <li><a href="/shop/mobile/Apple_iPhone">Apple iPhone</a></li> <li><a href="/shop/mobile/Nokia">Nokia</a></li> <li><a href="/shop/mobile/Samsung">Samsung</a></li> </ul></li> <li class="mSec"><a class="mLink" href="/shop/notebook/">Ноутбуки</a> <ul class="mSub"> <li><a href="/shop/notebook/Apple_MacBook">Apple MacBook</a></li> <li><a href="/shop/notebook/Acer">Acer</a></li> <li><a href="/shop/notebook/Asus">Asus</a></li> </ul></li> <li class="mSec"><a class="mLink" href="/shop/computers">Компьютеры</a> <ul class="mSub"> <li><a href="/shop/computers/Apple_iMac">Apple iMac</a></li> <li><a href="/shop/computers/Acer_comp">Acer</a></li> <li><a href="/shop/computers/iRu">iRu</a></li> </ul></li> </ul> </div>
И, немножечко оформим это дело ... как всегда, с помощью CSS ...
CSS-стили для меню
Code <style type="text/css">
#mySiteMenuDiv{width:220px;text-align:left;margin:0px auto;} #mySiteMenuDiv *{margin:0px;padding:0px;list-style:none;} #mySiteMenu{} #mySiteMenu a{display:block;font:normal 12px/1 Verdana,sans-serif;padding:5px;} #mySiteMenu li.mSec{} #mySiteMenu li.mSec a.mLink{background:transparent url('/_theme/_st/img/ico/_plus_sm.gif') no-repeat scroll left 50%;font:bold 15px/1 Verdana,sans-serif;padding:5px 5px 5px 17px;text-decoration:none;} #mySiteMenu li.mSec.active a.mLink{background:transparent url('/_theme/_st/img/ico/_minus_sm.gif') no-repeat scroll left 50%;color:#C30;} #mySiteMenu ul.mSub{display:none;margin-left:17px;} #mySiteMenu ul.mSub li a.act{color:#C30;}
</style>
Пояснять стили - принципиально не буду, так как в них ничего сложного... единственное, скажу, что класс «.active» используется для раскрытых категорий, точнее, для ссылки, при клике по которой скрытый блок разворачивается, а класс «.act» - для текущей ссылки.
Сам скрипт ...Code <script type="text/javascript"> $(document).ready(function(){
$('#mySiteMenu > li.mSec').each(function(){ var $el=$(this),$href=$('a:eq(0)',$el).attr('href'),dlh=document.location.href; if(dlh.indexOf($href)!=-1){ $el.addClass('active').find('ul.mSub').stop(true, true).slideDown(); $('a:eq(0)',$el).click(function(){ $el.toggleClass('active').find('ul.mSub').slideToggle();return false; }); }; }); try{var nl=document.getElementById('mySiteMenu').getElementsByTagName('a'); var found=-1; var url=document.location.href+'/'; var len=0;for(var i=0;i<nl.length;i++) {if(url.indexOf(nl[i].href)>=0){if(found==-1 || len<nl[i].href.length){found=i;len=nl[i].href.length; }}} if(found>=0){nl[found].className+='act';}}catch(e){}
}); </script>
Где: $('#mySiteMenu > li.mSec').each(function() - быстренько пробегаемся по всем элементам «li», имеющим класс «.mSec» в блоке с ID «#mySiteMenu» var $el=$(this),$href=$('a:eq(0)',$el).attr('href'),dlh=document.location.href; - объявляем кучу переменных, и назначаем им значения. if(dlh.indexOf($href)!=-1) - если в текущем URL найдено вхождение ссылки из текущего элемента, то есть не равно «-1» (нет вхождения) $el.addClass('active').find('ul.mSub').stop(true, true).slideDown(); - то, присваиваем класс «active», находим подменю «ul.mSub», останавливаем всю текущую анимацию (если есть), и вызываем анимацию «slideDown» (показываем подменю) $('a:eq(0)',$el).click(function() - потом, находим ссылку в раздел, и вешаем обработчик «.click();» $el.toggleClass('active').find('ul.mSub').slideToggle();return false; - в котором назначаем изменяемый (.toggleClass();) класс «active», находим подменю «ul.mSub», и вешаем зацикленную анимацию «.slideToggle();». Далее, идёт скрипт, который ищет в блоке «mySiteMenu» все элементы «а», проверяет их значение «href» с текущим адресом страницы, и, при соответствии, добавляет класс «act». Спецов по JavaScript прошу не пинать сильно, объясняю как могу, и понимаю, что не всё корректно, зато понятно, я надеюсь....ヅ
Чё забыл? ... Вроде ничего ... Если всё же, что-то забыл, рисуйте в комментариях - допишу. А так, посмотреть, как всё это дело работает вживую, и покликать по разделам/категориям можно вот здесь ... http://sml.ucoz.net/shop ... Пример тоже присутствует ... Взглянуть на пример можно тыкнув вот в эту ссылку «http://likbezz.ucoz.ru/_content/_publ/cont/shop_menu/shop_menu_p1.html» Ну и скриншот, на всякий ...
P.S.Всем удачи... ヅ И, это... С праздничком - Днём знаний. (1-е сентября).. Картинки плюса и минуса честно позаимствованны у google.ru Flesh
Источник: Пишем скрипт меню для Интернет магазина. Для юКоз (uCoz). jQuery,JavaScript,CSS,slideDown,.each(),Пример присутствует |