Мар

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

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

Итак, если у вас в проекте имеется сложная структура меню со множеством подразделов и страниц в них, то в целях экономии места вполне можно использовать раскрывающийся эффект. Рассмотрим его реализацию для WP с помощью CSS и JavaScript.

Нашел для вас два варианта, хотя, думаю, в сети «подобного добра» гораздо больше. Первый — целиком и полностью связан с WordPress, второй — общая статья про вертикальное раскрывающееся меню на CSS. Главное здесь понять логику и дальше сможете легко их внедрять самостоятельно. Кстати, для сложной горизонтальной навигации советую Max Mega Menu в WordPress со множеством настроек и классных фишек.

Шаг1. Создание меню в админке Wordpress

Об этом я уже когда-то рассказывал процесс предельно прост. Логинитесь в систему и заходите в раздел «Внешний вид» — «Меню». Там добавляете раздел с подпунктами, где для родительского элемента указываете:

Символ » # » в поле URL (для создания меню без ссылки)
Название раздела в поле Текст ссылки.
Класс dropdown в поле Классы CSS.

Если у вас на странице не отображается последний пункт, то в самом ее верху есть закладка «Настройки экрана» (Screen Options). В открывающейся форме при клике нужно будет поставить галочку возле надписи «Классы CSS».

После создания / внесения изменений жмете «Сохранить меню». Выводить его на сайте вы можете с помощью функции wp_nav_menu или виджета «Произвольное меню».

Шаг2. Скрытие подразделов с помощью CSS.

Теперь нужно визуально скрыть подпукнты раздела. Для этого заходим во «Внешний вид» — «Редактор» и выбираем файл стилей вашей темы style.css (или другой). Добавляем код:

.menu .dropdown .sub-menu { display: none; }

Можно его также разместить через настройки темы, если у вас профессиональный шаблон с поддержкой пользовательских стилей (как правило, опция называется Custom CSS в общих настройках темы).

Шаг3. Javascript для раскрывающиеся меню в WordPress

Для продвинутых тем можно использовать настройку Custom Javascript, а в общем случае идем в раздел «Внешний вид» — «Редактор», где открываем файл шапки header.php. Добавляем скритп перед закрывающимся тегом </head>.

<script type="text/javascript">
jQuery(document).ready(function(){
     jQuery('.menu .dropdown a').click(function(e){  
          e.preventDefault();
          if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) {
               jQuery(this).parent().children('.sub-menu:first').hide();
          } else {
               jQuery(this).parent().children('.sub-menu:first').show();
          }
     });
});
</script>

Сохраняем и проверяем работает ли созданное вами раскрывающееся вертикальное меню на вордпресс сайте. Если ничего не происходит, попробуйте еще раз внимательно пошагово выполнить все действия — я код тестировал, все ок. Если не будет работать переход по ссылкам, попробуйте заменить строку:

     jQuery('.menu .dropdown a').click(function(e){

на код:

     jQuery('.menu .dropdown > a').click(function(e){

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

Как и обещал выше, привожу еще один вариант как сделать раскрывающееся вертикальное меню. Оно немного другое по принципу и реализации, плюс здесь будет общий пример на HTML, не связанный конкретно с WordPress. Вы можете применить его для любого сайта. Начинающим разработчикам должно пригодится. Описание метода на английском можете найти тут. Вот как выглядит данное меню.

HTML

Простой HTML код для его внедрения:

<div class="dropdown">
<a class="account" >My Account</a>
 
<div class="submenu">
<ul class="root">
<li><a href="#Dashboard" >Dashboard</a></li>
<li><a href="#Profile" >Profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
 
</div>

CSS

При этом используются следующие CSS стили:

.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
 
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account 
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

Учтите, что пути к картинкам-стрелочкам (icons/arrow.png) могут быть другие + не забудьте сами изображения. В целом оформление раскрывающегося вертикального меню можно представить в виде следующей схемы (для тех, кто не особо хорошо разбирается в отступах).

JavaScript

В JavaScript коде функция $(«.account»).click(function(){} использует класс «account» родительского элемента My Account. С помощью $(this).attr(‘id’) уточняется значение атрибута id, после чего применяется условный оператор для показа подменю .submenu. При этом также меняется значение $(this).attr(‘id’, ‘1’).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
"></script>;
<script type="text/javascript" >
$(document).ready(function()
{
 
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
 
});
 
//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});
 
//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});
 
 
//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>

При клике на странице с помощью $(document).mouseup(function() данное вертикальное раскрывающееся меню на CSS будет скрыто.

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

Оцените статью:

(голосов - 4, средний балл: 4,00 из 7)

Загрузка...

Категории: Возможности;

Теги: javascript, вордпресс веб-разработка, меню и навигация, сниппеты.

комментариев 18 к статье “Простое раскрывающееся вертикальное меню в WordPress”

Валерий 26.03.2016
Очень интересно. Беру на заметку и наверное сделаю у себя на блоге что нибудь подобное. Спасибо!
Вита 11.09.2016
День добрый.
Воспользовалась скриптом. Прекрасно все показывает и прячет. Только вот ссылки в под-меню не работают. То есть, если правым кликом выбрать «открыть в новом окне» и тд, то работает, а просто по клику — нет. Голову сломала, не пойму, где это все «чинить» (((((
Tod 13.09.2016
Вита, неприятный косяк. У автора демки ссылок под меню то нет, удобно ему) Советую поэкспериментировать с z-index (задает очередность слоев). Возможно, поставить побольше z-index на слой, где размещены ссылки под меню. Хотя не исключаю, что автор планировал использовать скрипт для какой-то конкретной задачи и не предусмотрел его сочетание с разными условиями.
Полина 12.02.2017
Tod, я не эксперт, но по-моему z-index не поможет, проблема где-то в preventDefault, т.е. в отключении действия по умолчанию, т.е. перехода по ссылке. Потому что у подменю позиционирование не абсолютное, там по сути разных слоев и нет.
А жаль, мне нужно реализовать как раз такую штуку, и поломка ссылок сильно ограничивает использование, а js я практически не знаю(
Автор, если ты нас слышишь, подскажи пожалуйста, как вернуть переход по ссылке.
Полина 12.02.2017
Ооооооо! Я поняла, как сделать, чтобы работали ссылки в выпадающих подменю, теперь всё работает. Для этого надо вот эту строчку:

jQuery(‘.menu .dropdown a’).click(function(e){

записать следующим образом:

jQuery(‘.menu .dropdown > a’).click(function(e){

тогда выберутся только те ссылки a, которые являются дочерними, т.е. вложенными непосредственно в .dropdown, а не все подряд (кому интересно, подробности гуглите по запросу «дочерние селекторы). Такие дела.
Tod 12.02.2017
Полина, хорошо, что все получилось. Я сначала второй комментарий и не заметил. Если что, в тексте заметки есть ссылка на источник, где можно поискать контакты автора или написать комментарий дабы он «услышал».
Дмитрий 17.04.2017
Добрый день! Спасибо за статью, а как сделать так, что бы при переходе в подпункт меню, само меню не сворачивалось? Не могу найти решения ни где ) На моем сайте меню изначально свернуто, при клике оно раскрывается и при переходе в подпункт меню сворачивается опять..
Tod 17.04.2017
Дмитрий, точный код не подскажу, но это все делается через JavaScript. Скрытие/закрытие, как правило, работает через присвоение соответствующих классов определенным DIV’ам — посмотрите в коде конструкции hide/show. Нужно будет дополнить этот код.
P.S. Вообще, если у вас небольшое меню, то нет особого смысла скрывать подпункты, для юзабилити проще когда все видно, имхо.
Жанна 01.06.2017
А как сделать так ,что б на сам главный элемент меню тоже ссылка работала? Чтоб он не только раскрывался, но и сразу переходил по заданной ссылке?
Tod 01.06.2017
Жанна, попробуйте на первом шаге вместо символа «#» в поле URL добавить ссылку на страницу. Должно сработать.
Евгений 09.02.2018
В чем моет быть проблема — на денвере все нормально работает, прописываю все то же самое на обычном хостинге — либо просто отображает произвольную ссылку и не разворачивается, либо отображает дочерние ссылки сразу в развернутом виде и не сворачивает их.
Tod 09.02.2018
Евгений, я бы сверил HTML код, который генерируется на хостинге и денвере. Вполне возможно какая-то несостыковка по классам.
Как вариант можно закинуть код HTML / CSS / JS в codepen.io и посмотреть будет ли он работать там — если да, то проблема с хостингом в чем-то. Если нет, то либо ошиблись в ходе работы, либо код перестал быть актуальным.
Данной статье несколько лет, я, к сожалению, уже плохо помню все нюансы по ней.
Софья 19.06.2018
Подскажите, пожалуйста, куда вставлять dropdown, если это не основное меню а категории товаров woocommerce, потому как с такой строчкой:
jQuery(‘.widget_product_categories .product-categories > a’).click(function(e) только переходит по ссылкам
а с такой:
jQuery(‘.widget_product_categories .product-categories a’).click(function(e) только создает выпадающее меню при клике
Софья 19.06.2018
нашла, ура заработало, может кому поможет, нужно убрать e.preventDefault();, может кому-то поможет))
Tod 20.06.2018
Софья, спасибо за дополнение статьи, информация пригодится. Не заметил вовремя комментарий)
Владимир 16.10.2018
Подскажите, пожалуйста, возможно ли задать правило для меню, что бы оно не уходило за экран? В сайд баре, в левой части экрана, есть раздел категорий, и при выпадании под категорий они уходят «под экран». Существует ли решение данной проблемы, что бы меню выводилось не вниз от Категории, а занимало все свободное место на экране?(или выводилось вверх)
Tod 16.10.2018
Владимир, тут все ограничивается исключительно вашими познаниями в CSS:) Теоретически, «открытие меню вверх» сделать реально, но если честно, я такого не видел (либо это 1 из 1000 случаев). Вероятно, это не спроста так, и подобная идея — не самая лучшая. Если не хватает места в вертикальном меню, возможно, имеет смысл продумать другую навигацию и структуру — посмотрите конкурентов, попробуйте выпадающее горизональное мега меню.
Иван 31.10.2020
Не скрываются подменю.