CODEWITHSUNDEEP
phptwitter-bootstrapdrupaldrupal-7twitter-bootstrap-3
salgua
salgua

Reputation: 698

Drupal 7 bootstrap dropdown menu

I'm a newbie of Drupal. I'm trying to develop a bootstrap 3 template, but I have a problem with the navbar dropdown menu implementation. I followed these steps:

in my mytheme/templates folder I create a page.tpl.php file with the following code:

if ($page['header'])
...
$main_menu = variable_get('menu_main_links_source', 'main-menu');
$tree = menu_tree($main_menu);
print drupal_render($tree);
...

in mytheme folder I create a template.php file with these functions:

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

function mytheme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';
  $dropdown = '';
  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
    $dropdown = 'class="dropdown"';
    $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li ' .$dropdown. ' >' . $output . $sub_menu . "</li>\n";
}

with this code I'm at a good point, but I need to remove classes "nav navbar-nav" from children and add the class "dropdown-menu". This is the result of my code:

<ul class="nav navbar-nav">
<li><a href="/drupal/node/1" class="active">XYZ</a></li>
<li><a href="/drupal/node/2" title="">ASD</a></li>
<li class="dropdown"><a href="/drupal/node/3" title="" class="dropdown-toggle">XXX</a>
<ul class="nav navbar-nav">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>

and this is what I would like to obtain:

<ul class="nav navbar-nav">
<li><a href="/drupal/node/1" class="active">XYZ</a></li>
<li><a href="/drupal/node/2" title="">ASD</a></li>
<li class="dropdown"><a href="/drupal/node/3" title="" class="dropdown-toggle">XXX</a>
<ul class="dropdown-menu"> <!-- HERE IS THE DIFFERENCE -->
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>

Maybe I can do something like this:

function mytheme_menu_tree($variables) {
   if ( [check if I'm at the first level] ) {
       return '<ul class="nav navbar-nav">' . $variables['tree'] . '</ul>';
   } else {
       return '<ul class="dropdown-menu">' . $variables['tree'] . '</ul>';
   }

}

but I don't know how... Any idea?

Upvotes: 0

Views: 10034

Answers (1)

Paul Hume
Paul Hume

Reputation: 67

I too am a bit of a newbie when it comes to Drupal and was also having this problem. I have tweaked your function and it works for me:

    function SeatradeKorea_menu_link(array $variables) {
        $element = $variables['element'];
        $sub_menu = '';
        $dropdown = '';
        if ($element['#below']) {
            $sub_menu = drupal_render($element['#below']);
            $sub_menu = str_replace('nav navbar-nav', 'dropdown-menu', $sub_menu);
            $dropdown = 'class="dropdown"';
            $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
         }
         $output = l($element['#title'], $element['#href'], $element['#localized_options']);
         return '<li ' .$dropdown. ' >' . $output . $sub_menu . "</li>\n";
     }

I have added a str_replace() into your #below element to replace the "nav navbar-nav" with "dropdown-menu"

Upvotes: 1

Related Questions