Bootstrap Collapsible menu

Following is the simple way to display collapsible menu for mobile view using bootstrap classes. It uses a anchor tag with attributes data-toggle and data-target to mention the behavior of the button and the collapsible menu class respectively.

Bootstrap collapsible menu

Bootstrap collapsible menu for static website in mobile view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="navbar navbar-fixed-top visible-phone">
  <div class="navbar-inner">
    <div class="container"> 
    
    <!--Button to collapse the Navigation--> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><img src="/images/collapsible-btn.png" ></a>
      <div class="nav-collapse">
        <ul class="nav">
          <li><a href="/">Home</a></li>
          <li><a href="/portfolio">Portfolio</a></li>
          <li><a href="/services">Services</a></li>
          <li><a href="/contact">Contact Us</a></li>
        </ul>
      </div>
      <!--/.nav-collapse --> 
    </div>
  </div>
</div>

Bootstrap collapsible menu for WordPress in mobile view

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="navbar navbar-fixed-top visible-phone">
  <div class="navbar-inner">
  
    <!--Button to collapse the Navigation--> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><img src="<?php bloginfo('template_directory'); ?>/images/collapsible-btn.png"></a>
    <?php
      $defaults = array(
          'theme_location'  => 'menu-1',
          'container'       => 'div',
          'container_class' => 'nav-collapse',
          'container_id'    => '',
          'menu_class'      => 'nav',
          'menu_id'         => '',
          'echo'            => true,
          'fallback_cb'     => 'wp_page_menu',
          'before'          => '',
          'after'           => '',
          'link_before'     => '',
          'link_after'      => '',
          'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
          'depth'           => 0,
          'walker'          => ''
      );
      
      wp_nav_menu( $defaults );
  ?>
  </div>
</div>

Don’t forget to include the js files in your template.

1
2
3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
Sponsored Links

facebooktwittergoogle_plusredditpinterestlinkedinmail

Comments

  1. Great tutorial. Btw it would be better if you include demo of this collapsible menu. So we can check before trying it.

    Thank you,
    Prerak.

  2. edit:

    Collapsable item needs to have “collapse” class as well so

    should be

    • Hi Sheky,
      Yes “collapse” class is needed, but not for the item, instead for the button which is responsible for the collapse. “data-target” attribute identifies the collapsible item.

  3. man you have a coding website here, allowing code in comments would be nice

  4. As I see on the Bootstrap reference, the div () needs to one more class, named “collapse”. Looks like this:

    http://getbootstrap.com/2.3.2/components.html#navbar

    I spent some hours to figure it out why not working the menu on my site (check JS incompatibility, find bugs, ect.) and than I started to reed the documentation.

    The idea is great for setting up your site, and I thank you for your effort, now I just ask you to complete your code.

  5. As I see on the Bootstrap reference, the div (<div class=\"nav-collapse\">) needs to one more class, named \"collapse\". Looks like this: <div class=\"nav-collapse collapse\">

    http://getbootstrap.com/2.3.2/components.html#navbar

    I spent some hours to figure it out why not working the menu on my site (check JS incompatibility, find bugs, ect.) and than I started to reed the documentation.

    The idea is great for setting up your site, and I thank you for your effort, now I just ask you to complete your code.

  6. The nav-collapse div needs to be one more class, collapse
    http://getbootstrap.com/2.3.2/components.html#navbar

  7. This has been really helpful, thanks! The only thing I had to figure out was how to start with the nav collapsed (add class=”collapse” to the div)

Speak Your Mind

dialog-information.png

Code highlighting instructions

Use {code type=language} for code highlighting. For example, if you are using Javascript code then use the following to wrap.

{code type=javascript}
//Your code here
{/code}

or for PHP, use:

{code type=PHP}
// Your code here
{/code}

 

*

Security Code