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!

CommentFileSizeAuthor
#1 navig.jpg9.37 KBJirkaRybka

Comments

JirkaRybka’s picture

StatusFileSize
new9.37 KB

My 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:

.block-user .content ul.menu ul
  { border-color: #689046 #F8FFD6 #F8FFD6 #689046; background-color: #B8E096; }

.block-user ul.menu ul.menu ul
  { border-color: #588036 #E8FFC6 #E8FFC6 #588036; background-color: #A8D086; }

.block-user ul.menu ul.menu ul.menu ul
  { border-color: #487026 #D8FFB6 #D8FFB6 #487026; background-color: #98C076; }

.block-user ul.menu ul.menu ul.menu ul.menu ul
  { border-color: #386016 #C8F0A6 #C8F0A6 #386016; background-color: #88B066;}

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 :-)

cfennell’s picture

Ah! Thanks, this is very helpful - it's so easy to overlook these sorts of CSS tricks before going server-side. Thanks again!

ardi1983’s picture

Very very very helpful ;). Nice solution I was trying to find server side solution :D like libsys

lilou’s picture

Category: feature » support
Status: Active » Fixed
Anonymous’s picture

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.