Как сделать выпадающее меню wordpress в сайдбаре при наведении jquery + CSS

В интернете довольно много плагинов, скриптов и прочей ерунды для создания красивых выпадающих меню на wordpress. Я хочу предложить вам свой очень простой вариант создания выпадающее меню в сайдбаре wordpress.

Данный пример морально устарел, он будет работать на старых версиях jquery. Советую посетить новый раздел посвященный выпадающим меню у меня на сайте: красивое выпадающее меню, - и выбрать там подходящий пример.

Если быть точным, то это не выпадающее меню, а разъезжающее меню при наведении в сайдбаре wordpress. К сожалению фотография не может передать всех эффектов, но пример выпадающего меню wordpress прикрепляю:

menu-vupad

Что нам потребуется что бы создать jquery выпадающее меню???

Вставка кода вывода меню в wordpress сайдбар:

--------------------------------------------------------------------------------------------------------------

<?php wp_nav_menu( array('theme_location' => 'menu1', 'container'=>false, 'menu_id'=>'menu', 'depth'=>'1', 'echo'=>'1')); ?>

--------------------------------------------------------------------------------------------------------------

Важно: Имя меню menu1 , ИД шник меню menu .

CSS для запрета показа второго уровня ссылок:

--------------------------------------------------------------------------------------------------------------

ul#menu li{display:none;}

--------------------------------------------------------------------------------------------------------------

jQuery для создания выпадающего меню на wordpress:

--------------------------------------------------------------------------------------------------------------

var time=0;
jQuery(document).ready(function(){
 jQuery("#menu > li:not(.actv)").live("mouseover mouseout", function(event){
 if (event.type == 'mouseover'){
 clearInterval(time);
 time=setTimeout(showMenu,400,jQuery(this));
 }else{
 clearInterval(time);
 }
 });
});
function showMenu(XX){
 clearInterval(time);
 jQuery(".actv > ul").slideUp(700);
 jQuery(".actv").removeClass("actv");
 XX.addClass("actv");
 XX.children("ul").slideDown(700);
}

--------------------------------------------------------------------------------------------------------------

 

Идея создания разъезжающего меню очень проста, каждое наведение на ссылку срабатывает после того как пройдет 400 милисекунд. Если до этого мышка ушла со ссылки то функция не срабатывает.

Запишите в wordpress шаблон этот код и вы получите отлично работающее jquery выпадающее меню wordpress. Разъезжающее меню идеально подходит для сайдбара, и может работать на всех устройствах, на которых есть событие :hover.

К сожалению, на устройствах без этого события меню разъезжаться не будет, хотя эту возможность всегда можно доделать.

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

Код jquery выпадающего меню будет вот такой:

--------------------------------------------------------------------------------------------------------------

jQuery(document).ready(function(){
 jQuery("#menu > li:not(.actv) > a").live("click", function(){showMenu(jQuery(this).parent("li")); return false;});
});
function showMenu(XX){
 jQuery(".actv > ul").slideUp(700);
 jQuery(".actv").removeClass("actv");
 XX.addClass("actv");
 XX.children("ul").slideDown(700);
}

--------------------------------------------------------------------------------------------------------------

Задавайте свои вопросы и предложения по jQuery выпадающее меню wordpress.

Если вам нужно сверстать сайт или просто сверстать меню смотрите раздел сколько стоит сверстать сайт или пишите мне вот  сюда

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

Комментарии к записи «Как сделать выпадающее меню wordpress в сайдбаре при наведении jquery + CSS»:
  1. Irisha:

    Прикольный способ сделать выпадающее меню без изменений классов и кода ВП.
    Большое спасибо.

Сделать заказ
Онлайн помощь по WordPress