WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

#19297 closed enhancement (worksforme)

Add new parameters to wp_nav_menu() and customize output this function

Reported by: egorpromo Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.3
Component: Template Keywords:
Focuses: Cc:

Description

In some cases menu that generated by wp_nav_menu() must have accurate class naming. Now I can see all sub-menus (<ul>) have the same class "sub-menu". And all li-items (<li>) have the same class "menu-item".
I propose to use different names for all sub-menus depending of its level in depth. That can be made by add new options to wp_nav_menu() function to customise output by theme developers or simple create different classes for sub-menus in core of this function.

Below I write example where all ul-tags have names depending of its level and all li-tags have names depending of its level:

<div class="menu-container">
<ul class="menu">
   <li class="menu-item><a href="google.ru">google.com</a>
      <ul class="sub-menu">
         <li class="sub-menu-item"><a href="google.com/dir1">google.com/dir1</a></li>
      </ul>
   </li>
   <li class="menu-item"><a href="http://yahoo.com">yahoo.com</a>
      <ul class="sub-menu">
         <li class="sub-menu-item"><a href="yahoo.com/dir1">yahoo.com/dir1</a>
            <ul class="sub-sub-menu">
               <li class="sub-sub-menu-item"><a href="yahoo.com/dir1/dir2">yahoo.com/dir1/dir2</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>

I suppose this option will help html developers to create simple, beautiful and cross browser Cascading Style Sheets (CSS) and create simple dropdown menus on Javascript.

Change History (3)

comment:1 ocean902 years ago

I don't know which one is better, sub-sub-sub-sub-menu-item or something like {{{li li li li}}, but I would prefere the second one.

comment:2 egorpromo2 years ago

Maybe make it in simple way like "menu-level-1", "menu-level-2", "menu-level-3" for <ul> and "menu-item-level-1", "menu-item-level-2", "menu-item-level-3" for <li>.
I use Javascript for dropdown menus and in some cases taking html tag by its class is the simplest and correct solution.

Last edited 2 years ago by egorpromo (previous) (diff)

comment:3 nacin2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

These classes can be modified by plugins, so you're welcome to do this on your own.

As ocean90 said, using a JS library that can do CSS-based selections (i.e. Sizzle/jQuery) will be plenty for JS targeting. If you want a third-level menu, try ul.menu > li> ul > li > ul> li. Or even just ul.menu li li li for anything level 3 or deeper.

Closing as worksforme, as the current markup supports the vast majority of use cases, and it can be modified by a plugin.

Note: See TracTickets for help on using tickets.