By ridolfidesigns on

I am trying to make it so my menus are set up like this:

<ul class="menu">
   <li>something goes here</li>
   <li>something goes here</li>
   <li>something goes here
      <ul class="different-class">
         <li>something goes here</li>
         <li>something goes here</li>
      </ul>
   </li>
</ul>

My question is, how do you change the class on the child menu to be different than the class on the parent menu. I know how to change the parent already.

Thanks,

Eric

⋅ Categories: Drupal 6.x

Comments

styro’s picture

styro commented

The top level menu can be styled with:

ul.menu { ... }

and then the child menu styling can be overridden with:

li.expanded ul.menu { ... }

You shouldn't need custom classes to target the child menus.

Jeff Burnz’s picture

Jeff Burnz commented

Yeah, I never understand why anyone needs to add extra classes, unless you are styling every link differently, this is a snippet from a menu I was working on yesterday, it has it all by default:

<ul class="menu">
  <li class="leaf first"> </li>
  <li class="collapsed"> </li>
  <li class="expanded active-trail"> 
    <ul class="menu">
      <li class="collapsed first"> </li>
      <li class="collapsed"> </li>
      <li class="expanded active-trail"> </li>
    </ul>
  </li>
</ul>

As you can see the selectors are all there to use.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
dman’s picture

dman commented

It would still be useful for some themes to know the depth of some menu rendering.
I've had to set, then unset, then reset, some menu themes through css which became horrid - mainly because we couldn't trust class > subclass css selectors in browsers.
I agree that we can do it with well-crafted css. Still, sometimes I just want to say .menu-item-depth-3 and could not do that directly without either layering css on or totally hijacking the menu render functions. I've done both.

Most full-conversion themes I've done had to do one or the other.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

Jeff Burnz’s picture

Jeff Burnz commented

.menu-item-depth-3? Jeff says, hell yes! That would make the nested inferno a little easier to grok.

There's always this module http://drupal.org/project/menu_attributes but a core patch seems appealing...

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.