I ran into a situation a while back where I need to style menu link items differently depending on how far away they were from the menu root item. That is to say, the designer wanted top level links to look a certain way and everything else to look differently.
I solved this immediate problem by overriding some of the menu theming functions: in hook_menu_item I checked to see if a given menu item's parent was “0” (ie whether or not it was a top level item) - if so, bam, I stuck in the "level_1" class – if not, bam, it got "level_2." Ex:
About Us Section
* About Our Staff (class="level_1"...)
** Staff by Department(class="level_2")
** Staff A-Z (class="level_2")
** Depressed Staff (class="level_2")
This approach obviously only addresses two levels of menu items. When my designer comes back with a need to style level three items, I'm hosed.
It would be great (for me) if menu items simply had an out-of-the-box feature that added a class with a delta that was relative to the given menu's root item. I can see how this might require a rather icky recursive set of queries, given the current practice. Maybe that sort of thing has kept such a feature from moving forward. In any case, functionally, this is what I would love to see.
Thanks!
| Comment | File | Size | Author |
|---|---|---|---|
| #1 | navig.jpg | 9.37 KB | JirkaRybka |
Comments
Comment #1
JirkaRybka commentedMy navigation menu have a similar thing working (only 5 levels, but more will be easy if needed), on unchanged 5.x - worked on 4.7.x too - done only by theme's CSS. It goes like this:
There's a bit more (margins, pictures), but basically this is the whole trick: Each of the lines have more specific selector with more 'ul' levels, overriding any above levels and so creating the sub-level effect without any extra classes.
CSS is powefull :-)
Comment #2
cfennell commentedAh! Thanks, this is very helpful - it's so easy to overlook these sorts of CSS tricks before going server-side. Thanks again!
Comment #3
ardi1983 commentedVery very very helpful ;). Nice solution I was trying to find server side solution :D like libsys
Comment #4
lilou commentedComment #5
Anonymous (not verified) commentedAutomatically closed -- issue fixed for two weeks with no activity.