Как улучшить произвольное меню в боковом виджете?

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

И вот, я решил поискать решение в интернете.

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

Но минусом данного решения является то, что всё меню, каким бы длинным оно не было, придется делать вручную. Я даже сначала запасся оптимизмом и стал было писать длинный html код в боковом сайдбаре. Но, вовремя одумался и вспомнил, что на дворе 21 век, и автоматизация всех процессов — давно облегчает людям жизнь! 🙂

В итоге, я вернулся в поисковые системы и решил узнать — как можно улучшить произвольное меню в боковом сайдбаре? Решение было найдено, как оно работает можете прямо сейчас посмотреть в моем боковом сайдбаре. Теперь мое меню раскрывается и закрывается на один уровень, и при этом, делать его нужно, как и положено, при помощи панели управления -> внешний вид -> меню. Проще говоря, обычное меню созданное с помощью произвольных ссылок.

Как же я добился такого результата спросите Вы? Оказывается, всё не так сложно, решение нашлось благодаря Евгению [2]. Для его реализации понадобилось несколько минут работы! Вот это действительно замечательно! 🙂

Ну, я так обрадовался, что забыл рассказать — как же виджет произвольного меню можно изменить и улучшить. Я добавил в файл своей темы style.css следующие строки:

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

<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'); 
    });
    // Раскрываем родительский пункт меню если активна дочерняя страница
    jQuery('.current-menu-item').parent('ul').css('display', 'block');
});
</script>

Сохраняю страницу, обновляю свой блог и вижу результат! Да-да, больше ничего делать не надо, уже всё должно работать, если у Вас не работает, то нужно сопоставить указанные стили со стилями вашей темы. Это сделать не сложно — открыть исходный код просматриваемой страницы блога и найти код виджета произвольного меню, и поглядеть какие стили там применяются.

На этом я заканчиваю данную статью, если у Вас будут вопросы  и замечания — комментируйте на здоровье, будем искать истину сообща!

UPD: По просьбам трудящихся расскажу, как я добавил традиционную армянскую нумерацию к своему виджету произвольного меню. 🙂 Я просто добавил пару строк в файл style.css. Синтаксис list-style-type можно посмотреть здесь:

.menu .menu-item {
    margin: 5px; /* Отступы для всех list-item */
    display: list-item
    list-style-image: none;
    list-style-type: armenian;

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

Кстати, если кто-то из Вас имеет блог SEO или схожий тематике моего блога — приглашаю Вас в свое сообщество в гугл плюс — Блог на WordPress своими руками. Нас там уже 240 человек, и это в основном наши коллеги. Правила сообщества позволяют любому автору афишировать свои статьи на тему создания блога на вордпресс и тему SEO для всех участников. Которые, как Вы понимаете, являются очень даже целевой аудиторией! Короче говоря, приглашаю и Вас делиться  с нами своими находками и статьями! 😉

А у нас по прежнему на острове Ко Ланта незабываемые закаты, вот так выглядел закат сегодня. Желаю Вам максимально комфортно оптимизировать Вашу жизнь! 🙂

В написании статьи использованы следующие материалы:
[1] — Страница WordPress. Раскрывающиеся списки
[2] — Доработка виджета произвольного меню