От автора: в этом уроке мы познакомимся с одним из виджетов библиотеки jQuery UI под названием Accordion (Аккордеон). Чаще всего данный виджет используется для размещения в нем некой блочной связанной информации, что-то сродни с табами. Гораздо реже можно найти использование виджета в качестве меню.
Мы с Вами попытаемся создать функциональное, вертикальное меню аккордеон с помощью одноименного виджета jQuery, которое отлично будет смотреться на сайте.
Итак, приступим…
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курсИспользование виджета аккордеон в качестве меню особенно подходит для интернет-магазинов, где в меню категорий практически всегда имеются дочерние категории товаров. Именно поэтому для наших целей мы возьмем готовое меню одного из проектов — интернет-магазин по продаже мобильных телефонов.
Прежде всего определимся с версткой и стилями. Такой будет разметка меню:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <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> |
Такими будут стили меню:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | *{ 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). Подключим эти скрипты к документу:
| 1 2 | <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(). Сделаем это:
| 1 2 3 4 5 | $(document).ready(function(){ $("#accordion").accordion({ }); }); |
В итоге мы получим следующее:
Теперь все подпункты скрыты и меню стало компактным. Уже лучше. По клику на родительскую категорию дочерний блок красиво выезжает. По клику на любой другой пункт меню, кроме дочернего, раскрытый дочерний блок также красиво скрывается.
Но здесь есть несколько нюансов, которые необходимо учесть, чтобы получить действительно качественное меню:
При клике на раскрытую родительскую категорию дочерний блок не сворачивается… а хотелось бы.
При обновлении страницы не запоминается состояние меню, т.е. если мы имели открытый блок, к примеру, LG, то при обновлении страницы (при переходе на новую страницу) он вновь будет скрыт… это совсем нехорошо.
Итак, давайте их исправлять. Для этого обратимся к документации виджета и воспользуемся двумя свойствами метода accordion — active и collapsible. Второе свойство решит как раз первую проблему, заставив сворачиваться дочерний блок при клике по родителю. Ну а первое свойство отвечает за то, какой блок будет открыт при инициализации аккордеона:
| 1 2 3 4 5 6 | $(document).ready(function(){ $("#accordion").accordion({ active: 2, collapsible: true }); }); |
Итак, указав значение свойства collapsible TRUE, мы решили первую проблему. Теперь ко второй. Здесь значением свойства active мы указали 2. Это значение является индексом элемента меню, который необходимо сделать активным (раскрыть). Нумерация начинается с нулевого индекса, и участвуют в ней все недочерние элементы меню. В нашем случае Alcatel имеет индекс 0, Ericsson — 1, LG — 2 и т.д. Таким образом, при инициализации открывается пункт меню LG.
Уже неплохо, но опять же, нет запоминания состояния меню. Если теперь мы раскроем другой пункт меню, то при обновлении опять будет открыт пункт меню LG. Логично, что нам необходимо реализовать следующий алгоритм для решения вопроса:
По клику на родительский (имеющий дочерние) пункт меню мы должны получить и запомнить его индекс.
При инициализации необходимо проверить есть ли значение запомненного нами ранее индекса и, если есть, то сделать такой пункт меню активным, т.е. записать этот индекс значением свойства active.
Как записать индекс значением свойства active, мы уже знаем. Как получить индекс, мы можем найти в документации. Логично, что основная проблема заключается в том, чтобы запомнить этот индекс и не потерять его при обновлении страницы.
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курсЗдесь нам помогут куки. Для решения задачи воспользуемся плагином jquery.cookie, который Вы можете найти в сети или в дополнительных материалах к уроку. Подключаем плагин:
| 1 | <script type="text/javascript" src="js/jquery.cookie.js"></script> |
Использование плагина в работе крайне просто. Фактически оно включает в себя всего 3 возможных действия:
установка куки;
чтение куки;
удаление куки.
Итак, давайте создадим куку с именем, к примеру, openItem, и запишем ее значением индекс родительского пункта меню при клике по нему:
| 1 2 3 4 5 6 7 8 9 | $(document).ready(function(){ $("#accordion").accordion({ active: 2, collapsible: true }); $("#accordion h3").click(function(){ $.cookie("openItem", $("#accordion").accordion("option", "active")); }); }); |
Как видите, ничего сложного. Первым параметром метода cookie является имя создаваемой куки, вторым — ее значение. Итак, мы создали куку openItem при клике на родительский пункт меню. В браузерах Chrome или Opera Вы легко можете наблюдать это, кликая по родительским пунктам меню и обновляя страницу. Замечание! В браузере Chrome скрипт будет работать только на сервере.
Кука у нас есть, но пока что она не используется нами… исправим это:
| 1 2 3 4 5 6 7 8 9 10 11 12 | $(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 обязательно должно быть числового типа.
Отлично! Теперь состояние меню запоминается. При обновлении страницы открытый пункт меню остается открытым. Но если теперь кликнуть по пункту без дочерних элементов — открытый пункт свернется, так и должно быть… но при обновлении он опять разворачивается. Это потому, что кука есть и никуда не пропадает. Исправим сей нюанс, удаляя куку по клику на самостоятельный пункт меню:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(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 с каким-либо значением, отличным от натурального числа и нуля:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(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 для перехода по этой ссылке:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $(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():
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(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 пикселей. Появится пустое место у второго блока, что не очень хорошо.
Вот теперь действительно все. Наше вертикальное меню аккордеон, работает так, как и было задумано. В итоге мы получили меню, которое идеально подойдет для категорий интернет-магазина или просто для сайта, где есть разделы с подкатегориями. При этом наше меню еще и «умеет» запоминать свое состояние.
На этом урок закончен. Удачи Вам и до новых встреч!
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Хотите узнать, что необходимо для создания сайта?
Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!
Смотреть видео
Спасибо! Это очень нужный и полезный материал. Отдельное спасибо, за то, что вы уделили внимание «нашему всеми любимому IE». Скоро воспользуюсь полученными знаниями в одном из библиотечных Web-проектов.
P.S. Так сложилось, что я работаю программистом в одной из крупных московских библиотек
Пожалуйста
Очень интерсный урок.
Вот только у меня ни на 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)… — здесь имя куки без закрывающей кавычки.
Спасибо большое. поправил. все заработало. Отличный урок!
Пожалуйста
Добрый день! Не скачивается файл accordion.zip
Запуск… и тишина…
Добрый день.
Только что попробовал — все качается. Попробуйте скачать другим браузером или воспользуйтесь менеджером загрузок — типа Download Manager.
Спасибо! Файл скачал. спасибо за Вашу просветительскую работу!
Пожалуйста)
Добрый день! во-первых спасибо за урок, сделал по вашему примеру меню, использую для магазина на виртуемарт, главное что я нашел у вас, и не мог найти перепробывал масу вариантов, то чтобы при нажатии на пункт меню, дочерний блок аккардеона не сворачивался, но есть один ньюанс который неустраевает, когда при раскрытом меню, находясь например на странице товара, перейти в раздел контакты, или другой раздел не магазина, меню остается раскрытым на последем товаре куда заходили, тоесть нужно чтобы меню работало только на страницах магазина, а на разделах джумлы было свернутым, помогите пожалуйста исправить, очень нужно
Добрый день.
Как вариант, можно использовать некий флаг (переменная, константа). Например, на страницах, где должно поддерживаться открытое состояние, установить этот флаг. Ну а дальше просто проверять есть ли такой флаг, если есть — значит открываем меню, иначе — нет.
Это общий алгоритм. Дальше нужно пробовать насколько он реализуем.
Вообще, такие вопросы лучше задавать на нашем , там их решать гораздо проще.
Помогите разобраться!
Установил меню аккордеон, все работает!
Но!!! Вложенные пункты меню активны только тогда, когда на текст наводишь курсор!
Я бы хотел сделать так, что бы ссылка меню стала активна при наведении на пустое место пункта меню (то есть справа). Правильней будет сказать при наведении на div ссылки.
Обратите внимание! Родительский пункт меню (скажем самый первый) имеет такую фунцию — не обязательно наводить курсор прямо на текст…. а вот вложенные пункты меню так не работают — нужно курсором тыкать именно на текст.
Помогите пожалуйста, я не могу разобраться как решается эта задача….
Я тоже вряд ли смогу разобраться без конкретики. Что значит «пустое место меню»? Или что подразумевается под «div ссылки»?
В любом случае, в комментариях к уроку вопросы, связанные с кодом, не решаются. В комментариях можно только описать алгоритм. Все вопросы, предполагающие наличие кода, решаются на нашем .
Создайте тему на форуме, выложите свои наработки кода и, возможно, кто-то подскажет как решить задачу.
Если не ошибаюсь, здесь вам нужно было просто сделать блочное отображение ссылок в CSS-стилях. И всё!
Проверьте пожалуйста мэил , я прислал скрин проблемы… помогите! может всего одна строчка кода, а я уже 4 часа не могу разобраться…
Почту проверили, однако с данными вопросами Вам нужно обратиться на наш форум:
Здравствуйте! спасибо за урок!
У меня проблемка с cookie. Дело в том что у меня стоит рейтинг со звездами, где голосование ограниченно куками!
меню везде работает превосходно но только когда переходишь на страницу где можно проголосовать рейтингом, все меню раскрывается, помогите пожалуйста разобратся я пробывал не получается!
Здравствуйте.
Подскажите, как я могу Вам помочь дистанционно?
У нас есть , создайте там тему, дайте ссылку на сайт и только тогда можно будет что-то подсказать.
Андрей Кудлай спасибо!
Но дистанционно не получится пишу сайт с нуля используя Денвер.
У меня получается 2 скрипта с «jquery.cookie.js» пытался их объеденить не получается, именна переписывал тоже не получается.
Я в JQuery и JavaScript мало что понимаю, но думаю что придется отказатся либо от меню либо от рейтинга, насколько я понимаю вместе они не хотят работать.
И если я правильно понимаю на сайте должен быть 1 файл «jquery.cookie.js»!
Большое вам спасибо!
Сейчас создам тему на форуме, может другим тоже пригодится!
Нет, объединять их, конечно же, не нужно. Скорее всего, это один и тот же файл, поэтому пробуйте подключить его только один раз.
Они разные.
Я в прописал куки меню,
а когда голосовать можно только тогда подтягивается скрипт куки голосования и в этот же момент перестает работать меню, а в других местах меню прекрассно работает!
Повторюсь — попробуйте подключить плагин для работы с куками только один раз… любой из плагинов — тот, который для голосования, или который для меню.
Нет не работает.
Спасибо за вашу помощь будем пробывать исправлять ошибки, гугл мне в помощь!
P.S. Спасибо за ваш сайт, он очень полезный!
Андрей Кудлай, решил свою проблему!!!
Дело было в том что я 2 раза подключил JQuery, исправил и все прекрассно работает!
Извините, но я внесу немного критики! Зачем в список меню добавлять Н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;
}
});
#menu-pravoe-menyu это забыл поменять на #accordion
Здравствуйте! спасибо за представленный урок!
Все доходчиво и понятно. Теперь пытаюсь применить это к Joomla 2.5.
Из коментариев вижу, что это возможно, но как, я сообразить не могу.
в форуме об этом тоже не обсуждается. Подскажите куда копать?
Спасибо. Сергей.
Здравствуйте.
Ну так создайте тему на форуме и тем самым инициируете возможное обсуждение
Спасибо за урок, оказался полезным и познавательным. Все работает как часы только есть 1 недочет. При клике на пункт категорий появляется рамка, рамка в каждом браузере своя, в стилях ее нету. Как исправить проблему пожалуйста подскажите.
Пожалуйста.
Но если она есть у Вас, тогда можно воспользоваться сбросом стилей либо же обнулить ее для конкретного элемента, воспользовавшись Firebug’ом.
В уроке никакой рамки не видно
Если возникнут дополнительные вопросы, связанные с кодом — милости просим на наш .
Добрый день. Немного критики. В вашем уроки есть ошибки в разметке.
1) В тег UL можно вкладывать только тег LI.
2) Тег LI может быть вложен исключительно в UL или OL
(у вас есть такая строчка HTC — это ошибка)
3) Тег UL также нельзя вкладывать в тег UL
Добрый день.
Ну, если так важна валидируемость, то никто не мешает создать собственную разметку
Здравствуйте Андрей! Отличный урок, как раз то что мне нужно излазил почти весь интернет:) искал решение нашел у Вас… Только вот проблема, не могу скачать исходники… Помогите пожалуйста…
Здравствуйте.
Странно, только что проверил — исходники на месте.
Андрей, у меня похожая проблема — при попытке открыть папку с исходниками получаю сообщение, что открыть ее невозможно, т.к. папка пуста. С исходниками с Яндекс.Диск та же песня. Помогите, пожалуйста.
Вероника, даже и не знаю, как именно вам помочь… только что проверил — и исходники к уроку, и с Яндекс.Диска успешно скачиваются и распаковываются. Ну, можете предложить свой вариант, как именно я могу помочь в этой ситуации… как вариант, можете создать тему на форуме, дать мне доступ к вашему компьютеру через TeamViewer — я попробую сам посмотреть, почему у вас не получается.
Андрей, спасибо Вам за Вашу отзывчивость и оперативность. Я нашла нужные мне файлы на Вашем диске по созданию интернет-магазина. По рассеянности забыла о допматериалах. Простите за беспокойство.
Ничего страшного, Вероника. Пожалуйста
Спасибо огромное!!! Пришли на зов помощи очень быстро!!! Еще раз огромное Вам спасибо!!! Теперь главное что бы мои кривые руки смогли все допилить)))
Пожалуйста.
Кстати, рекомендую посмотреть также аккордеон из урока . Там скрипт аккордеона гораздо более функциональный и намного проще в установке.
Спасибо Андрей! Я посмотрел урок, если честно… я вообще незнаю php, js. Делаю сайты на Modx evo, там можно обойтись знанием php использовать готовые решения из просторов интернета…
Ну как бы учится приходится походу…
Андрей почему то у меня не хочет ни как работать меню, мне кажется у меня проблемы с подключением, вот и код подключения
Все остальное работает исправно это слайд, fancybox.
Создайте тему на форуме, дайте ссылку на сайт и как будет время попробую глянуть.
Здравствуйте. Спасибо Вам большое за урок и за Ваш труд!
Но, возник вопрос. Во всех браузерах всё прекрасно работает.
Только в Опере появляется нежелательный отступ в 20px у родительских категорий.
Нигде он не прописан, подключен сброс стилей от Эрика Мейера.
С чем это может быть связано?
Спасибо.
Здравствуйте, Евгения.
Посмотрел в Опере 18.0, смотрится все нормально. Попробуйте посмотреть в Firebug что это за отступ и откуда он берется. Если разобраться не получится, тогда создайте тему на форуме, приложите архив и скриншоты (желательно с Firebug’om), на которых видно проблему, а также укажите версию Оперы. Вообще, рекомендую использовать аккордеон из урока . Он более прост в установке, использовании, более гибок и более корректно работает.
Спасибо за быстрый ответ.
В Firebug не нашла я этого отступа.
Установив Оперу 19.0 этих отступов не обнаружила.
Изначально была установлена Опера 12.16, может поэтому и была такая «ошибочка».
Пожалуйста)
Возможно. В Опере 12.16 я не тестировал, но, думаю, там достаточно было сбросить отступы для вложенного списка.
У Вас в разметке списка невалидная неверная разметка! Я делаю на своей верной разметке и ничего не выходит
Это урок, а не готовое решение. Если Вы усвоите материал урока, то не должно составить труда сделать аккордеон с валидной версткой.
Там грубейшее нарушение html!!! Урок я так и не усвоил) Буду спрашивать) Точнее у меня заработало все с вашей разметкой)
Вы не совсем точны в определении. Ошибка HTML и невалидный код — это разные вещи. Если допущена ошибка в верстке, тогда код, в большинстве случаев, попросту работать не будет… невалидный же код может работать абсолютно без проблем. Не хочу открывать дискуссию, которая происходила уже не раз, но в сети, пожалуй, процентов 90 невалидных сайтов… ходить далеко не нужно: проверьте на валидность Гугл и Яндекс)
Так Вы поняли про какую неточность в разметке я говорю?
Да, конечно)
Кстати, можете посмотреть урок , в котором также строится меню-аккордеон. В итоге меню получается и кроссбраузерным и многоуровневым.
Здравствуйте!
Мне нужно, чтобы при клике на категорию работала ссылка(как и на подкатегорию). Нашел в файле jquery_accordion.js функцию, которая отменяет стандартное поведение ссылки, удалил ее. Все стало как мне нужно, но анимация при клике на категорию работает рывками (впечатления, что тормозит комп).
Вернул все обратно, прописал в рабочем файле .js обработчик события клик
var link = $(this).find(‘a’).attr(‘href’);
window.location = link;
результат тот же. Может подскажете, в чем проблема
Здравствуйте.
С такой необходимостью при работе с данным плагином не сталкивался, поэтому не подскажу. Попробуйте еще , возможно он подойдет для решения задачи.
Добрый день!
У меня та же проблема. Если вы решили вопрос чтобы при клике на категорию работала ссылка(как и на подкатегорию), то пожалуйста подскажите как сделать?
У меня почему-то скрипт перестает работать после добавления проверки есть ли что-то в куке openItem. Когда прописываю if ($.cookie(«openItem»)). Полностью код копировал последний тоже не работает.
Проверяйте консоль на предмет ошибок и исправляйте их.
Попробую заменить «дерево» на моём хобби. Урок неплохой. Смотрю также «Интернет-магазин под ключ».
Добрый день, Андрей.
Смотрю ваше видео по разработке интернет-магазина. В данный момент сложности с «прикручиванием» меню аккордеона к интернет-магазину. В видео вы показываете, что прицепили скрипты в header.php jquery-ui-1.8.22.custom.min.js и jquery1.7.2.min.js. В скачиваемом материале таких скриптов нет(не на диске с видео, ни тут). В общем, буду признательна, если объясните или пришлете файлы мне на e-mail, которые поменялись в результате «прикручивания» аккордеона(особенно header.php и leftbar.php), сама попробую разобраться.
Здравствуйте, Надежда.
Все вопросы по данному курсу Вы можете задать в на нашем форуме.
Спасибо за урок.))
Пожалуйста)
здравствуйте у меня вопрос : все получилось с аккордеоном все открываеца\закрываеца. только одно но! категории без вложенных списков отображаются чуть ближе к левому краю, как если бы у них padding был меньше чем у тех, в которых есть подкатегории. не знаете как это исправить?
Здравствуйте. Создайте тему на нашем форуме, выложите Ваш код, чтобы его можно было посмотреть, тогда можно будет попробовать что-то подсказать.
проверил в других браузерах все ровно, только в опере, получаеца так, как я вчера написал.
Здравствуйте, отличный урок и отличный код, но увы столкнулся с одной проблемой
А именно выделение кнопки при нажатии на нее, можно ли это как то пофиксить данную фичу?
Заранее спасибо
//дополнение
И да можно ли сделать под разделы в разделах?
Ну если точнее, сделать что бы они сворачивались?
— пример подраздела.
Заранее спасибо
Здравствуйте.
Посмотрите этот , в нем можно практически автоматом сделать многоуровневое меню.
А что касательно рамки? «синенькой»
Проблемы, связанные со стилевым оформлением, решаются через стили. Вашу проблему я вижу только на картинке. Чем она вызвана — по картинке не понять, для этого нужен «живой» код, но причина ее, судя по всему, в стилях.
Вот данная проблема в вашем видео гайде, в момент проверки в разных браузерах, при открытии вкладки LG образуется некая рамка, интересует, как ее убрать.
Я ведь уже ответил, что по картинкам проблемы не решаются, нужен код, а Вы мне снова картинку показываете))
Убирается она через стили, как я уже и отмечал выше. Эта рамка — это внешняя граница (outline), которая добавляется на фокус элемента (в данном случае h3), это можно увидеть, открыв инструменты разработчика. Соответственно, для h3 при фокусе просто уберите эту рамку:
h3:focus{outline: none;
}
Спасибо Вам, Андрей, за великолепные уроки! Без них как без рук.
И классный котёнок на аваторке, я обожаю!
Спасибо!
Здравствуйте!
Подскажите пожалуйста, как сделать, чтобы при клике на категорию страница не перепрыгивала в начало, а оставалась на месте относительно меню аккордеона той кнопки на которую кликал?
Сайт для примера beltig.ru
Кстати делал полностью по Вашим урокам. Спасибо Вам огромное за такие полезные упражнения!
Здравствуйте.
Как вариант, можно попробовать использовать для пунктов меню.
Здравствуйте!
Как сделать так, чтобы последнее меню отмечалась другим цветом как активная?
В интернете все задают этот вопрос.
Здравствуйте.
Уточните, что именно значит «последнее меню»? Последний пункт меню или на странице используется несколько меню. Лучше всего задать вопрос на нашем форуме, чтобы можно было показать код и задать вопрос на конкретном примере.
Спасибо за ответ. Я имею ввиду последняя категория, которая уже показывает товары. Вот она не подсвечивается как активная.((((
При переходе к выбранной категории (это может быть любая, не только последняя) сравниваете адрес выбранной категории с адресами в меню. При совпадении присваиваете нужной категории класс active, а в стилях для класса active задаете необходимые правила. Как-то так. Если нужен вариант кода, то его также без проблем можно найти. Например, по запросу в Гугле как выделить активный пункт меню первый же вариант с форума javascript.ru подходит.
К слову, посмотрите . В нем найдете лучший вариант такого меню и задача с выделением активного пункта меню уже решена.
Благодарю за ответ!
Но я приделал вот этот аккордеон. =>
И вот в неё последняя ссылка не активна. Не могу найти решение. Пытаюсь.
Именно этот вариант и показан в предложенном мною уроке. Выложите на форуме архив с Вашим кодом или дайте ссылку на страницу, чтобы можно было посмотреть проблему, поскольку на словах не очень понятно, что именно не так и в чем проблема.
Я использую неограниченное количество подкатегорий и поэтому путь $(‘#active_menu > ul > li >a’).each(function ()
постоянно меняется. И как вот тут сделать универсальным я не знаю.
Вот ссылка на страницу secrets-lan.ru
там я тестирую аккордеон и можно заметить, что последний пункт меню не выделяется активным.
Помогите, пожалуйста, прописать верный код.
Спасибо!
Игорь, Вы упорно не хотите общаться на форуме
Чтобы подсветить последний активный пункт меню, укажите следующее правило:
.graphite ul li a.active {background: #232323;}Кстати, когда установлено autoClose : true, то активный пункт не сохраняется, работает как нужно. Но как только ставишь false, чтобы меню не закрывалось при раскрытии другого меню, так любой активный пункт сохраняет активность.
Вот опять сижу думаю ничего не выходит.
Спасибо Вам за ответ! Я так сделал. Вставил стиль. И всё заработало… Но.. У меня аккордеон должен работать так: при открытии одного меню другое не закрывается.
Так вот так отмечается каждая посещённая ссылка и не сбрасывается её значение. Вы можете сейчас посмотреть там на сайте у меня.
Что я только уже не делал! Не сбрасывается значение и всё тут!
Помогите, прошу Вас. Весь интернет уже перелопатил. Ничего нет!
Что касается форума, то я не знаю на какой форум мне написать. Я хочу у Вас тут спросить. Совсем нет возможности быть на форумах.
Помогите с решением.
Спасибо
Наш форум —
Выложите ссылку на архив с меню, я посмотрю, что можно сделать.
Спасибо Вам! Изучу Ваш форум обязательно. Я посмотрел так много интересного.
Но позвольте очень Вас прошу выложить сейчас ссылку на архив. Вот она :
Помогите, очень Вас прошу!
Заранее спасибо!
> У меня аккордеон должен работать так: при открытии одного меню другое не закрывается.
Увидел. К сожалению, с опцией autoClose: false вряд ли получится реализовать задуманное, поскольку в этом случае для открытых ссылок плагин устанавливает класс active, к которому мы и пытаемся привязаться. Установите опцию autoClose: true, в противном случае придется только лезть в код плагина, чтобы попытаться реализовать задуманное.
Вот и я нигде не нашёл решения.
Андрей, если Вас не затруднит, может Вы сможете поправить код плагина. Напишите мне сюда, очень Вас прошу. Такой аккордеон и так загублен его авторами.
Если найдёте решение, напишите мне, пожалуйста, я всю жизнь буду Вас благодарить.
Если получится найти — напишу.
Ой, спасибо Вам в любом случае!!!
Если получится найти, то бесценны Ваши вдвойне знания, потому что нет ответа на этот вопрос в интернете. Никто не знает и не может. Давно уже ищу и сам думаю.
Спасибо!
Что интересно, больше нет нигде подобных аккордеонов. И без метки он теряет полностью смысл. очень на Вас надеюсь, что сможете найти решение. Больше некому из всей сети.
Здравствуйте, подскажите если H3 поменять на li то в js что нужно поменять чтобы аккордеон нормально заработал?
Здравствуйте, Николай.
Этот урок уже устарел. Рекомендую использовать плагин из для построения аккордеона. Здесь код будет валидным и меню будет строиться фактически автоматически.