CODEWITHSUNDEEP
menudrupal-7
HoverPhoenix
HoverPhoenix

Reputation: 177

Drupal: How to add custom class to child <ul> in main menu tree

I searched and found an exact question at https://drupal.org/node/1178784 but the answer there does not work.

I am using Drupal 7 to build a website. Inside, I have a main menu which may / may not have another menu. I want the parent main menu has different class than the children menu.

Basically, this is the HTML I have now:

<ul class='menu'>
 <li>
  <a>first</a>
  <ul class='menu'>
   <li>
    <a>sub-item</a>
   </li>
  </ul>
 </li>
</ul>

and I want to make it like this:

<ul class='menu'>
 <li>
  <a>first</a>
  <ul class='sub'>
   <li>
    <a>sub-item</a>
   </li>
  </ul>
 </li>
</ul>

In drupal there is a function theme_menu_tree to change the class inside <ul>, but that function will change ALL <ul> (both the root parent <ul> and all children <ul>). There is also a function theme_menu_link which can add class to <li> elements but that is not an option in my case.

If you want to know why I need to change the children <ul> class, it is because I want to implement this: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/. That responsive multi level menu requires the children <ul> to have different class than its root parent.

I have looked everywhere and still has not found any solution. Any help would be much appreciated.

Upvotes: 1

Views: 2078

Answers (1)

ehsan
ehsan

Reputation: 21

you have to do something like this. I hope this will be helpfull and dont forget to change the path :

 function mbportal_menu_tree($variables) {

      if (preg_match("/\bchildren\b/i", $variables['tree'])){
       return '<ul class="menu nav nav-pills nav-stacked nav-bracket">' . $variables['tree']    . '</ul>';
      } else {
        return '<ul class="children">' . $variables['tree'] . '</ul>';
      }
  }

Upvotes: 2

Related Questions