Возможно вы хотели посмотреть все выпадающее меню на этом сайте, тогда перейдите по ссылке.
Навигация по странице:
Начнем пожалуй с того, что выясним зачем нам нужно делать вертикальное меню аккордеон и какие его преимущества и недостатки.
Делать или не делать выпадающее меню, это ваше решение, моя ж задача показать вам способы создания меню аккордеонов.
к менюДля начала, нам потребуется нехитрый 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:
#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. Код этого файла будет отвечать за добавления события клик (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");
Ну на этом собственно и все, наше простое меню аккордеон готово. Ниже вы можете посмотреть скриншоты, демо, а также скачать пример. (Смотрите кликабельный скин)
к менюВ качестве красивого меню аккордеон хочу показать вам вот такой пример (смотрите кликабельный скин ниже):
В этом примере будет использован немножко другой 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/. Также у нас на сайте есть посты: горизонтальное выпадающее меню и вертикальное выпадающее меню.
Следите за этим постом, периодически я буду добавлять сюда новые меню.
Если примеры были вам полезны поделитесь ссылкой со своими друзьями в соц. сетях
Отлично, спасибо!
Спасибо за меню!
Установил первый вариант (выпадает вправо).
Но есть проблема, выпадашка прячется под контент (слайдер), как это исправить, я не понял(
Буду рад за подсказку.
Привет. Довольно интересное решение, проверила последнею демку на телефоне - прикольно работает. Буду пробовать к себе на сайт ставить, спасибо.
привет. очень хотел поставить твое меню на (-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");
}); все равно рабтать меню не хочет. дружище помоги пожалуйста! за раннее очень благодарен.
+1 за реализацию. Ждемс новых примеров.
Спасибо.Все запустилось с первого раза,хорошая работа