How to adapt Twitter Bootstrap´s css classes to drupal menus?

Question

I´m traying to adapt the Twitter´s Bootstrap top menu to Drupal menu system. Up until now, unsuccessfully. I´m using Drupal module nicemenus to show them in dropdowns.

This is the hand made menu list using Bootstrap´s css:

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner" style="padding-left: 0px;">
        <div class="container">
          <ul class="nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1
                <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="icon-star"></i> Item 1</a></li>
                    <li><a href="#"><i class="icon-star"></i> Item 2</a></li>
                </ul>
            </li>
            <li><a href="#">Normal Menu Link without dropdown</a></li>      
          </ul>
        </div>
      </div>
    </div>

And this is the Menu output with nicemenus, as you can see Bootstrap is so much easier to understand.

<div id="block-nice-menus-1" class="block block-nice-menus block-1 block-nice-menus-1 odd block-without-title">
  <div class="block-inner clearfix">

    <div class="content clearfix">
      <ul id="nice-menu-1" class="nice-menu nice-menu-down sf-js-enabled">
        <li class="menu-5674 menu-path-liganetnet  first   odd"><a href="">Link without Dropdowns</a></li>
        <li class="menu-267 menuparent  menu-path-front   even"><a style="dropdown" class="dropdown active" href="/">Dropdown Link 1</a>
            <ul style="display: none; visibility: hidden;">
                <li class="menu-2280 menu-path-node-196  first odd "><a href="">Item 1</a></li>
                <li class="menu-270 menu-path-node-197 even "><a title="" href="">Item 2</a></li>
                <li class="menu-271 menu-path-node-1464   odd   last "><a title="" href="">Item 3</a></li>
            </ul>
        </li>

        <li class="menu-268 menuparent  menu-path-front   odd"><a class="active" href="/">Dropdown Link 2</a>
            <ul style="display: none; visibility: hidden;">
                <li class="menu-274 menu-path-node-214  first   odd  "><a title="" href="">Item 1</a></li>
                <li class="menu-273 menu-path-node-213   even  "><a title="" href="">Item 2</a></li>
            </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

I´ve installed menu_attributes module, but when I add to it some classes they are added to the tag only. How could I transform those css classes programatically?

Doing a print_r(), I´ve found this:

                            [sidebar_second] => Array
                                (
                                    [nice_menus_1] => Array
                                        (
                                            [#markup] => 

Link 1 without Dropdown
Dropdown 1
Dropdown 2
Dropdown 3



                                            [#contextual_links] => Array
                                                (
                                                    [block] => Array
                                                        (
                                                            [0] => admin/structure/block/manage
                                                            [1] => Array
                                                                (
                                                                    [0] => nice_menus
                                                                    [1] => 1
                                                                )

                                                        )

                                                )

                                            [#block] => stdClass Object
                                                (
                                                    [module] => nice_menus
                                                    [delta] => 1
                                                    [theme] => liganet
                                                    [status] => 1
                                                    [weight] => -62
                                                    [region] => sidebar_second
                                                    [custom] => 0
                                                    [visibility] => 0
                                                    [pages] => 
                                                    [title] => 
                                                    [bid] => 744
                                                    [cache] => -1
                                                    [subject] => 
                                                )

I thought that it could be done with the parent menu variable printed in the page template and then printing the children vars inside the classes? How may I do that with php?

Thanks for your help!

Answer 1

How to add/remove classes from menu output

Add the three functions below to the file template.php in your theme folder. Make sure the function names start with the name of your theme. The suffix __main_menu indicates the machine name of the menu you want to alter. Once the functions are added to your file, clear all caches.

1 ) theme_menu_tree(). This adds the "nav" class to the <ul> element. If we left things here it would be applied to the parent and all child menus. Since we only want this applied to the parent, let's keep going.

function mytheme_menu_tree__main_menu($variables) {
  return '<ul class="nav">' . $variables['tree'] . '</ul>';
}

2 ) theme_menu_link(). We have added only two lines to the original function which are commented below. The first adds the "dropdown" class to any <li> element that contains a child menu. The second declares a new theme wrapper specifically for the child menus.

You can optionally strip away existing classes with $element['#attributes']['class'] = 'dropdown'; (remove the empty square brackets).

function mytheme_menu_link__main_menu($variables){
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    
    // Add class to this list element.
    $element['#attributes']['class'][] = 'dropdown';

    // Declare a new theme wrapper for this list item's child menu.
    $element['#below']['#theme_wrappers'][0] = 'menu_tree__main_menu_children';
    
    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

3 ) Custom theme function. This is our custom implementation of theme_menu_tree that we just declared above. It adds the class "dropdown-menu" to all child menus.

function mytheme_menu_tree__main_menu_children($variables) {
  return '<ul class="dropdown-menu">' . $variables['tree']    . '</ul>';
}

Notes:

• Be warned that removing classes could alter the functionality of the menu!

• This technique will only affect menu output; that is, everything between <ul id="nice-menu-1">..</ul> in the example pasted above. To remove the wrapper elements you should override block.tpl.php as described on this handbook page.

More helpful links:

• About overriding themable output (Drupal.org Handbook)
• Create a Foundation 5 'Top bar' menu in Drupal 7.x (a blog post of mine that uses the same technique, but for a Foundation menu)

Answer 2

Install Bootsrap theme and set this theme as base theme of your own theme. All menus will output as you need in this case, because Bootsrap theme has all rewrite functions