Простое выпадающее меню на css (CSS Drop Down Menu)

Поставил себе задачу сделать простейшее горизонтальное выпадающее меню исключительно с помощью css стилей, связываться с плагинами равно как и с jQuery не хотелось, чтобы не усложнять себе задачу и облегчить максимально мою тему Golden ratio.
Сразу как-то не заладилось у меня с css, разработчики WordPress добавили все мыслимые классы в меню, но самое главное естественно забыли: во первых отметить элемент li, который имеет потомков добавив ему класс parent, во вторых просто прописать уровень вложенности меню depth0, depth1, depth2 …
Но не тут то было. Нам оставили возможность подключить фильтр strong>nav_menu_css_class и добавить для каждого элемента свой нужный нам класс, но и тут полный облом – в этот фильтр передаются массив уже присвоенных классов и сам элемент однако толку от этого элемента = 0 . В отрыве от общей структуры меню ничего неизвестно ни о его потомках ни об уровне элемента. Рассчитывать все эти данные самостоятельно имея в наличии только id элемента – себе дороже будет. Кстати просматривая коды всех эти Walker_Nav_Menu, Walke создается впечатление что разработчики ну просто забыли добавить столь нужные классы ведь вот, вот они эти данные прямо тут, рукой достать можно и не надо ничего вычислять лишнего – глубина постоянно передается из одной функции в другую, но почему-то только не в фильтр nav_menu_css_class, примерно тоже самое и с массивом потомков. Эх ладно, быть может я вижу вообще все в неправильном CSS?

Далее описываю свой способ извращения.

Задача:

добавить для каждого элемента li из горизонтального меню классы -
parent – для тех ли у которых есть подменю
depthX – глубина, где X уровень вложения

Решение:

В function.php вашей темы добавляем:

Теперь печатем меню в header.php

Проверяем если меню задано пользователем выводим его если нет выводим список страниц.
Обратите внимание подставляется новый обработчик Walker !

Примерный css код может быть такой

#menu-header-menu – корневой элемент ul вашего меню если что помень его на свой
Гребаный IE! есесено все покажет по своему – псевдо класс after эта гадина игнорирует и придется родительские пункты обозначить просто жирным шрифтом:

Комментарии 3 к “Простое выпадающее меню на css (CSS Drop Down Menu)”

  1. Венера:

    Доброй ночи.
    Нашла Вашу статью через яндекс. Сейчас в ВП этот функционал есть, но обнаружился баг, который никак не могу обойти. Если меню имеет больше 2-х уровней, то на странице записи самому верхнему родителю не присваивается класс current.
    Меню у меня такое: произвольная ссылка>>рубрика>>ее подрубрика.

    Пытаюсь найти код, чтобы узнать какие классы есть у потомков, и если там есть current – присвоить его верхнему родителю.
    Можете ли Вы мне что-нибудь подсказать?

  2. admin:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> [php]…[/php] [html]…[/html] [css]…[/css] [text]…[/text] [code]…[/code]