Wordpress Nav с пользовательским стилем подменю

Question

Мне нужно установить довольно странную систему навигации для сайта на Wordpress.Вот пример кода:

<nav>
    <ul>
        <li><a href="">Parent Menu</a>
        <div class="dropdown">
            <div class="inner-menu-item">
                <dl>
                    <dt>Title tag for the sub-menus below</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>

                    <dt>Title tag for another sub-menu</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>
                </dl>
            </div>
        </div>
        </li>

        <!-- similar structure as above -->
        <li><a href="">Parent Menu</a>
        <div class="dropdown">
            <div class="inner-menu-item">
                <dl>
                    <dt>Title tag for the sub-menus below</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>

                    <dt>Title tag for another sub-menu</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>
                </dl>
            </div>
        </div>
        </li>
    </ul>
</nav>

Каким должен быть лучший подход для написания кода Wordpress Nav для вышеуказанной установки?Было бы здорово, если бы у меня была возможность исключить некоторые пункты меню.

Я в порядке с альтернативными методами, где мне нужно изменить CSS, мне это довольно удобно.Например, упаковка внутри нескольких UL> LI вместо DIV и DL> DD.

Answer 1

1. Используйте функцию [wp_nav_menu] 1 для создания меню. Использование этого сэкономит вам много усилий и должно быть хорошей практикой в ​​WordPress.

2. У вас будет такая структура:

   <div id="menu-wrapper">
     <ul id="menu">
       <li id="menu-item-1">
         <a href="your-page-1">Title</a>
         <ul class="sub-menu">
          <li><a href="some-other-page">Title 2</a></li>
          <li><a href="some-other-page">Title 2</a></li>
         </ul>
      </li>
    </ul>
   </div>
   

3. Вы можете настроить эту структуру, унаследовав Walker_Nav_Menu и передав новый экземпляр класса wp_nav_menu.

Answer 2

ИМХО указанная вами разметка не выглядит семантической. Вместо этого вы можете использовать ul / li. Подумайте об этом с точки зрения поисковой системы, удалив CSS с помощью панели инструментов веб-разработчика. Вы также можете обратиться к w3c . Я пишу, так как у вас есть права на изменение разметки.

В Wordpress есть опция меню на вкладке «Внешний вид», которую вы можете использовать для настройки иерархии. Это даст вам неупорядоченный список. Все, что остается сейчас, - это работа с CSS.

Вот отличная ссылка, которая поможет вам получить правильный CSS. Посмотрите на this для помощи по CSS.

Answer 3

Все просто. Используйте WP menu, а затем назначьте класс меню, которое имеет только заголовок. Установите местоположение на # и измените тип курсора для этого класса, используя CSS.

Кроме того, классы div могут быть удалены, а свойства CSS могут быть переданы Ul и LI внутри первого UL LI