Доработка виджета произвольного меню

Произвольное меню в WordPress – codex.wordpress.org/Function_Reference/wp_nav_menu – замечательная вещь, любые пункты меню и ссылки в любых сочетаниях и иерархии. Виджет “Произвольное меню” дает еще больше возможностей в организации навигации на сайте. Однако, вывод произвольного меню в сайдбаре осуществляется “как есть”, т.е. применяются, конечно, стили темы, а подпункты, в большинстве случаев, располагаются верно – правее родительского пункта (зависит от темы), но не хватает какого-то взаимодействия с пользователем.

Можно добавить стиль, который позволит открывать подпункты при наведении курсора на пункт меню содержащий подпункты. Для темы Twenty Ten – wordpress.org/extend/themes/twentyten, данное дополнение стилей выглядит так:

.widget_nav_menu .sub-menu {
    display: none; /* Скрываем подпункты */
}
.widget_nav_menu li:hover .sub-menu {
    display: block; /* Отображаем подпункты */
}

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

Подпункты будут раскрываться не при наведении, а при клике на пункт содержащий подпункты, т.е. имеющий вложения, следовательно ссылка родительского пункта окажется не активной. Для реализации потребуется подключенная библиотека jQuery – jquery.com, но она, скорее всего, уже подключена в используемой вами теме.

В файл style.css добавляем стили:

.menu .menu-item {
    margin: 5px; /* Отступы для всех list-item */
}
.menu .sub-menu {
    display: none; /* Скрываем вложенные пункты */
    margin-left: 10px; /* Отступ слева для вложенных list-item */
}?

В шаблон footer.php добавляем скрипт:

<script>
jQuery(document).ready(function() {
    // Выбираем все ссылки из .menu-item имеющего во вложении .sub-menu
    jQuery('.widget .menu-item:has(.sub-menu)').children('a').toggle( 
    function() {
        // Показываем вложенный пункт
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'block');  
    }, function() {
        // Скрываем вложенный пункт
        jQuery(this).parent('.menu-item').children('.sub-menu').css('display', 'none'); 
    });
});
</script>

Если идентификаторы и классы приведенного примера совпадают с идентификаторами и классами вашей темы, а jQuery подключен, то результат должен вас порадовать. Если нет, то исправление не должно оказаться сложным.

Рабочий пример можно посмотреть и попробовать тут – jsfiddle.net/skodnik/LHcU7

Данный скрипт можно дополнить небольшими поясняющими пикторграммками “+” для содержащего подпункты пункта, “-” для раскрытого пункта и т.д.

Обновление от 17.10.2012
Дополнил предложенный выше скрипт функцией позволяющей сохранить форму меню при переходе на внутренние страницы — Доработка виджета произвольного меню [дополнение].

Опубликовано

Обратите внимание на предыдущие записи: