[Drupal] How to Create Multi-level Responsive Drop Down Menu in Drupal using Bootstrap
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY akhila.vn
10 months ago
Bootstrap
0 comments comment

I had a requirement to add a multi-level responsive drop down menu in a Zyxware theme. Please do refer the below reference links to know more about responsive themes and free Drupal themes. So for that I had to edit page.tpl.php, page--front.tpl.php, style.css, template.php etc.

First I added the following code to template.php of my theme. The steps that I followed here are,

  • Added the following code to the function themename__preprocess_page(&$vars) to make the menu as a tree.

    
        //Setting menu in a tree structure
        $main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
        $vars['main_menu'] =  $main_menu_tree;
        // Get the entire main menu tree
        $main_menu_tree = menu_tree_all_data('main-menu');
        // Add the rendered output to the $main_menu_expanded variable
        $vars['main_menu_expanded'] = menu_tree_output($main_menu_tree);
      
    
  • Added css class to main menu using the function,
    
      function themename_menu_tree__main_menu(&$vars) {        
      return '<ul class="nav navbar-nav">' . $vars['tree'] . '</ul>';
     }
     
    
  • Added css class to inner part of main menu using the function,
    
    function themename_menu_tree__main_menu_inner($vars) {	
        return '<ul class="dropdown-menu">' . $vars['tree'] . '</ul>';
    }
    
    
  • Added the following function to display the links in main menu tree,
    
      function themename_menu_link__main_menu($vars) {
       $element = $vars['element'];
       $sub_menu = '';
    
       if ($element['#below']) {
        foreach ($element['#below'] as $key => $val) {
          if (is_numeric($key)) {             
            $element['#below'][$key]['#theme'] = 'menu_link__main_menu_inner'; // 2 level <li>
          }
        }
        $element['#below']['#theme_wrappers'][0] = 'menu_tree__main_menu_inner';  // 2 level <ul>
        $sub_menu = drupal_render($element['#below']);
      }
      $output = l($element['#title'], $element['#href'], $element['#localized_options']);
    
      $element['#localized_options']['attributes']['class'][] = " dropdown-toggle ";
      $element['#localized_options']['attributes']['role'][] = "menu";
      $element['#localized_options']['attributes']['data-toggle'][] = "dropdown";
      $element['#localized_options']['attributes']['aria-expanded'][] = "true";  
      
      $output = l($element['#title'], $element['#href'], $element['#localized_options']);
      return '<li class="dropdown">' . $output . $sub_menu . '</li>';
     }
     
    
  • Added the following code to make inner <li> tag - links
    
        function themename_menu_link__main_menu_inner($vars) {
          $element = $vars['element'];
          $sub_menu = '';
    
          if ($element['#below']) {
            $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';
         }
    
    

Then I added the code ' print render($main_menu); ' to the page.tpl and page--front.tpl for display menu with necessary <div> tag and css styles based on the theme that were downloaded from http://getbootstrap.com/components

References :

  • https://www.drupal.org/node/1178784
  • http://getbootstrap.com/components/
  • http://www.zymphonies.com/metro-responsive-theme

RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
close

on 25th March 2015 / by akhila.vn
I had a requirement to add a multi-level responsive drop down menu in a Zyxware theme. Please do refer the below reference links to know more about responsive themes and free Drupal themes. So I need to edit page.tpl.php, page--front.tpl.php, style.css, template.php etc. Bootstrap Drupal Leave a reply Your email address will not be published. Required fields are marked * doug (not verified) access_time 14 Nov 2019 - 00:52 Thank you. I was so shocked when I realized that the bootstrap theme did not have more than 2 levels of nav. Wow Your code worked right away. I need to minimally re-work my theme, but it is all good. this - '\n'; should be this - ''; I did not have to add this ' print render($main_menu); ' to the page.tpl and page--front.tpl Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
close

on 01st April 2015 / by aby.va
Bootstrap twitter is includes a responsive, mobile or tablet first fluid grid system that ... it is styling on small and medium devices but also on large devices if a .col-lg-* class is not present. My company has a lot of free Drupal themes developed. But there is a problem i.e these are not responsive. So we started to change this themes in responsive and For that we suggest the new bootstrap framework for responsive. We success fully converted the plane html code in to bootstrap grid format. Bootstrap Leave a reply Your email address will not be published. Required fields are marked *
/themes/custom/zyxpro_light/images/placeholder.png
more_horiz
close

on 21st April 2015 / by alfred.paul
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first websites. This framework is also a popular star in drupal themes. There are a lot of drupal themes based on bootstrap, using bootstrap library or subthemes created from bootstrap base theme. Its mobile ready design and predefined classes makes it easier to create a beautifully customized responsive theme. Bootstrap Leave a reply Your email address will not be published. Required fields are marked *
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.