Вертикальное меню аккордеон на jQuery по клику

Всем привет, вот и дошли руки до написания поста на тему вертикальное меню аккордеон. Судя с комментариев, эта тема интересная многим начинающим программистам. Сегодня в нашем меню мы будем использовать javascript и библиотеку jQuery + Html и CSS. Раскрывающееся вертикальное меню будет в стиле аккордеон, которое открывается по клику. Данный тип менюшек наиболее затребован при разработке сайта.

Возможно вы хотели посмотреть все выпадающее меню на этом сайте, тогда перейдите по ссылке.

Навигация по странице:

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

  • С точки зрения пользователя, раскрывающееся меню несут как позитивные так и негативные моменты.

    К позитивным можно отнести:

    • сайт выглядит более красиво и дороже;
    • наличие всех ссылок на одной странице;
    • группировку ссылок в отдельные блоки.

    К негативным:

    • утрудненное юзабилити (нужно совершить больше действий, чтоб найти нужную ссылку);
    • возможна путаница в меню, если не знаешь в какой группе искать;
    • иногда трудно понять что это меню аккордеон.

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

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

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

 

Простое вертикальное меню аккордеон

к менюДля начала, нам потребуется нехитрый HTML код для построения вертикального меню. Выглядит он будет вот так:

<nav id="menuVertical">
    <ul>
        <li><a href="#m1">Первая услуга</a>
            <ul>
                <li><a href="#m1_1">Выпадашка 1</a></li>
                <li><a href="#m1_2">Выпадашка 2</a></li>
            </ul>
        </li>
        <li class="current-menu-item"><a href="#m2">Вторая услуга</a>
            <ul>
                <li><a href="#m2_1">Выпадашка 1</a></li>
                <li><a href="#m2_2">Выпадашка 2</a></li>
                <li><a href="#m2_2">Выпадашка 3</a></li>
            </ul>
        </li>
        <li><a href="#m3">Третья</a>
            <ul>
                <li><a href="#m3_1">Выпадашка с третьей услуги 1</a></li>
                <li><a href="#m3_2">Выпадашка с третьей услуги 2</a></li>
                <li><a href="#m3_3">Краткая выпадашка</a></li>
                <li><a href="#m3_4">Краткая выпадашка</a></li>
                <li><a href="#m3_5">Краткая выпадашка</a></li>
            </ul>
        </li>
        <li><a href="#m4">4 услуга</a>
            <ul>
                <li><a href="#m4_1">111111</a></li>
                <li><a href="#m4_2">2222 2222</a></li>
            </ul>
        </li>
        <li><a href="#m5">5 услуга</a>
            <ul>
                <li><a href="#m5_1">111111</a></li>
                <li><a href="#m5_2">2222 2222</a></li>
                <li><a href="#m5_3">2222 2222</a></li>
            </ul>
        </li>
    </ul>
</nav><!--menuVertical-->
Развернуть весь код

Это само меню, оно идеально подходит под вывод меню в WordPress. Также нам нужно не забыть подключить библиотеку jquery к нашему хтмл документу. В примере я это делаю вот так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Хотя существуют и другие способы подключения. Например в вордпресс, эта библиотека javascript подключается по умолчанию и эта строчка будет лишней.

Наше вертикальное меню аккордеон имеет класс current-menu-item который отвечает за показ пункта меню в развернутом вида, когда открыта нужная страница. Если ваша CMS делает другие классы для активных пунктов меню не строить расстраиваться, я покажу в CSS и JavaScript места, где нужно внести изменения.

Готовый пример вы сможете скачать чуть ниже.

CSS для меню аккордеон

к менюДалее нам нужно написать стили CSS для создания меню аккордеона. Ничего сложного, главное понимать что у нас получится в итоге.

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

Раскрывающееся вертикальное меню аккордеон CSS:

#menuVertical{width:100%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
        background:#3A9CD3;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul  li:first-child a{border:0px;}
            #menuVertical > ul > li > a:hover, #menuVertical > ul > li.act > a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                display:none;
                margin:0px;
                padding:4px 0px 5px 30px;
                box-sizing:border-box;
                border-left:3px solid #3A9CD3;
                border-right:3px solid #3A9CD3;
                border-bottom:2px solid #3A9CD3;
            }
            #menuVertical ul li.act ul{border-color:#0A3CC1;}
                #menuVertical ul li ul li{
                    height:auto;
                    width:100%;
                    padding:0px 0px 4px 0px;
                }
                #menuVertical ul li ul li::before{
                    position:absolute;
                    left:-14px;
                    top:9px;
                    width:5px;
                    height:5px;
                    border-radius:5px;
                    display:block;
                    background:#0A3CC1;
                    content:" ";
                }
                #menuVertical ul li ul li a{
                    display:inline;
                    text-transform:none;
                    border:0px;
                    padding:0px;
                    margin:0px;
                    background:none;
                }
                    #menuVertical ul li ul li a:hover{
                        background:none;
                        color:#0A3CC1;
                    }
            /*******показываем выпадашку сразу, если пункт меню открыт ********/
            #menuVertical ul li.current-menu-item ul{display:block;}
Развернуть весь код

Внимательно смотрим на последнею строчку, там есть current-menu-item, если ваша цмс использует другое имя класса, для подсвечивания активного пункта, нужно заменить на свое имя.

Раскрывающееся меню аккордеон JavaScript & jQuery

к менюДля создания нашего меню нам потребуется создать и подключить файл javascript. Код этого файла будет отвечать за добавления события клик (onclick) по пункту меню.

Вот собственно код:

$=jQuery;
$(document).ready(function(){
$("#menuVertical > ul > li > a").on("click", function(){
var XX=$(this).parent("li");
if(!XX.hasClass("act")){
$("#menuVertical > ul > li.act > ul").slideUp(500);
$("#menuVertical > ul > li.act").removeClass("act");
XX.addClass("act");
XX.children("ul").slideDown(500);
}
return false;
});
$("#menuVertical > ul > li.current-menu-item").addClass("act");
});

Опять обращаю ваше внимание на предпоследнею строчку

$("#menuVertical > ul > li.current-menu-item").addClass("act");
она отвечает за добавление активного состояния к активному пункту меню, если у вас в цмс использован альтернативный класс, нужно заменить current-menu-item.

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

раскрывающееся вертикальное меню

Демо просмотр вертикальное меню аккордеон

Демо просмотр
Скачать пример

 

Красивое раскрывающееся вертикальное меню

к менюВ качестве красивого меню аккордеон хочу показать вам вот такой пример (смотрите кликабельный скин ниже):

вертикальное меню аккордеон

В этом примере будет использован немножко другой html и css  код, но в целом принцип работы меню не изменен.

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

Хтмл код этого меню:

<div class="vMenu">
    <div class="h1">Автомобили</div>
    <ul>
        <li><a href="#">Внедорожники</a>
            <ul>
                <li><a href="#">Lada 2121</a></li>
                <li><a href="#">Nissan Patrol</a></li>
                <li><a href="#">Mitsubishi l200</a></li>
                <li><a href="#">Toyota Hilux</a></li>
            </ul>
        </li>
        <li class="current-menu-item"><a href="#">Минивэны</a>
            <ul>
                <li><a href="#">Renault Kangoo</a></li>
                <li><a href="#">Citroen Berlingo</a></li>
                <li><a href="#">Volkswagen Caddy</a></li>
            </ul>
        </li>
        <li><a href="#">Легковые</a>
            <ul>
                <li><a href="#">Lada 2170</a></li>
                <li><a href="#">Volkswagen Golf</a></li>
            </ul>
        </li>
    </ul>
</div><!--vMenu-->
Развернуть весь код

У WordPress нужно заменить основной ul блок на вызов функции меню.

CSS код для этого раскрывающегося вертикального меню будет вот такой:

.h1{position:relative; display:block; margin:0px; padding:9px 0px; font-size:26px; text-transform:uppercase; font-weight:bold; color:#326498;}
.vMenu{
    width:100%;
    height:auto;
    padding:32px 0px 1px 0px;
    background:url(img/menu-side-2-top.png) 0px 0px / 100% 534px no-repeat,url(img/menu-side-2-mid.png) 0px 0px repeat-y;
    border-radius:0px 0px 8px 8px;
    overflow:hidden;
    box-sizing:border-box;
}
    .vMenu .h1{color:#ffffff; padding-left:21px;}
    .vMenu ul{
        display:block;
        margin:0px;
        padding:0px;
        list-style:none;
    }
        .vMenu > ul > li:first-child{border:0px;}
        .vMenu ul li{
            display:block;
            margin:0px;
            padding:0px;
            border-top:1px solid #777777;
        }
            .vMenu ul li a{
                display:block;
                padding:10px 7px 11px 47px;
                background:url(img/vmenu-li.png) 21px 12px no-repeat;
                text-transform:uppercase;
                font-size:16px;
                font-weight:bold;
                color:#ffffff;
                text-decoration:none;
            }
            .vMenu ul li a:hover{background-color:rgba(0,0,0,0.40);}
            .vMenu > ul > li.act > a{background:url(img/vmenu-li.png) 21px -38px no-repeat rgba(0,0,0,0.4);}
                .vMenu ul li li a{
                    padding:7px 7px 8px 47px;
                    background:url(img/vmenu-li-li.png) 28px 16px no-repeat;
                    text-transform:none;
                    font-size:16px;
                    font-weight:normal;
                    color:#ffffff;
                    text-decoration:none;
                }
                .vMenu ul li li a:hover, .vMenu ul li li.current-menu-item a{background:url(img/vmenu-li-li.png) 28px -34px no-repeat, url(img/vmenu-li-a-act.png) 0px 100% repeat-x #ffffff; color:#333333;}
            .vMenu ul ul{display:none;}
            .vMenu ul li.current-menu-item ul, .vMenu ul li.current-menu-parent ul{display:block;}
Развернуть весь код

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

В этом примере есть 2 класса current-menu-item и current-menu-parent которые в вордпресс отвечают за текущий активный пункт меню и активный родительский соответственно. Если вы используете CMS отличную от wordpress вам нужно заменить эти классы.

Ну и яваскрипт будет выглядеть вот так:

$=jQuery;
$(document).ready(function(){
    $(".vMenu > ul > li > a").on("click", function(){
        var XX=$(this).parent("li");
        if(!XX.hasClass("act")){
            $(".vMenu > ul > li.act > ul").slideUp(500);
            $(".vMenu > ul > li.act").removeClass("act");
            XX.addClass("act");
            XX.children("ul").slideDown(500);
        }
        return false;
    });
    $(".vMenu > ul > li.current-menu-item, .vMenu > ul > li.current-menu-parent").addClass("act");
});

 

Более детально можете посмотреть меню аккордеон в демо просмотре или скачав пример по ссылке ниже:

Демо просмотр
Скачать пример

 

На этом у меня пожалуй что все. Если вы не нашли на этой странице то что искали советую посетить общий раздел для выпадающих меню https://help-wp.ru/vypadayushhee-menu/. Также у нас на сайте есть посты: горизонтальное выпадающее меню и вертикальное выпадающее меню.

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

Если примеры были вам полезны поделитесь ссылкой со своими друзьями в соц. сетях

Комментарии к записи «Вертикальное меню аккордеон на jQuery по клику»:
  1. Ника:
    15.01.2017 в 23:05

    Привет. Довольно интересное решение, проверила последнею демку на телефоне - прикольно работает. Буду пробовать к себе на сайт ставить, спасибо.

    Ответить
  2. Серега:
    02.07.2016 в 09:11

    привет. очень хотел поставить твое меню на (-url-) одно из примеров не работает. провозился всю ночь. единственное не знаю как прописать библиотеку. прописал вот так в самом файле над стилями: $=jQuery;
    $(document).ready(function(){
    $("#menuVertical > ul > li > a").on("click", function(){
    var XX=$(this).parent("li");
    if(!XX.hasClass("act")){
    $("#menuVertical > ul > li.act > ul").slideUp(500);
    $("#menuVertical > ul > li.act").removeClass("act");
    XX.addClass("act");
    XX.children("ul").slideDown(500);
    }
    return false;
    });
    $("#menuVertical > ul > li.current-menu-item").addClass("act");
    }); все равно рабтать меню не хочет. дружище помоги пожалуйста! за раннее очень благодарен.

    Ответить
    • admin:
      03.07.2016 в 22:07

      Привет.
      А пример скачивал? все примеры рабочие, только что проверил. Если проблема в этом $=jQuery; то можно писать вместо знака доллара это jQuery или взять в функцию:

      (function( $ ) {
      .... код
      })(jQuery);

  3. СЕО:
    02.03.2016 в 17:55

    +1 за реализацию. Ждемс новых примеров.

    Ответить
Сделать заказ
Онлайн помощь по WordPress