Главная » Статьи » Статьи о/про uCoz » JS и JQ скрипты для uCoz

Пишем скрипт меню для Интернет магазина. Для юКоз (uCoz). jQuery

Выполняя просьбу, для одного человека, пришлось править один скрипт меню.

Начиналось все просто - нужно было сделать, чтобы при переходе в категорию, нужный, скрытый по умолчанию, блок с подкатегориями, раскрывался. Ничего, вроде, сложного.
Но, у него уже стоял скрипт, для очень простой функции - при клике на картинку с плюсом - показывать скрытые подменю, а при клике на минусе, при клике - картинка меняется с плюса на минус, скрывать. Всё бы хорошо, да скрипт тот уж больно мне не понравился. Для такой простой операции - он был просто огромным, кроме того, все стили для этого меню, тоже были составной частью скрипта, что ещё на порядок увеличивало его размер. Помучившись немного  .... я ещё раз пришёл к давно уже понятному лично мне умозаключению: «хочешь, что бы было по твоему - пиши по своему»

Для данной ситуации это означало примерно следующее: «хочешь, чтобы всё было красиво, и понятно - пиши свой скрипт меню».

Вот по этому этот пост увидел свет, а вы увидели его.


Итак пишем скрипт меню.

Как мне нравится делать, давайте определимся с функциями, которые должен выполнять будущий скрипт, и набросаем примерный список:

  • 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">
/* StartStyle */
#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;}
/* EndStyle */
</style>

Пояснять стили - принципиально не буду, так как в них ничего сложного... единственное, скажу, что класс «.active» используется для раскрытых категорий, точнее, для ссылки, при клике по которой скрытый блок разворачивается, а класс «.act» - для текущей ссылки.


Сам скрипт ...

Code
<script type="text/javascript">
$(document).ready(function(){
/* Start DocumentReady */
$('#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){}
/* End DocumentReady */
});
</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(),Пример присутствует
Категория: JS и JQ скрипты для uCoz | Добавил: likbezz (02.09.2010)
Просмотров: 13482 | Комментарии: 3 | Теги: CSS, скрипт, Интернет.магазина, UCOZ, jQuery, пишем, меню, для, юкоз
Всего комментариев: 3
0  
3  Solyt [Материал[21.06.2012]

пример здесь_alimpex.by_ да, и еще что-то не меняется мой фавикон, не подскажите почему? как стоял стандартный, так и стоит....все сделал как надо, потом почистил браузер и ничего (

0  
2  Solyt [Материал[21.06.2012]

Доброго времени суток! Делаю меню с картинками, но с боку вылазит черточка, а где ее убрать не могу понять, вот код

<style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 180px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 180px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: #99CCCC;
}

.suckerdiv .subfolderstyle{
background: url(http:/) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">
var menuids=["suckertree1"]

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="Сылка" title="Описание при наведении">Импульсное устройство ИУ-1000Г</a></li>
<li><a href="Сылка" title="Описание при наведении">Узел управления</a>
<ul>
<li><a href="Сылка" title="Клапан КЗУ">Клапан КЗУ</a></li>
<li><a href="Сылка" title="Узел управления спринклерный ("МОКРЫЙ")">Узел управления спринклерный ("МОКРЫЙ")</a></li>
<li><a href="Сылка" title="Узел управления спринклерный ("СУХОЙ")">Узел управления спринклерный ("СУХОЙ")</a></li>
<li><a href="Сылка" title="Узел управления дренчерный">Узел управления дренчерный</a></li>
<li><a href="Сылка" title="Узел управления спринклерно-дренчерный">Узел управления спринклерно-дренчерный</a></li>
</ul>


<li><a href="Сылка" title="Описание при наведении">4</a>

<ul>
<li><a href="Сылка" title="Описание при наведении">5</a>
<li><a href="Сылка" title="Описание при наведении">6</a>
</ul>
</li>
</div>

0  
1  Solyt [Материал[20.06.2012]

а если необходимо в стандартном меню, главным разделам присвоить свою, уникальную картинку, как возможно это реализовать?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]