Вертикальное меню аккордеон на 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");
});

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

она отвечает за добавление активного состояния к активному пункту меню, если у вас в цмс использован альтернативный класс, нужно заменить 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/. Также у нас на сайте есть посты: горизонтальное выпадающее меню и вертикальное выпадающее меню.

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

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