Мар
25
6

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

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

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

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

Шаг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>

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 3, средний балл: 5,00 из 7)
Загрузка...

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

комментариев 6 к статье “Простое раскрывающееся вертикальное меню в 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

    Полина, хорошо, что все получилось. Я сначала второй комментарий и не заметил. Если что, в тексте заметки есть ссылка на источник, где можно поискать контакты автора или написать комментарий дабы он «услышал».

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


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

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

Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

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

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

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