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

SIGN UP TO OUR NEWSLETTER

Stay tuned with latest updates on Web technologies, subscribe to our newsletter. We'll not spam your inbox.

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.

    • Hi Prerak,

      This is a snippet to help you out in creating bootstrap collapsible menu, so no demo is required.

      • Exactly, thats why I am NOT going to try it. Why the fuck do I want to follow instructions to do something I dont know what the end result is. Atleast use fiddle…

        Out of here.

        -1

  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}

 

*

CommentLuv badge

Security Code