By Metusela on

I am working on a theme were there I want a difference between the two levels I have in the menu. But what I can see from the html output the classes for for these parts of the menu are the same. So I can't theme them separately.

This is a very simplified view of the code as it works now.

<ul class="menu">                                                       <--- Menu starts
    <li class="menu-item">Menu Item 1</li>
    <li class="menu-item">Menu Item 2</li>
    <li class="menu-item-expanded">Menu Item 3</li>
        <ul class="menu">                                               <--- Submenu starts
            <li class="menu-item">Sub Menu Item 1</li>
            <li class="menu-item">Sub Menu Item 2</li>
        </ul>
    <li class="menu-item">Menu Item 4</li>
    <li class="menu-item">Menu Item 5</li>
</ul>

This is how I want it to be.

<ul class="menu">                                                       <--- Menu starts
    <li class="menu-item">Menu Item 1</li>
    <li class="menu-item">Menu Item 2</li>
    <li class="menu-item-expanded">Menu Item 3</li>
        <ul class="submenu">                                           <--- Submenu starts
            <li class="menu-item">Sub Menu Item 1</li>
            <li class="menu-item">Sub Menu Item 2</li>
        </ul>
    <li class="menu-item">Menu Item 4</li>
    <li class="menu-item">Menu Item 5</li>
</ul>

I've seen here (http://drupal.org/node/299157#comment-977822) a solution were some html is put into the theme function for the menu. So my guess id that it's somewhere here I should set the classes. But I don't know how exactly.

⋅ Categories: Drupal 5.x

Comments

Metusela’s picture

Metusela commented

I found a solution for this.

Instead of trying to add more classes i was able to select and define the sub menu with css.

This selects all list items in the unsorted list with the class "menu"
ul.menu li { }

This selects all list objects in the unsorted list with the class "menu" that is found within the unsorted list with the class "menu"
ul.menu ul.menu li { }

So my css for the menu looks like this:

  ul.menu li
  {
  margin: 1em 0 0 0;
  padding: .6em;
  background: url(images/tranparens.png);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  }

  ul.menu ul.menu li
  {
  margin: 0 0 0 0;
  padding: .6em 0 0 .6em;	
  background: none;
  font-family: Verdana, Tahoma, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
  font-size: 14px;
  font-weight: normal;
  }

The thing to remember with this method is to over ride everything that shouldn't be inherited by the parent menu list. In this case I don't want any background for the submenu since this is already set in the parent menu list. To achieve this put background: none;

Marko B’s picture

Marko B commented

nice one, helped me also. i suppose this was the logic that it was behind but only wasnt explained anywhere to inexpirienced.

Adriadrop Drupal development