Opened 19 months ago
Closed 19 months ago
#19297 closed enhancement (worksforme)
Add new parameters to wp_nav_menu() and customize output this function
| Reported by: |
|
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:2
egorpromo
— 19 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.
comment:3
nacin
— 19 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.
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.