Opened 13 years ago
Closed 13 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)
#2
@
13 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 and in some cases taking html tag by its class is the simplest and correct solution.
#3
@
13 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.
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.