Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

5 Вариантов одного меню аккордеон

Однажды я выложил развернутый урок по созданию компактного в стиле , раскрывающееся по клику, со встроенным счётчиком подпунктов. получилось довольно симпатичным и функциональным. Внешний вид сформирован исключительно на CSS3, градиентная заливка, внешняя тень блока и т.д. Работа построена на библиотеке , исполняющий плагин получился очень лёгким и простым в настройках, так что меню привлекло внимание пользователей. Но тут же стали появляться вопросы типа: как сделать меню раскрывающееся по наведению, как прикрутить к нему обработчик cookie и т.п.
Вопросы такого плана задаются и к другим записям, посвященным созданию меню, поэтому я решил сделать 5 разных вариантов меню «аккордеон», в какой-то мере отвечающие запросам пользователей.
 
Компактное меню аккордеон
 
Повторяться не буду, полный расклад и описание отдельных параметров опущу, так как основы не отличаются от описанных в уроке. Функциональные различия (способы открытия и закрытия) в исполняемом javascript, они настолько не существенны, что думаю разобраться будет не трудно.
Смотрите живой пример, исходники js и css, выбирайте понравившийся вариант и творите, творите, творите…

1. Меню со встроенным счётчиком

Вариант меню аккордеон со встроенным счётчиком ссылок, раскрывается и закрывается по клику. Счетчик ссылок скрытых блоков отображается на основных пунктах, обрабатывается и выводится с помощью свойств counter-increment, counter-reset и content.
При раскрытии подпунктов, предыдущие раскрытые блоки остаются открытыми, закрываются по повторному клику:
 

Всего комментариев: 78

  • Asso95: 27 апреля, 2015 в 21:39

    Круто! Только вот не совсем понял, перед тегами HEAD или BODY надо вставлять скрипт и библиотеку jQuery Cookie?

    Ответить
    • driver: 27 апреля, 2015 в 21:48

      Предпочтительнее перед закрывающим тегом </body>, по ряду причин, если вдруг что-то пойдёт не так, можно прописать скрипт в разделе head, не критично, это лишь влияет на скорость загрузки документа.

      Ответить
      • Asso95: 27 апреля, 2015 в 21:51

        Да вот в том то и дело, что я поставил скрипт перед тегами head, а он не работает.

        Ответить
  • Asso95: 27 апреля, 2015 в 22:07

    Спасибо, вы мне так помогли. Очень давно искал рабочее меню-аккордеон. Я вам очень благодарен!)

    Ответить
  • Lolito: 29 апреля, 2015 в 17:45

    Приветствую! Помогите пожалуйста собрать свое меню из ваших стилей, которые используются в «Меню аккордеон с jQuery Cookie». Я нашел подходящий скрипт, который открывает и закрывает меню при клике (без использования jQuery), то что мне нужно. Но вот я не как не могу подключить к нему ваши стили, чтобы меню отображалось корректно.
    Ссылка на меню вот: (без css стилей).
    Если поможете мне собрать меню, то готов написать для вашего сайта хорошую, читабельную и уникальную статью на любую тему, с вашим ТЗ. С уважением, Lolito!)

    Ответить
    • driver: 29 апреля, 2015 в 21:23

      Держите: Тынц
      Исполняемый js поместите перед закрывающим тегом </body>

      Ответить
      • Азамат: 18 июля, 2016 в 17:25

        Здравствуйте, установил меню из этой статьи с поддержкой куков. Все было хорошо, но после установки fancy box, меню не работает. Оно тупо перестало раскрываться. Может вы сталкивались с такой несовместимостью? Меню менять не хочу. Думаю искать замену. Fancy box, если проблема не решится.

        Ответить
  • Lolito: 29 апреля, 2015 в 22:11

    Спасибо большое за помощь! Как и обещал, скидывайте ТЗ в тему, напишу статью (это сообщение потом удалите).

    Ответить
  • Олег: 20 июня, 2015 в 20:42

    Хорошее меню. Но в варианте с cookie если было открыто меню с подменю, а потом без подменю, то подменю которое было открыто не закрывается, а как сделать что бы закрывалось?

    Ответить
  • Webmaster: 1 августа, 2015 в 17:41

    Присоединяюсь к вышестоящему вопросу. Как сделать так, чтобы ссылки в варианте с меню с куками тоже сохраняли свой цвет после нажатия и обновления страницы. А то получается, что если нажимаешь на раздвижное меню и подссылку в нем, а потом, например на простую ссылку, то раздвижное меню все равно остается открытым?

    Ответить
  • сергей: 30 сентября, 2015 в 12:48

    вот мой сайт. можете мне сделать меню как у вас в этом пункте 5. Меню аккордеон с jQuery Cookie. доступ могу предоставить.

    Ответить
  • Jan: 14 ноября, 2015 в 18:47

    А нельзя сделать jQuery Cookie с таким же дизайном и счетчиком как в первом меню?

    Ответить
  • Евгений: 25 декабря, 2015 в 12:40

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

    Ответить
  • Андрей: 19 июля, 2016 в 18:48

    У меня есть один вопрос, как сделать чтоб меню раскрывается и закрывается по клику, и при том еще при клику переходила на страницу подраздела.
    Вот мой сайт:
    При клике в вертикальном меню на «холодильні камери» нужно чтоб кроме того чтоб разкрылось меню, нужно чтоб еще открылась страница: http://www.zdorovklimat.com.ua/kamery.html
    То есть что мне добавить к
    <script type="text/javascript">
    $(document).ready(function () {
    $('.sub > a').click(function(){
    $('.sub ul').slideUp();
    if ($(this).next().is(":visible")){
    $(this).next().slideUp();
    } else {
    $(this).next().slideToggle();
    }
    return false;
    });
    $('.mini-menu > ul > li > a').click(function(){
    $('.mini-menu > ul > li > a, .sub a').removeClass('active');
    $(this).addClass('active');
    }),
    $('.sub ul li a').click(function(){
    $('.sub ul li a').removeClass('active');
    $(this).addClass('active');
    });
    });
    </script>

    Подскажите пожалуйста, буду очень, очень благодарен.

    Ответить
  • Лариса: 12 сентября, 2016 в 21:23

    Подскажите, пожалуйста, почему может не работать меню с куками, точнее меню прекрасно работает, а состояние меню не сохраняется. Я просто скачала папку и запустила accordion-open-click-close-cookie.html

    Ответить
    • driver: 12 сентября, 2016 в 22:35

      Попробую угадать: вы просматриваете пример «со стола» в Chrome.
      Попробуйте в другом браузере.
      А загрузив на сервер, уверен всё покатит.

      Ответить
  • Игорь: 30 сентября, 2016 в 16:55

    Было бы не плохо пример с sub sub menu описать

    Ответить
  • .: 30 сентября, 2016 в 20:59

    У меня почему-то при клике на каой либо раздел он не разворачиваеться.

    Ответить
    • котярус: 27 октября, 2016 в 03:17

      Возможно потому, что Вы забыли jQuery библиотеку подключить.
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

      Ответить
  • Андрей: 17 ноября, 2016 в 14:44

    Успешно использовал вариант 3, спасибо!
    Пытался применить вариант 5, но, к сожалению, мне не удалось добиться, чтобы при загрузке страницы все раскрывающиеся пункты были свернуты. При тестировании меню из архива раскрыт Пункт Меню — 2. Это можно как-тог победить?

    Ответить
    • driver: 19 ноября, 2016 в 17:14

      Андрей, здравствуйте.
      Специально скачал и протестировал все варианты в разных браузерах. Могу ответственно заявить, что всё работает без косяков, т.е. как расписано в статье и показано в демо. Даже не представляю, что там у вас )))). Так что помочь ничем не могу…

      Ответить
  • Александр: 27 ноября, 2016 в 13:52

    Здравствуйте! Подключил меню на сайт, но позиция сохраняется только после нескольких кликов по пункте (меню №5) Не подскажете в чем может быть проблема?

    Ответить
  • Алексей: 30 декабря, 2016 в 10:26

    Доброго времени суток!
    Прежде всего хочу сказать спасибо за полезный и доходчиво изложенный материал.
    Мне больше всего понравилось меню с cookies (№5), НО у меня та же проблема, что и отписавшегося выше посетителя.
    После клика на подпункте меню, оно не всегда срабатывает ожидаемо, а именно, при переходе на другой пункт меню, при первом клике в его подпункте, разворачивается другой пункт, и сворачивается тот, в подменю которого был клик.
    Несколько сумбурно изложено, я понимаю.
    Попробуйте сами покликать здесь, на моей пробной страничке :
    ламинат-нк.рф/catalog.html
    На страничке два вида данного меню, одно реализовано через сниппет ModX Wayfinder,другое (ниже) непосредственно в коде сайта.
    Думаю, проблема в скрипте, но так как я не разбираюсь в скриптах, то прошу Вас посмотреть, в чем может быть проблема…
    Заранее Вас благодарю.

    Ответить
    • driver: 30 декабря, 2016 в 13:46

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

      Ответить
      • Алексей: 30 декабря, 2016 в 14:07

        Спасибо за быстрый отзыв.
        Именно, что со второго раза срабатывают! И пока остаешься в данном разделе меню, то все работает отлично.
        Я тут осмелился скрипт порыть и сдается мне, что вот в этой части что-то нужно изменить:
        (33 строка) function (){
        var subIndex = $(‘.sub ul li a’).index (this);
        $.cookie («sub-link», subIndex);
        $(‘.sub ul li a’).removeClass (‘active’);
        $(this).addClass (‘active’);
        }
        Хотя, еще раз повторюсь, я профан в этой области и советовать не имею права))
        p.s. Все же весьма рассчитываю на Ваше содействие, так как меню мне очень понравилось, долго рыл инет в поисках чего-то подобного и не нашел! Простых аккордеонов много а чтобы с cookies было, такого я не видел.

        Ответить
  • Алексей: 30 декабря, 2016 в 20:27

    Уважаемый Андрей.
    Я убрал со странички второй блок меню и у меня ничего не изменилось. Можете убедиться сами.
    Собственно, дублирующее меню было мною создано изначально как раз с целью разобраться почему меню не работает как надо. Я думал, что, возможно, какие-то параметры сниппета Wayfinder влияют на работу скрипта, поэтому я продублировал меню безучастия Wayfinder`а.
    Все так же при переходе в другой корневой пункт меню, оно работает не с первого клика.
    Посмотрите еще раз, пожалуйста. Очень уж замечательная менюшка, хочется, чтобы заработала корректно…

    Ответить
    • Алексей: 30 декабря, 2016 в 21:09

      Что интересно — если все куки сайта подтереть, то первый заход в любой пункт меню (и потом в его подпункты) проходит абсолютно корректно. Но вот потом, при переходе в другой пункт уже начинает некорректно работать…

      Ответить
  • Алексей: 30 декабря, 2016 в 21:12

    Может, это Jquery.cookie.js не совсем корректно отрабатывает? Я скачал последнюю его версию с сайта исходника.
    Результат не изменился…

    Ответить
  • Серега: 6 июня, 2017 в 11:49

    Подскажите, как сделать, чтобы первое меню было раскрыто по умолчанию?

    Ответить
    • driver: 6 июня, 2017 в 12:30

      Самое простое это в селекторе #menu li ul исключить или закомментировать свойство height: 0;, и тогда меню будет полностью раскрыто при загрузке, в остальном, при кликах, пункты меню работать будут в обычном режиме

      Ответить
      • Серега: 6 июня, 2017 в 14:10

        Работает, спасибо.

        Ответить
  • Nilson: 5 июля, 2017 в 07:30

    привет. как я понял этот код просто куда нибудь в хейдер закинуть можно?

    Ответить
  • Nilson: 14 июля, 2017 в 21:19

    CSS и HTML понятно. но куда код JS куда устанавливать? А то не работает у меня никак

    Ответить
    • driver: 15 июля, 2017 в 14:11

      Разместить js можете в разделе между тегами <head></head>, или внизу странички, в районе закрывающего тега </body>, и конечно же, у вас должна быть подключена библиотека jQuery, в данном примере используется версия подгружаемая с сервиса Google:
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

      Ответить
      • Nilson: 15 июля, 2017 в 18:34

        Меню выводится но не раскрывается. Не знаю в чем дело. И JS поставил после

        Ответить
  • Сергей: 26 августа, 2017 в 11:45

    Не могу решить одну проблему, получаются пробелы между пунктами в 3. Меню раскрывается и закрывается по клику. И дело там в ! Если делаю общим а промежуточные на каждое меню убираю то пробелы исчезают но все менюшки открытые получаются.Это как то можно в стилях поменять?

    Ответить
    • driver: 26 августа, 2017 в 15:56

      У вас срабатывает маржа в селекторе .punica-poll-widget ul li свойство margin: 15px 0 0;, а так же для списков вашего шаблона прописан отступ от нижнего края пунктов
      ul li {
      list-style-type: inside square;
      margin-bottom: 10px;
      }

      Если исключить отступы margin из стилей для списков базового шаблона, косяки могут проявиться в другом
      Чтобы выправить ситуёвину достаточно в селектор .mini-menu > ul > li прописать свойство margin:0;
      А для подпунктов меню прописать правило: .mini-menu .sub ul li{margin:0}

      Ответить
      • Сергей: 26 августа, 2017 в 16:10

        Отлично! Большое спасибо за помощь!

        Ответить
  • Сергей: 26 августа, 2017 в 11:50

    «ul»”/ul”

    Ответить
  • Павел: 26 августа, 2017 в 13:20

    А в этом меню возможно раскрыть еще саму ссылку внутри аккордеона? Чтоб там был еще мини-список?

    Ответить
    • Сергей: 26 августа, 2017 в 15:30

      Конечное
      //krasmediafiles.ru/

      Ответить
    • driver: 26 августа, 2017 в 16:06

      Здравствуйте, Павел.
      Есть у меня готовый вариант, посмотрите может подойдёт: тынц →

      Ответить
  • Сергей: 26 августа, 2017 в 15:41

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

    Ответить
    • driver: 26 августа, 2017 в 15:58

      Выше уже расписал, что нужно сделать

      Ответить
  • bagshy: 4 ноября, 2017 в 13:02

    Zdrawstwuyte Ander. Etot ststya ochen pomogla mne. No hochu sprosit mojno li postawit scrollbar , inache u menya spisok bolshoy. zaranee spasibo

    Ответить
  • bagshy: 4 ноября, 2017 в 13:04

    i kak mojno menyat swet s korichnego na drugoy swet???

    Ответить
  • Виктор: 10 ноября, 2017 в 05:24

    Доброго времени суток! Хочу поблагодарить за исчерпывающий материал.
    Помогите, пожалуйста, разобраться с кодом. Часть кода (аккордеон) взял у Вас (5 вариант с cookie) -рабочий, а часть- здесь (выпадашка) и вот, что из этого получилось- тЫц.
    Задача: при наведении курсора или активных вкладках нужно чтобы поворачивались треугольники и «подсвечивались» желтым цветом( #f2bd00 ) надписи на пунктах меню по всей цепочке, например: Альтернативная энергия -> Ссылка2 -> пункт2.2 -> пункт2.2.2. CSS и скрипты пока расположены на станице.
    Заранее Вам благодарен.
    P.S. Пожалуйста, изменения в коде постарайтесь как-то выделить.

    Ответить
  • Елена: 21 декабря, 2017 в 03:34

    Спасибо за отличные варианты меню! Просто и понятно, как раз то, что нужно. И все было бы еще лучше, если бы при повторном клике на этот же пункт с него убирался класс active. Как это сделать? Пробовала дописать сброс класса при повторном клике, но в данной вариации не получилось. На своих меню, что сама делаю, обычно работает.
    Это меню приглянулось просто из-за автосворачивания списка при клике на следующий.

    Ответить
  • Алексей: 10 мая, 2018 в 19:15

    Спасибо огромное, все супер.
    Подскажите плиз как в примере с cookie затереть cookie если пользователь свернул развернутый им раздел. В данном примере раздел сворачивается но cookie остается и при обновлении страницы меню само разворачивается в прежний режим.
    В Java я совсем олень но без нее никуда 8 ( Заранее спасибо.

    Ответить
  • Михаил: 29 июля, 2018 в 19:31

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

    Ответить
  • Андрей: 4 октября, 2018 в 02:24

    Здравствуйте! Подскажите, пожалуйста, где или как можно поменять цвет меню?

    Ответить
    • driver: 5 октября, 2018 в 19:01

      Здравствуйте, Андрей.
      Например для вариантов тёмного меню, находите селектор .mini-menu > ul > li > a, в нём вам понадобятся свойства для обозначения характеристик фона background и background-image
      В background: #333; установлен базовый цвет фона пунктов меню, отображается в браузерах неподдерживающих градиенты, в нашем случае это линейные градиенты, которые прописаны в свойстве background-image:.
      Всё что вам нужно, это изменить значения цвета, как основного так и градиентной заливки в этом фрагменте кода:

      background: #333;
      background-image:-webkit-linear-gradient(#444, #333);
      background-image:-moz-linear-gradient(#444, #333);
      background-image:-ms-linear-gradient(#444, #333);
      background-image:linear-gradient(#444, #333);
      background: #333;
      background-image:-webkit-linear-gradient(#444, #333);
      background-image:-moz-linear-gradient(#444, #333);
      background-image:-ms-linear-gradient(#444, #333);
      background-image:linear-gradient(#444, #333);

      Соответственно подгоняете и цвет нижнего бордюра border-bottom: 1px solid #222; и тени box-shadow.
      От градиентов вы можете отказаться, как это сделано в 5-м примере:

      background:#ececec;
      border-bottom:1px dotted #ccc;
      background:#ececec;
      border-bottom:1px dotted #ccc;

      Ответить
  • Сергей: 18 октября, 2018 в 15:32

    Здравствуйте! А с душой можете нам на сайт установить меню ? Конечно не бесплатно, а то у нас не получается) С Уважением

    Ответить
    • driver: 19 октября, 2018 в 18:44

      Здравствуйте, Сергей!
      Если с душой, то можно многое. Только зачем платить если практически всё сделали сами. Посмотрел, вам осталось внести некоторые корректировки, в частности отрегулировать внешние отступы, а именно увеличить нижний отступ, чтобы блок меню не наезжал на виджет находящийся ниже, для этого в селекторе .mini-menu смотрите свойство margin, по-умолчанию прописаны значения 0 auto, замените на margin: 0 0 30px 0;, где 30px и будет величина отступа от нижнего края меню, а также желательно изменить значение ширины меню на относительное, т.е. указать в процентах max-width: 100%;, так меню станет отзывчивым, и будет более коректно отображаться при изменении размера окна браузера.

      Ответить
  • Ria: 19 февраля, 2019 в 16:15

    Здравствуйте, подскажите пожалуйста по меню 5. Меню аккордеон с jQuery Cookie
    а как сделать активным простой пункт Просто ссылка без субменю, что бы при переходе на него он ставал один активным

    Ответить
  • Александр: 24 ноября, 2019 в 20:59

    Здравствуйте! А как сделать тот вариант что на куках работал так-же как первый вареант меню то-есть не закрывался при открытии или как привязать куки к первому варианту?
    И Ищё как сделать чтобы по умолчанию некоторые пункты были открыты?

    Ответить

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

Ваш email не будет опубликован.

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