Блог старого компьютера

Блог старого компьютера


Главная Jquery Вертикальное выпадающее меню на Jquery

Вертикальное выпадающее меню на Jquery

03.11.2012 09:26 Администратор Jquery
Печать PDF

В данной статье опишу простое вертикальное выпадающее меню на Jquery, которое я уже не первый раз использую в своих проектах на joomla. Код довольно простой и разобраться в нем сможет каждый новичек, а так же сможет переделать либо подточить под свой проект. В данной статье не буду описывать как заствить этот код работать с меню joomla, а покажу лишь основной исполняющий код Jquery.

Не буду тянуть и даю сразу весь код страницы:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
function hideShow(el){
$(el).nextAll('ul').slideToggle('normal');
return false;
}
function openUl(){
$("#current").parents("ul").css("display","block");
}
</script>
<style>
.menu ul{
display:none;
}
</style>
</head>
<body onload="openUl();">

<ul class="menu">
<li id="current" class="active item1"><a href="#"><span>О НАС</span></a></li>
<li class="parent item2"><a href="#" onclick="hideShow(this);return false;"><span>ГОСТИНИЦА</span></a>
<ul>
<li class="item12"><a href="#"><span>- ШТОРЫ</span></a></li>
<li class="item13"><a href="#"><span>- ПОКРЫВАЛА</span></a></li>
</ul>
</li>
<li class="parent item3"><a href="#" onclick="hideShow(this);return false;"><span>РЕСТОРАН</span></a>
<ul>
<li class="item18"><a href="#"><span>- ШТОРЫ</span></a></li>
<li class="item19"><a href="#"><span>- СТОЛОВОЕ БЕЛЬЕ</span></a></li>
</ul>
</li>
</ul>

</body>
</html>

 Как вы видите для примера я взял исходный код меню joomla и добавил  родителю скрытого списка событие onclick которое и раскрывает спрятанные пункты меню. В событие я засунул функцию hideShow(this) которая с небольшим эффектом скрывает элементы если они не скрыты, а если скрыты то наоборот показывает их.

 Попробую на русском написать эту строку (чтоб было понятнее что она делает):

$(el).nextAll('ul').slideToggle('normal');

Переключаем класс всем следующим спискам с эффектом скольжения с нормальной скоростью.

Из этого выходит что:

  • nextAll - говорит о том что работаем не с этим элементом, а с элементом следующим по пордяку (в скобках указывается фильтр с какими элементами работать, в данном случае это ul)
  • slideToggle - добавляет раскрытие/скрытие с эффектом скольжения с нормальной скоростью.

Вот сообственно и все.

Так же в скрипте есть и другая функция openUl(), ее выполняем после загрузки страницы (вешаем событием onload на body). Назначение этой функции раскрывать список в котором находится активный пункт меню.

Вам лишь остается оформить меню так как вам угодно. В joomla для того чтоб добавить к нужным пунктам меню onclick="hideShow(this);return false;" необходимо дописать файл helper.php модуля mod_mainmenu. Что дописывать и куда в этой теме писать не буду, все же она посвещана другому.

Комментарии  

 
+1 #2 Administrator 08.05.2013 08:43
Цитирую Андрей:
Жаль, что нет демки..

А за меню спасибо!

Тут демка и не нужна копируешь все содержимое в один файл запускашь и смотришь, далее оформляешь как нужно, я только предложил метод реализации.
Цитировать
 
 
-1 #1 Андрей 03.05.2013 15:16
Жаль, что нет демки..

А за меню спасибо!
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?