Создание вертикального меню аккордеон на jQuery

Использование виджета аккордеон для меню

От автора: в этом уроке мы познакомимся с одним из виджетов библиотеки jQuery UI под названием Accordion (Аккордеон). Чаще всего данный виджет используется для размещения в нем некой блочной связанной информации, что-то сродни с табами. Гораздо реже можно найти использование виджета в качестве меню.

Мы с Вами попытаемся создать функциональное, вертикальное меню аккордеон с помощью одноименного виджета jQuery, которое отлично будет смотреться на сайте.

Итак, приступим…

Детали учебника «Разработка вертикального меню аккордеон на jQuery»

Тема: jQuery

Сложность: Средняя

Урок: Видео (.mp4)

Время: 01:02:57

Размер архива: 95 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

Использование виджета аккордеон в качестве меню особенно подходит для интернет-магазинов, где в меню категорий практически всегда имеются дочерние категории товаров. Именно поэтому для наших целей мы возьмем готовое меню одного из проектов — интернет-магазин по продаже мобильных телефонов.

Прежде всего определимся с версткой и стилями. Такой будет разметка меню:

<h4>- Мобильные телефоны</h4>
<ul class="nav-catalog" id="accordion">
	<li><a href="#">Alcatel</a></li>
	<li><a href="#">Ericsson</a></li>
		<h3><li><a href="#">LG</a></li></h3>
		<ul>
			<li>- <a href="#">Слайдеры</a></li>
			<li>- <a href="#">Сенсоры</a></li>
			<li>- <a href="#">Раскладушки</a></li>
			<li>- <a href="#">Моноблок</a></li>
		</ul>
	<li><a href="#">Mitsubish</a></li>
	<li><a href="#">Motorola</a></li>
	<h3><li><a href="#">HTC</a></li></h3>
		<ul>
			<li>- <a href="#">Слайдеры</a></li>
			<li>- <a href="#">Сенсоры</a></li>
			<li>- <a href="#">Раскладушки</a></li>
			<li>- <a href="#">Моноблок</a></li>
		</ul>
	<h3><li><a href="#">Samsung</a></li></h3>
		<ul>
			<li>- <a href="#">Слайдеры</a></li>
			<li>- <a href="#">Сенсоры</a></li>
			<li>- <a href="#">Раскладушки</a></li>
			<li>- <a href="#">Моноблок</a></li>
		</ul>
	<li><a href="#">NEC</a></li>
	<li><a href="#">Nokia</a></li>
	<li><a href="#">Panasonic</a></li>
	<li><a href="#">Ericsson</a></li>
</ul>

Такими будут стили меню:

*{ margin: 0; padding: 0; }

ul{list-style:none;}		

body{background:#f2f2f2;}	

.nav-catalog{
	padding:10px 10px 20px 55px;
	border-bottom:1px solid #e1e1e1;
}
.nav-catalog ul{
	padding:5px 0 0 20px;
}
.nav-catalog ul li{
	margin: 0;
}
.nav-catalog li{
	margin: 0 0 5px 0;
}
.nav-catalog h3 li{
	margin: 0 0 5px 0;
	list-style-position: outside;
}	
.nav-catalog li a{
	font:bold 14px Verdana;
	color:#000;
	text-decoration:none;
}
.nav-catalog li a:hover{
	font:bold 14px Verdana;
	color:#1b7cb1;
	text-decoration:none;
}

В итоге мы получим приблизительно следующую картину:

Использование виджета аккордеон для меню

Дочерние категории не скрыты и меню выглядит чересчур громоздко. Вот в этом и заключается идея использования виджета — подпункты должны быть изначально скрыты и открываться должны только при клике на родительской категории. Это первая из задач урока.

Для ее решения подключим виджет. С библиотекой jQuery UI мы уже работали с Вами в ряде предыдущих уроков, а потому далее лишь несколько слов без детальных пояснений. На сайте виджета идем в меню Download, выбираем для скачивания только необходимый нам виджет Accordion, при необходимости выбираем из списка тему оформления виджета или конструируем собственную тему (поскольку оформление меню у нас есть, то я выберу пункт No Theme). После этого жмем кнопку Download и получаем в архиве запрошенное.

В полученном архиве из папки js скопируем 2 файла со скриптами в каталог нашего проекта (у нас это также каталог js). Подключим эти скрипты к документу:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_accordion.js"></script>

Итак, мы подключили библиотеку jQuery и скрипт виджета. Теперь заставим работать все это. В документации к виджету Вы можете найти описание необходимой разметки, она должна быть следующей: родительские пункты должны быть по умолчанию заголовками H3, дочерние пункты должны быть размещены в блоке и все это вместе также должно быть заключено в блок.

В нашем случае текущая разметка меню также подойдет, у нас: родительские пункты являются заголовками H3, дочерние пункты помещены в список ul, который является блочным элементом, и все меню заключено также в список ul с идентификатором accordion.

Для подключения аккордеона достаточно обратиться к необходимому элементу (у нас это id=»accordion») и вызвать для него метод accordion(). Сделаем это:

$(document).ready(function(){
	$("#accordion").accordion({
	
	});
});

В итоге мы получим следующее:

Использование виджета аккордеон для меню

Теперь все подпункты скрыты и меню стало компактным. Уже лучше. По клику на родительскую категорию дочерний блок красиво выезжает. По клику на любой другой пункт меню, кроме дочернего, раскрытый дочерний блок также красиво скрывается.

Но здесь есть несколько нюансов, которые необходимо учесть, чтобы получить действительно качественное меню:

При клике на раскрытую родительскую категорию дочерний блок не сворачивается… а хотелось бы.

При обновлении страницы не запоминается состояние меню, т.е. если мы имели открытый блок, к примеру, LG, то при обновлении страницы (при переходе на новую страницу) он вновь будет скрыт… это совсем нехорошо.

Итак, давайте их исправлять. Для этого обратимся к документации виджета и воспользуемся двумя свойствами метода accordion — active и collapsible. Второе свойство решит как раз первую проблему, заставив сворачиваться дочерний блок при клике по родителю. Ну а первое свойство отвечает за то, какой блок будет открыт при инициализации аккордеона:

$(document).ready(function(){
	$("#accordion").accordion({
		active: 2,
		collapsible: true
	});
});

Итак, указав значение свойства collapsible TRUE, мы решили первую проблему. Теперь ко второй. Здесь значением свойства active мы указали 2. Это значение является индексом элемента меню, который необходимо сделать активным (раскрыть). Нумерация начинается с нулевого индекса, и участвуют в ней все недочерние элементы меню. В нашем случае Alcatel имеет индекс 0, Ericsson — 1, LG — 2 и т.д. Таким образом, при инициализации открывается пункт меню LG.

Уже неплохо, но опять же, нет запоминания состояния меню. Если теперь мы раскроем другой пункт меню, то при обновлении опять будет открыт пункт меню LG. Логично, что нам необходимо реализовать следующий алгоритм для решения вопроса:

По клику на родительский (имеющий дочерние) пункт меню мы должны получить и запомнить его индекс.

При инициализации необходимо проверить есть ли значение запомненного нами ранее индекса и, если есть, то сделать такой пункт меню активным, т.е. записать этот индекс значением свойства active.

Как записать индекс значением свойства active, мы уже знаем. Как получить индекс, мы можем найти в документации. Логично, что основная проблема заключается в том, чтобы запомнить этот индекс и не потерять его при обновлении страницы.

Здесь нам помогут куки. Для решения задачи воспользуемся плагином jquery.cookie, который Вы можете найти в сети или в дополнительных материалах к уроку. Подключаем плагин:

<script type="text/javascript" src="js/jquery.cookie.js"></script>

Использование плагина в работе крайне просто. Фактически оно включает в себя всего 3 возможных действия:

установка куки;

чтение куки;

удаление куки.

Итак, давайте создадим куку с именем, к примеру, openItem, и запишем ее значением индекс родительского пункта меню при клике по нему:

$(document).ready(function(){
	$("#accordion").accordion({
		active: 2,
		collapsible: true
	});
	$("#accordion h3").click(function(){
		$.cookie("openItem", $("#accordion").accordion("option", "active"));
	});
});

Как видите, ничего сложного. Первым параметром метода cookie является имя создаваемой куки, вторым — ее значение. Итак, мы создали куку openItem при клике на родительский пункт меню. В браузерах Chrome или Opera Вы легко можете наблюдать это, кликая по родительским пунктам меню и обновляя страницу. Замечание! В браузере Chrome скрипт будет работать только на сервере.

Кука у нас есть, но пока что она не используется нами… исправим это:

$(document).ready(function(){
	if($.cookie("openItem")){
		var openItem = parseInt($.cookie("openItem"));
	}
	$("#accordion").accordion({
		active: openItem,
		collapsible: true
	});
	$("#accordion h3").click(function(){
		$.cookie("openItem", $("#accordion").accordion("option", "active"));
	});
});

Мы проверяем перед инициализацией меню есть ли что-то в куке openItem. Если условие выполняется, то значение куки мы получаем в одноименную переменную, при этом обязательно приводя значение к числовому типу (по умолчанию тип строковый). Дело в том, что значение опции active обязательно должно быть числового типа.

Отлично! Теперь состояние меню запоминается. При обновлении страницы открытый пункт меню остается открытым. Но если теперь кликнуть по пункту без дочерних элементов — открытый пункт свернется, так и должно быть… но при обновлении он опять разворачивается. Это потому, что кука есть и никуда не пропадает. Исправим сей нюанс, удаляя куку по клику на самостоятельный пункт меню:

$(document).ready(function(){
	if($.cookie("openItem")){
		var openItem = parseInt($.cookie("openItem"));
	}
	$("#accordion").accordion({
		active: openItem,
		collapsible: true
	});
	$("#accordion h3").click(function(){
		$.cookie("openItem", $("#accordion").accordion("option", "active"));
	});
	$("#accordion li").click(function(){
		$.cookie("openItem", null);
	});
});

Вот теперь все отлично и работает практически так, как нам и хотелось… почему практически? Сейчас в меню первым пунктом идет самостоятельный пункт. Давайте сделаем первым пунктом родительский пункт, например LG.

И что мы видим? После обновления страницы пункт LG стал активным. Это при том, что значением куки мы видим false:

Использование виджета аккордеон для меню

Как же так? Если в условие приходит false, то оно не должно выполняться. На самом деле это не булево FALSE, а строка. Поэтому, чтобы все работало, немного допишем условие и заодно создадим изначально переменную openItem с каким-либо значением, отличным от натурального числа и нуля:

$(document).ready(function(){
	var openItem = false;
	if($.cookie("openItem") && $.cookie("openItem") != 'false'){
		var openItem = parseInt($.cookie("openItem"));
	}
	$("#accordion").accordion({
		active: openItem,
		collapsible: true
	});
	$("#accordion h3").click(function(){
		$.cookie("openItem", $("#accordion").accordion("option", "active"));
	});
	$("#accordion li").click(function(){
		$.cookie("openItem", null);
	});
});

Теперь осталось решить несколько последних нюансов. Попробуйте сейчас кликнуть по дочернему элементу. После клика по нему кука удаляется, соответственно, состояние меню не запоминается. Происходит так потому, что дочерние элементы являются также элементами списка, как и самостоятельные пункты меню. Давайте немного изменим отбор элементов, для которых будем отслеживать событие клика. Выберем только прямых потомков блока с идентификатором accordion:

$(document).ready(function(){
	var openItem = false;
	if($.cookie("openItem") && $.cookie("openItem") != 'false'){
		var openItem = parseInt($.cookie("openItem"));
	}
	$("#accordion").accordion({
		active: openItem,
		collapsible: true
	});
	$("#accordion h3").click(function(){
		$.cookie("openItem", $("#accordion").accordion("option", "active"));
	});
	$("#accordion > li").click(function(){
		$.cookie("openItem", null);
	});
});

Вот теперь кука удаляется только при клике по самостоятельным пунктам меню.
Следующим своеобразным багом, который необходимо исправить, является то, что при клике по самостоятельному пункту меню не происходит переход по его ссылке. Это потому, что скрипт виджета блокирует дефолтное поведение ссылки.

Решить эту проблему можно следующим образом – получим ссылку элемента, по которому был клик, и воспользуемся объектом window.location для перехода по этой ссылке:

$(document).ready(function(){
	var openItem = false;
	if($.cookie("openItem") && $.cookie("openItem") != 'false'){
		var openItem = parseInt($.cookie("openItem"));
	}
	$("#accordion").accordion({
		active: openItem,
		collapsible: true
	});
	$("#accordion h3").click(function(){
		$.cookie("openItem", $("#accordion").accordion("option", "active"));
	});
	$("#accordion > li").click(function(){
		$.cookie("openItem", null);
var link = $(this).find('a').attr('href');
		window.location = link;
	});
});

И, наконец, добавим еще пару опций в метод accordion():

$(document).ready(function(){
	var openItem = false;
	if($.cookie("openItem") && $.cookie("openItem") != 'false'){
		var openItem = parseInt($.cookie("openItem"));
	}
	$("#accordion").accordion({
		active: openItem,
		collapsible: true,
header: 'h3',
		autoHeight: false
	});
	$("#accordion h3").click(function(){
		$.cookie("openItem", $("#accordion").accordion("option", "active"));
	});
	$("#accordion > li").click(function(){
		$.cookie("openItem", null);
var link = $(this).find('a').attr('href');
		window.location = link;
	});
});

Опция header позволяет явно указать на элемент, который будет заголовком секций. Эту опцию мы указали для решения возможных проблем с IE, в 7-ой версии которого я наблюдал проблемы с аккордеоном. После указания этой опции, проблемы решились.

Вторая опция – autoHeigth со значением false – позволяет решить проблему с высотой открывающихся блоков. По умолчанию значение этой опции выставлено в true, что задает одинаковую высоту для всех скрытых блоков. Значение высоты берется из расчета максимальной высоты блока, т.е. если у одного блока, к примеру, будет 5 пунктов и высота 100 пикселей, то второй блок со всего 1 пунктом будет также иметь высоту 100 пикселей. Появится пустое место у второго блока, что не очень хорошо.

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

На этом урок закончен. Удачи Вам и до новых встреч!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (98)

  1. Dmitry

    Спасибо! Это очень нужный и полезный материал. Отдельное спасибо, за то, что вы уделили внимание «нашему всеми любимому IE». Скоро воспользуюсь полученными знаниями в одном из библиотечных Web-проектов.
    P.S. Так сложилось, что я работаю программистом в одной из крупных московских библиотек :-)

  2. Евгений

    Очень интерсный урок.
    Вот только у меня ни на joomla 1.5, ни на joomla 2.5.6 не работает.
    Сначала все хорошо. Но после следующего шага после прописывания метода collapsible: true, этот метод перестает работать. Не подскажете в чем может быть дело?

    • Андрей Кудлай

      Перестает работать само меню или не работает что-то конкретно?
      Надо смотреть код. На практике с подобной проблемой не сталкивался.

      • Евгений

        могу прислать файл с кодом, который я написал в процессе прослушивания урока. А сайт — тестовый интернет-магазина на джумле 1.5 virtuemart 1.1.9 — test.taina-vostoka.ru. На левом sidebar меню категории. Power Tool разворачиваемый пункт — не сворачивается ни при клике на него, ни на другие пункты.

        • Андрей Кудлай

          Присылать не нужно. Подобные вопросы лучше решать на нашем форуме — там можно и код выкладывать.
          По проблеме — у Вас в коде пропущена закрывающая кавычка в строке if($.cookie(«openItem)… — здесь имя куки без закрывающей кавычки.

          • Евгений

            Спасибо большое. поправил. все заработало. Отличный урок!

          • Андрей Кудлай

            Пожалуйста ;)

  3. Шляков Константин

    Добрый день! Не скачивается файл accordion.zip
    Запуск… и тишина…

    • Андрей Кудлай

      Добрый день.
      Только что попробовал — все качается. Попробуйте скачать другим браузером или воспользуйтесь менеджером загрузок — типа Download Manager.

  4. Шляков Константин

    Спасибо! Файл скачал. спасибо за Вашу просветительскую работу!

  5. Андрей

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

    • Андрей Кудлай

      Добрый день.
      Как вариант, можно использовать некий флаг (переменная, константа). Например, на страницах, где должно поддерживаться открытое состояние, установить этот флаг. Ну а дальше просто проверять есть ли такой флаг, если есть — значит открываем меню, иначе — нет.
      Это общий алгоритм. Дальше нужно пробовать насколько он реализуем.
      Вообще, такие вопросы лучше задавать на нашем форуме, там их решать гораздо проще.

  6. Стас

    Помогите разобраться!
    Установил меню аккордеон, все работает!
    Но!!! Вложенные пункты меню активны только тогда, когда на текст наводишь курсор!
    Я бы хотел сделать так, что бы ссылка меню стала активна при наведении на пустое место пункта меню (то есть справа). Правильней будет сказать при наведении на div ссылки.

    Обратите внимание! Родительский пункт меню (скажем самый первый) имеет такую фунцию — не обязательно наводить курсор прямо на текст…. а вот вложенные пункты меню так не работают — нужно курсором тыкать именно на текст.

    Помогите пожалуйста, я не могу разобраться как решается эта задача….

    • Андрей Кудлай

      Я тоже вряд ли смогу разобраться без конкретики. Что значит «пустое место меню»? Или что подразумевается под «div ссылки»?
      В любом случае, в комментариях к уроку вопросы, связанные с кодом, не решаются. В комментариях можно только описать алгоритм. Все вопросы, предполагающие наличие кода, решаются на нашем форуме.
      Создайте тему на форуме, выложите свои наработки кода и, возможно, кто-то подскажет как решить задачу.

    • Евгений Л.

      Если не ошибаюсь, здесь вам нужно было просто сделать блочное отображение ссылок в CSS-стилях. И всё!

  7. Стас

    Проверьте пожалуйста мэил contact@webformyself.com, я прислал скрин проблемы… помогите! может всего одна строчка кода, а я уже 4 часа не могу разобраться…

  8. Костя

    Здравствуйте! спасибо за урок!
    У меня проблемка с cookie. Дело в том что у меня стоит рейтинг со звездами, где голосование ограниченно куками!
    меню везде работает превосходно но только когда переходишь на страницу где можно проголосовать рейтингом, все меню раскрывается, помогите пожалуйста разобратся я пробывал не получается!

    • Андрей Кудлай

      Здравствуйте.
      Подскажите, как я могу Вам помочь дистанционно? :)
      У нас есть форум, создайте там тему, дайте ссылку на сайт и только тогда можно будет что-то подсказать.

      • Костя

        Андрей Кудлай спасибо!
        Но дистанционно не получится пишу сайт с нуля используя Денвер.
        У меня получается 2 скрипта с «jquery.cookie.js» пытался их объеденить не получается, именна переписывал тоже не получается.
        Я в JQuery и JavaScript мало что понимаю, но думаю что придется отказатся либо от меню либо от рейтинга, насколько я понимаю вместе они не хотят работать.
        И если я правильно понимаю на сайте должен быть 1 файл «jquery.cookie.js»!
        Большое вам спасибо!
        Сейчас создам тему на форуме, может другим тоже пригодится!

        • Андрей Кудлай

          Нет, объединять их, конечно же, не нужно. Скорее всего, это один и тот же файл, поэтому пробуйте подключить его только один раз.

          • Костя

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

          • Андрей Кудлай

            Повторюсь — попробуйте подключить плагин для работы с куками только один раз… любой из плагинов — тот, который для голосования, или который для меню.

  9. Костя

    Нет не работает.
    Спасибо за вашу помощь будем пробывать исправлять ошибки, гугл мне в помощь!
    P.S. Спасибо за ваш сайт, он очень полезный!

  10. Костя

    Андрей Кудлай, решил свою проблему!!!
    Дело было в том что я 2 раза подключил JQuery, исправил и все прекрассно работает!

  11. Евгений

    Извините, но я внесу немного критики! Зачем в список меню добавлять Н3? Список должен быть списком, без лишних тегов, тем более заголовков… По-этому думаю, что нужно убирать Н3 и просто делать проверку на существование внутри li списка ul. Примерно так
    $(«#accordion li»).click(function(){
    if($(this).find(‘ul’)) {
    $.cookie(«openItem», $(«#menu-pravoe-menyu»).accordion(«option», «active»));
    }
    else {
    $.cookie(«openItem», null);
    var link = $(this).find(‘a’).attr(‘href’);
    window.location = link;
    }
    });

  12. Сергей

    Здравствуйте! спасибо за представленный урок!
    Все доходчиво и понятно. Теперь пытаюсь применить это к Joomla 2.5.
    Из коментариев вижу, что это возможно, но как, я сообразить не могу.
    в форуме об этом тоже не обсуждается. Подскажите куда копать?
    Спасибо. Сергей.

    • Андрей Кудлай

      Здравствуйте.
      Ну так создайте тему на форуме и тем самым инициируете возможное обсуждение :)

  13. Илья

    Спасибо за урок, оказался полезным и познавательным. Все работает как часы только есть 1 недочет. При клике на пункт категорий появляется рамка, рамка в каждом браузере своя, в стилях ее нету. Как исправить проблему пожалуйста подскажите.

    • Андрей Кудлай

      Пожалуйста.
      В уроке никакой рамки не видно :) Но если она есть у Вас, тогда можно воспользоваться сбросом стилей либо же обнулить ее для конкретного элемента, воспользовавшись Firebug’ом.
      Если возникнут дополнительные вопросы, связанные с кодом — милости просим на наш форум.

  14. Максим

    Добрый день. Немного критики. В вашем уроки есть ошибки в разметке.
    1) В тег UL можно вкладывать только тег LI.
    2) Тег LI может быть вложен исключительно в UL или OL
    (у вас есть такая строчка HTC — это ошибка)
    3) Тег UL также нельзя вкладывать в тег UL

    • Андрей Кудлай

      Добрый день.
      Ну, если так важна валидируемость, то никто не мешает создать собственную разметку ;)

  15. Anvarich

    Здравствуйте Андрей! Отличный урок, как раз то что мне нужно излазил почти весь интернет:) искал решение нашел у Вас… Только вот проблема, не могу скачать исходники… Помогите пожалуйста…

    • Андрей Кудлай

      Здравствуйте.
      Странно, только что проверил — исходники на месте.

      • Вероника

        Андрей, у меня похожая проблема — при попытке открыть папку с исходниками получаю сообщение, что открыть ее невозможно, т.к. папка пуста. С исходниками с Яндекс.Диск та же песня. Помогите, пожалуйста.

        • Андрей Кудлай

          Вероника, даже и не знаю, как именно вам помочь… только что проверил — и исходники к уроку, и с Яндекс.Диска успешно скачиваются и распаковываются. Ну, можете предложить свой вариант, как именно я могу помочь в этой ситуации… как вариант, можете создать тему на форуме, дать мне доступ к вашему компьютеру через TeamViewer — я попробую сам посмотреть, почему у вас не получается.

          • Вероника

            Андрей, спасибо Вам за Вашу отзывчивость и оперативность. Я нашла нужные мне файлы на Вашем диске по созданию интернет-магазина. По рассеянности забыла о допматериалах. Простите за беспокойство.

          • Андрей Кудлай

            Ничего страшного, Вероника. Пожалуйста ;)

  16. Anvarich

    Спасибо огромное!!! Пришли на зов помощи очень быстро!!! Еще раз огромное Вам спасибо!!! Теперь главное что бы мои кривые руки смогли все допилить)))

    • Андрей Кудлай

      Пожалуйста.
      Кстати, рекомендую посмотреть также аккордеон из урока Каталог товаров. Вывод категорий. Там скрипт аккордеона гораздо более функциональный и намного проще в установке.

      • Anvarich

        Спасибо Андрей! Я посмотрел урок, если честно… я вообще незнаю php, js. Делаю сайты на Modx evo, там можно обойтись знанием php использовать готовые решения из просторов интернета…
        Ну как бы учится приходится походу…
        Андрей почему то у меня не хочет ни как работать меню, мне кажется у меня проблемы с подключением, вот и код подключения
        Все остальное работает исправно это слайд, fancybox.

        • Андрей Кудлай

          Создайте тему на форуме, дайте ссылку на сайт и как будет время попробую глянуть.

  17. Евгения

    Здравствуйте. Спасибо Вам большое за урок и за Ваш труд!
    Но, возник вопрос. Во всех браузерах всё прекрасно работает.
    Только в Опере появляется нежелательный отступ в 20px у родительских категорий.
    Нигде он не прописан, подключен сброс стилей от Эрика Мейера.
    С чем это может быть связано?
    Спасибо.

    • Андрей Кудлай

      Здравствуйте, Евгения.
      Посмотрел в Опере 18.0, смотрится все нормально. Попробуйте посмотреть в Firebug что это за отступ и откуда он берется. Если разобраться не получится, тогда создайте тему на форуме, приложите архив и скриншоты (желательно с Firebug’om), на которых видно проблему, а также укажите версию Оперы. Вообще, рекомендую использовать аккордеон из урока Каталог товаров. Вывод категорий. Он более прост в установке, использовании, более гибок и более корректно работает.

      • Евгения

        Спасибо за быстрый ответ.
        В Firebug не нашла я этого отступа.
        Установив Оперу 19.0 этих отступов не обнаружила.
        Изначально была установлена Опера 12.16, может поэтому и была такая «ошибочка».

        • Андрей Кудлай

          Пожалуйста)
          Возможно. В Опере 12.16 я не тестировал, но, думаю, там достаточно было сбросить отступы для вложенного списка.

  18. Сергей

    У Вас в разметке списка невалидная неверная разметка! Я делаю на своей верной разметке и ничего не выходит

    • Андрей Кудлай

      Это урок, а не готовое решение. Если Вы усвоите материал урока, то не должно составить труда сделать аккордеон с валидной версткой.

      • Сергей

        Там грубейшее нарушение html!!! Урок я так и не усвоил) Буду спрашивать) Точнее у меня заработало все с вашей разметкой)

        • Андрей Кудлай

          Вы не совсем точны в определении. Ошибка HTML и невалидный код — это разные вещи. Если допущена ошибка в верстке, тогда код, в большинстве случаев, попросту работать не будет… невалидный же код может работать абсолютно без проблем. Не хочу открывать дискуссию, которая происходила уже не раз, но в сети, пожалуй, процентов 90 невалидных сайтов… ходить далеко не нужно: проверьте на валидность Гугл и Яндекс)

          • Сергей

            Так Вы поняли про какую неточность в разметке я говорю?

          • Андрей Кудлай

            Да, конечно)
            Кстати, можете посмотреть урок Каталог товаров. Вывод категорий, в котором также строится меню-аккордеон. В итоге меню получается и кроссбраузерным и многоуровневым.

  19. Александр

    Здравствуйте!
    Мне нужно, чтобы при клике на категорию работала ссылка(как и на подкатегорию). Нашел в файле jquery_accordion.js функцию, которая отменяет стандартное поведение ссылки, удалил ее. Все стало как мне нужно, но анимация при клике на категорию работает рывками (впечатления, что тормозит комп).
    Вернул все обратно, прописал в рабочем файле .js обработчик события клик
    var link = $(this).find(‘a’).attr(‘href’);
    window.location = link;
    результат тот же. Может подскажете, в чем проблема

    • Андрей Кудлай

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

    • Николай

      Добрый день!

      У меня та же проблема. Если вы решили вопрос чтобы при клике на категорию работала ссылка(как и на подкатегорию), то пожалуйста подскажите как сделать?

  20. Александр

    У меня почему-то скрипт перестает работать после добавления проверки есть ли что-то в куке openItem. Когда прописываю if ($.cookie(«openItem»)). Полностью код копировал последний тоже не работает.

  21. Михаил

    Попробую заменить «дерево» на моём хобби. Урок неплохой. Смотрю также «Интернет-магазин под ключ».

  22. Надежда

    Добрый день, Андрей.
    Смотрю ваше видео по разработке интернет-магазина. В данный момент сложности с «прикручиванием» меню аккордеона к интернет-магазину. В видео вы показываете, что прицепили скрипты в header.php jquery-ui-1.8.22.custom.min.js и jquery1.7.2.min.js. В скачиваемом материале таких скриптов нет(не на диске с видео, ни тут). В общем, буду признательна, если объясните или пришлете файлы мне на e-mail, которые поменялись в результате «прикручивания» аккордеона(особенно header.php и leftbar.php), сама попробую разобраться.

  23. Татьяна

    Спасибо за урок.))

  24. Anar

    здравствуйте у меня вопрос : все получилось с аккордеоном все открываеца\закрываеца. только одно но! категории без вложенных списков отображаются чуть ближе к левому краю, как если бы у них padding был меньше чем у тех, в которых есть подкатегории. не знаете как это исправить?

    • Андрей Кудлай

      Здравствуйте. Создайте тему на нашем форуме, выложите Ваш код, чтобы его можно было посмотреть, тогда можно будет попробовать что-то подсказать.

  25. Anar

    проверил в других браузерах все ровно, только в опере, получаеца так, как я вчера написал.

  26. Юрий

    Здравствуйте, отличный урок и отличный код, но увы столкнулся с одной проблемой
    http://rghost.ru/8vVHjt4f4.view
    А именно выделение кнопки при нажатии на нее, можно ли это как то пофиксить данную фичу?
    Заранее спасибо

    • Юрий

      //дополнение
      И да можно ли сделать под разделы в разделах?
      Ну если точнее, сделать что бы они сворачивались?
      http://kaon.rghost.net/6xdBfFLrC.view — пример подраздела.
      Заранее спасибо

      • Андрей Кудлай

        Здравствуйте.
        Посмотрите этот урок, в нем можно практически автоматом сделать многоуровневое меню.

        • Юрий

          А что касательно рамки? «синенькой»

          • Андрей Кудлай

            Проблемы, связанные со стилевым оформлением, решаются через стили. Вашу проблему я вижу только на картинке. Чем она вызвана — по картинке не понять, для этого нужен «живой» код, но причина ее, судя по всему, в стилях.

        • Юрий

          http://pion.rghost.net/6fX5YKBBL
          Вот данная проблема в вашем видео гайде, в момент проверки в разных браузерах, при открытии вкладки LG образуется некая рамка, интересует, как ее убрать.

          • Андрей Кудлай

            Я ведь уже ответил, что по картинкам проблемы не решаются, нужен код, а Вы мне снова картинку показываете))
            Убирается она через стили, как я уже и отмечал выше. Эта рамка — это внешняя граница (outline), которая добавляется на фокус элемента (в данном случае h3), это можно увидеть, открыв инструменты разработчика. Соответственно, для h3 при фокусе просто уберите эту рамку:
            h3:focus{
            outline: none;
            }

  27. Вячеслав

    Спасибо Вам, Андрей, за великолепные уроки! Без них как без рук.
    И классный котёнок на аваторке, я обожаю!
    Спасибо!

  28. greg

    Здравствуйте!
    Подскажите пожалуйста, как сделать, чтобы при клике на категорию страница не перепрыгивала в начало, а оставалась на месте относительно меню аккордеона той кнопки на которую кликал?
    Сайт для примера beltig.ru
    Кстати делал полностью по Вашим урокам. Спасибо Вам огромное за такие полезные упражнения!

  29. Игорь

    Здравствуйте!
    Как сделать так, чтобы последнее меню отмечалась другим цветом как активная?
    В интернете все задают этот вопрос.

    • Андрей Кудлай

      Здравствуйте.
      Уточните, что именно значит «последнее меню»? Последний пункт меню или на странице используется несколько меню. Лучше всего задать вопрос на нашем форуме, чтобы можно было показать код и задать вопрос на конкретном примере.

      • Игорь

        Спасибо за ответ. Я имею ввиду последняя категория, которая уже показывает товары. Вот она не подсвечивается как активная.((((

        • Андрей Кудлай

          При переходе к выбранной категории (это может быть любая, не только последняя) сравниваете адрес выбранной категории с адресами в меню. При совпадении присваиваете нужной категории класс active, а в стилях для класса active задаете необходимые правила. Как-то так. Если нужен вариант кода, то его также без проблем можно найти. Например, по запросу в Гугле как выделить активный пункт меню первый же вариант с форума javascript.ru подходит.
          К слову, посмотрите этот урок. В нем найдете лучший вариант такого меню и задача с выделением активного пункта меню уже решена.

          • Игорь

            Благодарю за ответ!
            Но я приделал вот этот аккордеон. =>http://www.designchemical.com/lab/jquery-vertical-accordion-menu-plugin/examples/#

            И вот в неё последняя ссылка не активна. Не могу найти решение. Пытаюсь.

          • Андрей Кудлай

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

          • Игорь

            Я использую неограниченное количество подкатегорий и поэтому путь $(‘#active_menu > ul > li >a’).each(function ()
            постоянно меняется. И как вот тут сделать универсальным я не знаю.

          • Игорь

            Вот ссылка на страницу secrets-lan.ru
            там я тестирую аккордеон и можно заметить, что последний пункт меню не выделяется активным.
            Помогите, пожалуйста, прописать верный код.
            Спасибо!

          • Андрей Кудлай

            Игорь, Вы упорно не хотите общаться на форуме :)
            Чтобы подсветить последний активный пункт меню, укажите следующее правило:
            .graphite ul li a.active {background: #232323;}

          • Игорь

            Кстати, когда установлено autoClose : true, то активный пункт не сохраняется, работает как нужно. Но как только ставишь false, чтобы меню не закрывалось при раскрытии другого меню, так любой активный пункт сохраняет активность.

            Вот опять сижу думаю ничего не выходит.

  30. Игорь

    Спасибо Вам за ответ! Я так сделал. Вставил стиль. И всё заработало… Но.. У меня аккордеон должен работать так: при открытии одного меню другое не закрывается.
    Так вот так отмечается каждая посещённая ссылка и не сбрасывается её значение. Вы можете сейчас посмотреть там на сайте у меня.
    Что я только уже не делал! Не сбрасывается значение и всё тут!

    Помогите, прошу Вас. Весь интернет уже перелопатил. Ничего нет!

    Что касается форума, то я не знаю на какой форум мне написать. Я хочу у Вас тут спросить. Совсем нет возможности быть на форумах.
    Помогите с решением.
    Спасибо

    • Андрей Кудлай

      Наш форум — http://webformyself.com/forum/
      Выложите ссылку на архив с меню, я посмотрю, что можно сделать.

      • Игорь

        Спасибо Вам! Изучу Ваш форум обязательно. Я посмотрел так много интересного.
        Но позвольте очень Вас прошу выложить сейчас ссылку на архив. Вот она :https://yadi.sk/d/-A_zP83RrUFkZ

        Помогите, очень Вас прошу!
        Заранее спасибо!

        • Андрей Кудлай

          > У меня аккордеон должен работать так: при открытии одного меню другое не закрывается.
          Увидел. К сожалению, с опцией autoClose: false вряд ли получится реализовать задуманное, поскольку в этом случае для открытых ссылок плагин устанавливает класс active, к которому мы и пытаемся привязаться. Установите опцию autoClose: true, в противном случае придется только лезть в код плагина, чтобы попытаться реализовать задуманное.

          • Игорь

            Вот и я нигде не нашёл решения.
            Андрей, если Вас не затруднит, может Вы сможете поправить код плагина. Напишите мне сюда, очень Вас прошу. Такой аккордеон и так загублен его авторами.
            Если найдёте решение, напишите мне, пожалуйста, я всю жизнь буду Вас благодарить.

          • Андрей Кудлай

            Если получится найти — напишу.

          • Игорь

            Ой, спасибо Вам в любом случае!!!
            Если получится найти, то бесценны Ваши вдвойне знания, потому что нет ответа на этот вопрос в интернете. Никто не знает и не может. Давно уже ищу и сам думаю.
            Спасибо!

  31. Игорь

    Что интересно, больше нет нигде подобных аккордеонов. И без метки он теряет полностью смысл. очень на Вас надеюсь, что сможете найти решение. Больше некому из всей сети.

  32. Николай

    Здравствуйте, подскажите если H3 поменять на li то в js что нужно поменять чтобы аккордеон нормально заработал?

    • Андрей Кудлай

      Здравствуйте, Николай.
      Этот урок уже устарел. Рекомендую использовать плагин из данного урока для построения аккордеона. Здесь код будет валидным и меню будет строиться фактически автоматически.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree