iЛаборатория » Blog Archive

E-mail Comment Del.icio.us Digg Reddit Technorati Furl

Меню на jQuery

марта 10, 2010 JavaScript, Программирование

Доброго времени суток, уважаемый читатель!

Совсем не давно по работе получил задание сделать раскрывающееся меню, да не просто меню, а с запоминанием раскрытых разделов, возможностью перехода на страницу товара по нажатию на название раздела и раскрытием / закрытием по нажатию на знак “+”. Данный функционал, необходимо было интегрировать в CMS 1С-Битрикс, поэтому я принял решение делать компонент, но в данном посте не об этом речь, если конечно будет интересно почитать о компоненте, то напишу.

Итак, постановка задачи ясна, теперь приступим к реализации. Но перед тем как перейти непосредственно к программированию и написанию, я думаю стоит более подробно разобраться в требованиях предъявляемых к нашему меню, а именно сохранение раскрытия после перезагрузки страницы и возможность перехода на страницу раздела по нажатию на название. Во-первых, чтобы сохранялась иерархия, мы будем использовать куки, так как это самый простой вариант реализации, да и другого я что-то сходу так и не придумаю. Во-вторых, переход осуществляется по нажатию на название раздела, т.е. для раскрытия мы сделаем знак “+”, который будет храниться в теге span, ну вот теперь приступим.

Первое что нам необходимо – это описать CSS код нашего будущего меню, так как сильную красоту наводить я смысла не вижу, поэтому он будет самым простейшим, итак CSS код:

ul.menu { list-style-type: none ! important; padding:0;margin:10px 15px;}
ul.menu li { background: none ! important; padding:2px 0;margin:0; list-style:none ! important; }
ul.menu li ul {padding:0;margin:0 0 0 15px; }
ul#dropmenu span { padding-left:8px; }

Все предельно просто, скажу только, что в данном CSS коде принудительно убираются маркеры списка и картинки, которые служат маркерами – это так, чтобы ничего не мешало. После описания CSS кода, думаю стоит перейти к HTML коду нашего меню:

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery.cookie.js" type="text/javascript"><!--mce:1--></script>
<script src="script.js" type="text/javascript"><!--mce:2--></script>
<ul id="dropmenu" class="menu">
	<li><a href="#0">Главная</a></li>
	<li><span id="plus1" class="plus">+</span> <a href="#0">О программировании</a>
<ul id="splus1">
	<li><a href="#0">PHP</a></li>
	<li><a href="#0">JS</a></li>
	<li><a href="#0">C#</a></li>
	<li><a href="#0">C++</a></li>
	<li><a href="#0">C</a></li>
</ul>
</li>
	<li><a href="#0">Контакты</a></li>
	<li><span id="plus2" class="plus">+</span> <a href="#0">Услуги</a>
<ul id="splus2">
	<li><span id="plus3" class="plus">+</span> <a href="#0">WEB</a>
<ul id="splus3">
	<li><a href="#0">Создание сайтов</a></li>
	<li><a href="#0">Дизайн</a></li>
	<li><a href="#0">Верстка</a></li>
</ul>
</li>
	<li><span id="plus4" class="plus">+</span> <a href="#0">Win приложения</a>
<ul id="splus4">
	<li><a href="#0">Этапы разработки</a></li>
	<li><a href="#0">Цены</a></li>
	<li><a href="#0">Примеры</a></li>
</ul>
</li>
</ul>
</li>
</ul>

В первых строчках мы подключаем сам фреймворк jQuery, потом подключаем плагин jQuery.Cookie, который Вы с легкостью найдете через Google и последний JS файл – это наш обработчик. В файле script.js записан наш код, который отвечает за организацию нашего меню. Как Вы наверное заметили тег span имеет ID, которое соответствует UL списку за который отвечает данный плюсик, вложенные списки UL имеют такой же ID, как и у тега span, только с приставкой “S”. С одной стороны такой подход Вам может показаться не самым оптимальным, но именно с таким подходом мы будем достигать наших целей, опять таки не спорю, что только такой подход имеет право на жизнь. Ну это все ладно, пора переходить к нашему JavaScript’у:

$(document).ready(function(){
	$("ul#dropmenu span").each(function() {
		if($.cookie('submenuMark-' + this.id)){
			$("#s"+this.id).show();
		}else{
			$("#s"+this.id).hide();
		}
});
 
$(document).ready(function(){
		$("ul#dropmenu span").click(function(){
			if($("#s"+this.id).css('display') == 'none')
			{
				cookieSet(this.id);
				$("#s"+this.id).slideDown(200);
			}else{
				cookieDel(this.id);
				$("#s"+this.id).slideUp(200);
			}
		});
	});
});
 
function cookieSet(index) {
	$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
}
function cookieDel(index) {
	$.cookie('submenuMark-' + index, null, {expires: null, path: '/'});
}

Начну с функций, которые отвечают за сохранение раскрытия / закрытия, т.е. функций работы с куками. Данные функции имеют имена cookieSet и cookieDel, в качестве параметра они принимают ID нашего вложенного UL списка. В самом начале нашего JS файла мы пробегаемся по всем тегам span в списке меню и проверяем, какие вложенные списки закрыты, а какие открыты, для этого мы просто проверяем существует ли кука с ID UL списка. Далее идет обработчик нажатия на наш плюсик. В общем то и все. Доработать данный скрипт можно многими способами, во-первых, более красиво написать JS обработчик, во-вторых, добавить разные картинки на раскрытый и скрытый список, ну и так далее.

Надеюсь данный пример пригодиться, хотя бы как основа, я же тоже собираюсь его дорабатывать и доводить до ума. Скачать пример: jQuery меню.

Спасибо за внимание!

С уважением, Главный Лаборант!

Советуем почитать:

Метки: JQuery, JS, Меню, Пример, программирование

This entry was posted on Среда, марта 10, 2010 at 0:07 and is filed under JavaScript, Программирование. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 комментариев к записи “Меню на jQuery”

Алексей, написал:
марта 10, 2010 в 12:09

Прикольно, конечно, но для меня это пока что все темно! Я больше по прикладному и системному программированию. А вообще менюшки – это классная штука. Помню, я когда-то баловался с менюшками на JavaScript. А вот JQuery не знаю совсем.

[Ответить на комментарий]
Главный Лаборант ответил на комментарий:
10 марта 2010 в 13:15
Да я тоже не знаю Вот скачал пример, правда в нем разобраться и переписать под себя не смог, поэтому просто все заново написал В общем как то так.

[Ответить на комментарий]
Режиссер киноблога, написал:
марта 10, 2010 в 13:27

Штука конечно интересная, часто вижу ее на сайтах, но наверно грузит сайт прилично. Нет?

[Ответить на комментарий]
Главный Лаборант ответил на комментарий:
10 марта 2010 в 14:10
Нет не грузит, у меня вообще данное меню строится компонентом (битрикс), где основной класс построен на рекурсии. Так что отличное меню

[Ответить на комментарий]
Саня, написал:
апреля 9, 2010 в 20:32

Долго искал кто с таким меню и с битриксом дружит… Подскажи а можно такое меню к структуре инфоблоков прикрутить в битриксе, ну типа добавляю раздел или элемент в инфлблок, а он автоматом в это меню попадает.
Заранее благодарен…

[Ответить на комментарий]
Главный Лаборант ответил на комментарий:
09 Апр 2010 в 20:53
Да у меня в проекте именно так и делается. Делал компонент, на выход в шаблон массивы с данными, там уже строил меню и выводил.

[Ответить на комментарий]
Главный Лаборант ответил на комментарий:
09 Апр 2010 в 20:55
Только у меня не элементы выводятся, а именно разделы, там много уровней и нужно было чтобы при нажатии на кнопку открывались дочерние разделы.

[Ответить на комментарий]
Саня ответил на комментарий:
13 Апр 2010 в 22:19
Здорово, это снова Саня (см выше)… вот мучаюсь и мучаюсь не как не получается сделать меню каталога на этом примере в битриксе. Подскажи пожалуйста как это реализовать.
(вот что получается… http://www.elektrokab.ru/page.php )
А код получился вот такой:

Главная
+ О программии

PHP
PHP
PHP

<? $CURRENT_DEPTH=$arResult["SECTION"]["DEPTH_LEVEL"]+1;
foreach($arResult["SECTIONS"] as $arSection):
if($CURRENT_DEPTH<$arSection["DEPTH_LEVEL"])
echo "”;
elseif($CURRENT_DEPTH>$arSection["DEPTH_LEVEL"])
echo str_repeat(“”, $CURRENT_DEPTH – $arSection["DEPTH_LEVEL"]);
$CURRENT_DEPTH = $arSection["DEPTH_LEVEL"];
?>

+ <a href="”>
()

[Ответить на комментарий]
Саня, написал:
апреля 13, 2010 в 22:30

ай, если что код в личку напишу…
заранееспасиба, а я пока новую статейку прочту

[Ответить на комментарий]
Главный Лаборант ответил на комментарий:
13 Апр 2010 в 22:53
Привет!
Если есть вопросы, то отпишись на мыло (мыло есть в сайдбаре – справа внизу).

[Ответить на комментарий]
gillmor, написал:
июля 1, 2010 в 11:59

Скрипт просто супер.
А более продвинутой версии нет. Что бы + на – менялся при открытии раздела. И еще что бы категория выделялась в которой находишься. Если есть выложите пожалуста.
Еще раз спасибо за скрипт.

[Ответить на комментарий]
Главный Лаборант ответил на комментарий:
01 июля 2010 в 13:34
Ну чтобы менялся там всего две строчки надо добавить, а насчет выделения – это просто поставить тег жирного текста на пункт меню, который активен

[Ответить на комментарий]
gillmor, написал:
июля 1, 2010 в 19:23

Спасибо что ответили. Я не разбираюсь в AJAX технологиях. Вы бы могли написать эти две строчки. А то скрипт нравится,а вот эти плюсики не в тему не меняются.

[Ответить на комментарий]
Главный Лаборант ответил на комментарий:
01 июля 2010 в 19:52
Да думаю запросто помогу
Напишите мне на email, адрес есть справа.

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

Все жду

[Ответить на комментарий]