WordPress.org

Make WordPress Core

#19297 closed enhancement (worksforme)

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

Reported by: egorpromo Owned by:
Priority: normal Milestone:
Component: Template Version: 3.3
Severity: normal Keywords:
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 ocean9019 months 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 egorpromo19 months 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 19 months ago by egorpromo (previous) (diff)

comment:3 nacin19 months 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.