Мар
25
18

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

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

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

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

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

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

Создание меню в админке WordPress

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

Классы для меню в WordPress

После создания / внесения изменений жмете «Сохранить меню». Выводить его на сайте вы можете с помощью функции 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. Вы можете применить его для любого сайта. Начинающим разработчикам должно пригодится. Описание метода на английском можете найти тут. Вот как выглядит данное меню.

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

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)
Загрузка...

категория Категории: Возможности;
теги Теги: , , , .

комментариев 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

    Не скрываются подменю.

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


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости