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

Вертикальное меню в стиле аккордеон CSS и jQuery

Различными блоками, менюшками выполненных в стиле «», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием , так и основанных исключительно на CSS.
Сегодня хочу познакомить вас с ещё одним вариантом компактного, вертикального меню в стиле «аккордеон», которое отлично впишется в боковую колонку любого сайта. Работа меню основана на небольшом jQuery плагине в связке с некоторыми современными свойствами CSS3, для формирования внешнего вида раскрывающегося блока ссылок, так что пресловутая кроссбраузерность элемента обеспечена))).

Меню в стиле аккордеон

Начнём с того, что наше будущее меню для работы использует библиотеку jQuery, так что необходимо её подключить к вашему сайту, если вы это ещё не сделали. Можно скачать самую последнюю версию с сайта разработчика, а так же можно подгружать jQuery на свою страницу с сайта Google или других внешних источников. В примере мы будем использовать библиотеку подгружаемую с сервиса Google, для этого вам необходимо внутри тегов <head></head> или внизу html-страницы перед закрывающим тегом

достаточно разместить такую строчку:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

В этом случае вы получите самую последнюю версию jQuery.

Далее мы выстроим html-каркас аккордеона. Наше меню представляет из себя неупорядоченный список <ul>, помещённый в контейнер div с определённым классом, не будем особо выдумывать и присвоим этому классу вполне логичное имя — mini-menu. В дальнейшем, непосредственно в CSS, мы определим правила и свойства для этого класса, тем самым сформируем стили и внешний вид элементов будущего меню.

<div class="mini-menu">
    <ul>
        <li>
            <a href="">Главная</a>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 1</a>
            <ul>
               <li><a href="">Ссылка - 1</a></li>
               <li><a href="#">Ссылка - 2</a></li>
               <li><a href="#">Ссылка - 3</a></li>
               <li><a href="#">Ссылка - 4</a></li>
               <li><a href="#">Ссылка - 5</a></li>
               <li><a href="#">Ссылка - 6</a></li>
               <li><a href="#">Ссылка - 7</a></li>
               <li><a href="#">Ссылка - 8</a></li>
            </ul>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 2</a>
            <ul>
               <li><a href="#">Ссылка - 1</a></li>
               <li><a href="#">Ссылка - 2</a></li>
               <li><a href="#">Ссылка - 3</a></li>
               <li><a href="#">Ссылка - 4</a></li>
               <li><a href="#">Ссылка - 5</a></li>
               <li><a href="#">Ссылка - 6</a></li>
               <li><a href="#">Ссылка - 7</a></li>
               <li><a href="#">Ссылка - 8</a></li>
               <li><a href="#">Ссылка - 9</a></li>
            </ul>
        </li>
        <li class="sub">
            <a href="#">Пункт Меню - 3</a>
            <ul>
                <li><a href="#">Ссылка - 1</a></li>
                <li><a href="#">Ссылка - 2</a></li>
                <li><a href="#">Ссылка - 3</a></li>
                <li><a href="#">Ссылка - 4</a></li>
                <li><a href="#">Ссылка - 5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Контакты</a>
        </li>
    </ul>
</div>

Если можно так сказать, блок меню полностью автономный, то есть все стили css прописаны конкретно для него и никак не будут влиять на общие стили вашего сайта, конечно если класс mini-menu не совпадёт с имеющимся в вашей таблице стилей классом, тогда просто обзывайте его как-нибудь по-другому. Далее, размещаете div-контейнер со всем содержимым туда где вы хотите видеть меню-аккордеон.
Чтобы меню выглядело так, как мы это задумали, с помощью стилей CSS, сформируем внешний вид, определим размеры, цвет фона, изменения ссылок при наведении и другие параметры.

.mini-menu{
    margin: 0px auto;
    max-width: 220px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    -webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font: normal 14px Helvetica, Arial, sans-serif;
}
.mini-menu ul {
    list-style: none;
    margin: 0;
    padding:0;
    text-align:left;
}
.mini-menu > ul > li {
    position: relative;
}
.mini-menu > ul > li > a {
    display: block;      
    outline: 0;  
    padding: .7em 1em;    
    text-decoration: none;       
    color:#C9C9C9;       
    font-weight: normal; 
    text-shadow: 1px 1px 3px #111; 
    background: #333;
    border-bottom: 1px solid #222;
    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);
    -webkit-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    -moz-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
    color:#f2bd00;
}
.mini-menu .sub > ul {
    counter-reset: items;
    height: 0;
    overflow: hidden;
    background: #eee;
    -webkit-box-shadow:inset 0 0 50px #bbb;
    -moz-box-shadow:inset 0 0 50px #bbb;
    box-shadow:inset 0 0 50px #bbb;
}
.mini-menu .sub > ul > li > a {
    counter-increment: items;
    color:#514b92;
    font-size: 12px;
    display: block;
    text-decoration: none;
    padding: .7em 1em;
    border-bottom: 1px dotted #bababa;
}
.mini-menu .sub > ul > li > a:hover,
.mini-menu .sub > ul > li > a.active {
    background: #d8d8d8;
    color: red;
    padding-left: 1.3em;
}
.mini-menu .sub > ul > li > a:after{
    content: "»";
    float: left;
    margin-right:6px;
    line-height: 12px;
}
.mini-menu .sub > ul:after {
    content: counter(items);
    font-size: 1em;
    display:inline-block;
    position: absolute;
    right: 10px;
    top: 6px;
    background: #333;
    line-height: 1em;
    padding: .5em .7em;
    color: #c9c9c9;
    text-indent: 0;
    text-align: center;
    text-shadow:0px 1px 0px rgba(0, 0, 0, .5);
    font-size: 0.8em;
    font-weight: 500;
    -webkit-border-radius:25%;
    -moz-border-radius:25%;
    border-radius:25%;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
}

Ширину всего блока меню я выставил в max-width: 220px;, соответственно вы можете присвоить любое другое значение, в зависимости от ширины боковой колонки вашего сайта или блога. Градиент фона, для основных пунктов меню, работает во всех современных браузерах, для IE 9 и ниже не стал добавлять «костыли», так как эти версии, слава Богу, умирают всё быстрее и быстрее, да и без градиентной заливки, в старых версиях IEшки, меню выглядит замечательно.
Цифровое обозначение количества ссылок, находящихся в каждом пункте меню, формируется с помощью псевдокласса :after в селекторе .mini-menu .sub > ul:after, и генерируется через свойство content: counter(items);. Это значит, что добавляя очередной подпункт в какой-либо из блоков, цифра справа на основном пункте меню, будет меняться в соответствии количества ссылок в этом блоке.
Классом .sub обозначены пункты списка имеющие подпункты, исполняемый js завязан на работу именно с этим классом.

Каркас меню мы выстроили, внешний вид оформили, все функции определили, остаётся только запустить «Аккордеон». Для этого необходимо подключить к странице небольшой JQuery-плагин:

<script type="text/javascript">
    $(document).ready(function () {
        $(".sub > a").click(function() {
            var ul = $(this).next(),
                    clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),
                    height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
            clone.remove();
            ul.animate({"height":height});
            return false;
        });
           $('.mini-menu > ul > li > a').click(function(){
           $('.sub a').removeClass('active');
           $(this).addClass('active');
        }),
           $('.sub ul li a').click(function(){
           $('.sub ul li a').removeClass('active');
           $(this).addClass('active');
        });
    });
</script>

Разместить javascript можете всё там же, в разделе между тегами <head></head>, или внизу странички, в районе закрывающего тега </body>.

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

Всё! Замечательное, компактное меню в стиле «аккордеон» полностью готово к работе. Смотрим ещё раз живой пример, скачиваем исходники и экспериментируем, как душе угодно и на сколько хватит фантазии, продолжаем без устали творить, творить, творить…

Обновление: 30.03.2015

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

С уважением, Андрей

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

  • NeedHate: 24 марта, 2014 в 16:37

    Наконец-то! оно! спасибо!

    Ответить
    • driver: 24 марта, 2014 в 17:29

      А я то как рад, что вам пригодилось)))

      Ответить
  • Vladislav: 26 марта, 2014 в 22:18

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

    Ответить
    • driver: 26 марта, 2014 в 22:48

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

      Ответить
  • Vladislav: 26 марта, 2014 в 23:09

    вот например!

    Ответить
    • driver: 26 марта, 2014 в 23:55

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

      Ответить
      • Vladislav: 27 марта, 2014 в 00:01

        Я хочу себе на сайт типа такова меню как у вас,поставить с лева!Типа как на сайте Spaces.ru!Помогите пожалуйста!

        Ответить
  • Aleksandr: 27 марта, 2014 в 17:23

    Отличное меню в стиле аккордеон!! +10
    Но почему вы его не добавили неделю назад назад(
    А то делал меню примерно такое-же и взял за основу вот этот исходник(dbmast.ru/files/accordion3/accordion2.html) но в нём много много чего пришлось переделать и там не было готовых выдвижных пунктов меню, и в нём один недостаток он выдвигался только при наведении на нужный пункт.
    А этот то что надо как и хотел чтобы при нажатии выдвигался)
    Спасибо за работу! +10
    Отличный сайт!
    P.S. Щас буду переделывать меню под это исходник)

    Ответить
  • Владислав: 25 апреля, 2014 в 23:13

    Не работают ссылку вставленные вместо звездочки.
    Как можно исправить код так, чтобы при нажатии на пункт меню другие открытые пункты сворачивались? Вот как на этом сайте: school91-nn.ru

    Ответить
    • driver: 26 апреля, 2014 в 00:29

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

      $(“.mini-menu a”).click(function()
      $(“.mini-menu a”).click(function()

      а надо было:

      $(“.mini-menu > ul > li > a “).click(function()
      $(“.mini-menu > ul > li > a “).click(function()

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

      Ответить
      • Владислав: 26 апреля, 2014 в 15:56

        Точно. Решётки. Оговорился =)
        Не видел, что есть готовый вариант.
        Спасибо за быстрый ответ.

        Ответить
      • Ruslan: 17 мая, 2014 в 22:39

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

        Ответить
  • Ruslan: 17 мая, 2014 в 22:42

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

    Ответить
    • Ruslan: 17 мая, 2014 в 22:44

      и еще добавь пожалуйста возможность выбора, что бы все поля были закрыты или открыты изначально при заходе на страницу

      Ответить
  • Андрей: 23 мая, 2014 в 15:57

    Добрый день. Все классно работает (WordPress 3.8.1), спасибо!
    Хотел спросить только вот что: возможно ли сделать так чтобы при переходе на страницу было открыто конкретное подменю? И еще можно ли подправить и при открытие новой вкладки, предыдущая закрывалась?
    Если не возможно, то и пусть и так хорошо ))

    Ответить
  • Сергей: 2 июня, 2014 в 11:24

    Я взял твои исходники, но ссылки работают только в развернутом меню, а например в пункте «просто ссылка» как не пытался , ссылки работать не хотят:(

    Ответить
    • driver: 2 июня, 2014 в 20:04

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

      Ответить
      • Сергей: 2 июня, 2014 в 20:21

        Жаль, очень жаль, советовали поиграться с ” $(«.mini-menu > ul > li > a») “, но ничего хорошего из этого не вышло … Все равно воспринимает ссылки только в раскрытом меню. Если будет время, может подкрутишь свои исходники 🙂 Менюшка уж очень понравилась, да и год не громосткий 🙂

        Ответить
  • Вик: 19 октября, 2014 в 19:18

    привет…подскажы, а как сделать что бы после перезагрузки страницы, те блоки что открытие остались открытими? а те что закрыте закритими?
    спасибо…

    Ответить
  • Alex: 26 декабря, 2014 в 01:16

    Прошу обратить внимание на «margin-bottom: 300px;» в CSS. Вниз от менюшки остаётся отступ в размере 300px.

    Ответить
    • driver: 26 декабря, 2014 в 09:22

      Спасибо, Alex.
      В примере кода css «очепаточка» вышла, исправил, в исходниках всё нормально)))

      Ответить
  • kkkrrrr: 4 февраля, 2015 в 20:18

    А как его переделать чтобы,
    Подпункты открывались при наведении и основной пункт был ссылкой как и подпункты?

    Ответить
    • driver: 5 февраля, 2015 в 00:19

      Чтобы меню раскрывалось при наведении достаточно изменить функцию:
      .click(function()
      на:
      .hover(function()
      Ну а чтобы основной пункт стал рабочей ссылкой, просто укажите адрес в атрибуте href="..."

      Ответить
      • kkkrrrr: 6 февраля, 2015 в 19:05

        Спасиб за ответ.
        Тут ещё проблема, я на УКОЗе делаю и там только в «управлении дизайном модуля», в разделе «страницы сайта».
        Я туда и загрузил все скрипты, но что то не работает.
        Вот сайт на котором я тестю всё такое probcas.ucoz.ru.
        Куда ещё эти скрипты загрузить?
        Или можно создать документ и в HTML или CSS дать на него ссылку?

        Ответить
  • kkkrrrr: 18 февраля, 2015 в 01:45

    Работает на сайте для теста probcas.ucoz.ru
    Но когда я поставил на сайт pokerbezdepa.ru
    Меню перестало норм работать, слева появились точки нумерации и само меню скривилось (там видно).
    На форуме сказали что другой класс перебивает, я установил приоритет, точки убрались но оно всё равно кривое…
    Помоги настроить это меню, я уже 3 месяца не могу поставить меню, все палёные, и это в т.ч…

    Ответить
    • driver: 18 февраля, 2015 в 20:49

      все палёные, и это в т.ч…
      Не знаю, где вы и что палёного увидели в этом меню, достаточно прямых рук и всё встаёт на свои места, найдите .mini-menu > ul > li > ul и выставьте margin:0, раскрывающиеся пункты займут своё место.

      Ответить
      • kkkrrrr: 18 февраля, 2015 в 21:57

        Этот отступ произошёл от маркеров списка которые я убрал поставив приоритет… Справа были маркеры они и отодвинули мень и выпад(может быть)

        Ответить
  • Владик: 7 марта, 2015 в 01:26

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

    Ответить
    • driver: 7 марта, 2015 в 01:35

      В смысле, где искать? Если вас интересует, какой раздел в .css отвечает за формирование счётчика, то вам нужен селектор .mini-menu > ul > li > ul::after

      Ответить
  • Владик: 7 марта, 2015 в 11:16

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

    Ответить
  • Алексей: 27 марта, 2015 в 22:50

    Вот набросал на скорую руку для hover: Тынц
    В селекторе .mini-menu > ul > li > ul убрал свойство height: 0;, можно конечно прописать с значением auto, но это роли не играет. Счётчик количества ссылок срабатывает так же по наведению, с этим не разбирался, тупо некогда.

    Убираю height и все пункты становятся раскрытыми. И закрываются по клику. Как поправить?

    Ответить
    • driver: 28 марта, 2015 в 00:02

      Алексей.
      То что вы привели в цитате, это был частный случай и относился к аккордеону раскрывающемуся по наведению, если вы убираете height в оригинальном аккордеоне, то конечно панели будут раскрыты. Если вы смогли заметить, именно на изменении значений высоты панелей и основан сам плагин.
      Если же вам нужен аккордеон раскрывающийся при наведении, то функцию js переписываем под hover, и соответственно убираем нулевую высоту у списков, скрывая их с помощью display: none;
      Смотрите пример в редакторе: Тынц и всё сразу же поймёте.

      Ответить
  • Сергей: 22 апреля, 2015 в 16:17

    Здравствуйте! Как настроить меню, чтобы корректно отображалось в IE?

    Ответить
    • driver: 22 апреля, 2015 в 18:28

      Здравствуйте. В версиях 10 и 11 всё отлично, в IE9 и ниже отсутствует градиент, в остальном меню отображается более чем корректно, для замшелых браузеров используйте картинки))

      Ответить
  • Сергей: 22 апреля, 2015 в 18:32

    Нет, у меня вообще плохо отображается. Одни ссылки только видно в IE. Можете мне помочь доработать?

    Ответить
    • driver: 22 апреля, 2015 в 19:38

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

      Ответить
      • Сергей: 22 апреля, 2015 в 19:49

        Вот смотрите как я переделал. Может где ошибка, из-за этого плохо отображается в IE.

        Ответить
  • Сергей: 22 апреля, 2015 в 20:08

    Нет, я хотелось узнать правильно ли вообще настроено меню?

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

      Так и нуна писать, всё правильно)))

      Ответить
      • Сергей: 22 апреля, 2015 в 20:15

        Спасибо за помощь! И еще вопрос) А из-за чего тогда может меню не отображаться в IE? Показываются обычные ссылки, даже не точно стили не работают, просто ссылки идут друг за другом.

        Ответить
  • Стас: 11 мая, 2015 в 11:06

    У меня почему то меню раскрывается когда нажимаю на + и и то только на главной странице работает, на других нет.
    вот сайт kinotown.ucoz.com

    Ответить
  • Ильдар: 17 мая, 2015 в 23:50

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

    Ответить
    • driver: 18 мая, 2015 в 00:34

      Здравствуйте!
      Меню у вас работает правильно, при нажатии на ссылку меню, происходит переход на заданную страницу(см. адресную строку браузера), а так как куки у вас не запоминаются, меню возвращается в исходное положение, т.е закрытое. Как прикрутить к меню jQuery Cookie, посмотрите в этой статье, в разделе «Меню аккордеон с jQuery Cookie»

      Ответить
      • Ильдар: 20 мая, 2015 в 22:51

        файл jquery.cookie.js установил, путь к файлу прописал, но всё ровно при переходе по ссылке аккордион закрывается. Посмотри пожалуйста сайт, может где-то всё-таки накосячил.

        Ответить
      • Ильдар: 21 мая, 2015 в 01:21

        Установил пятый вариант, работает. Попытался изменить предыдущий вариант, не получается. В первый ul прописал id=”menu”. Скорее всего нужно в CSS файле править. Пока оставлю предыдущий вариант, до разрешения. Если не решится, тогда установлю пятый вариант.

        Ответить
  • Aliiiiiiiiiiii: 23 августа, 2015 в 07:44

    блин не хватает только маркера, нужно что бы маркер переворачивался при открытии пункта меню и разворачивалась при закрытий, пробовал rotate.js выходит не так как надо, подскажите пожалуйста что делать

    Ответить
    • driver: 23 августа, 2015 в 10:41

      Если без счётчика, то примерно так: тынц

      Ответить
  • anonym: 5 октября, 2015 в 17:36

    Можно же переключение классов для первого порядка тега в одну строку написать:
    $(this).toggleClass (‘active’);

    Ответить
  • skupev: 28 октября, 2015 в 18:23

    Здравствуйте ! Изменил .click (function ()
    на:
    .hover (function () . Всё работает, только до менюшек теперь добраться не могу. ОТкрывается при наведении, а как перевожу на пункты меню и закрывается сразу.Не успеваю ни чего сделать. И подскажите, в каком месте поменять фон серого на синий ? Хочется чтоб было под цвет сайта . Спасибо! )

    Ответить
  • skupev: 29 октября, 2015 в 13:23

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

    Ответить
    • driver: 29 октября, 2015 в 18:40

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

      Ответить
    • driver: 29 октября, 2015 в 18:49

      В своё время, по просьбе трудящихся, сделал 5 вариантов такого меню

      Ответить
  • skupev: 30 октября, 2015 в 01:09

    Хотелось что бы было Цифровое обозначение количества ссылок, находящихся в каждом пункте меню . Если это возможно. Как тут. Не поможете ? кусочек кода может нужно для этого?

    Ответить
  • Valerii: 6 ноября, 2015 в 03:24

    driver, спасибо за статью !
    Вопрос который неоднократно уже задавали, как сделать так что бы меню не сворачивалось при переходе на следующую страницу ? Использую html, css, php.

    Ответить
    • driver: 7 ноября, 2015 в 03:39

      Здравствуйте.
      Используйте плагин jQuery.cookie.js Скачиваете, подключаете к странице:
      <script type="text/javascript" src="js/jquery.cookie.js">
      Специально для вас и дабы закрыть вопрос, набросал на скорую руку пример: Тынц
      Пришлось немного переписать плагин меню и изменить css. Исходя из этого примера надеюсь вам будет легче разобраться

      Ответить
  • Valerii: 10 ноября, 2015 в 05:03

    Спасибо большое !

    Ответить
  • Rew: 19 ноября, 2016 в 02:54

    Отличное меню

    Ответить
  • Дмитрий: 1 июля, 2017 в 02:33

    А можно сделать чтобы не закрывалось при перезагрузке страницы? То есть нужно чтобы при переходе по ссылке (такая же перезагрузка страницы) открытый блок меню не закрывался.

    Ответить
  • Anna: 9 марта, 2018 в 23:55

    Здравствуйте. Понимаю, что вопрос звучит глупо, но не могу сменить цвет главных пунктов в меню. Поменя ла red на #ffffff, писала просто white. То ли меняю не там где нужно, то ли не то меняю.

    .mini-menu .sub > ul > li > a:hover,
    .mini-menu .sub > ul > li > a.active {
    background: #d8d8d8;
    color: red;???
    padding-left: 1.3em;
    }

    Ответить
    • driver: 10 марта, 2018 в 07:20

      Здравствуйте, Anna.
      Именно, вы меняете не там где нужно и не то ).
      Найдите селектор .mini-menu > ul > li > a и работайте со свойствами background: (определяет стиль фона), border-bottom: (стиль и цвет нижней границы пунктов), box-shadow: (добавляет тень к элементу), а так же поэкспериментируйте с значениями линейного градиента в свойстве background-image:. Если же вам нужен плоский стиль, градиенты можете вовсе исключить.
      В свойстве color: устанавливаете нужный вам цвет текста пунктов меню.

      Ответить

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

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

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