Responsive Navigation Menu using Twitter Bootstrap

DEMO DOWNLOAD In one of my posts, I gave a brief introduction about  Twitter Bootstrap , the latest and most widely used front en...




In one of my posts, I gave a brief introduction about Twitter Bootstrap, the latest and most widely used front end framework for responsive web design. It is very easy to create a responsive navigation menu that will automatically turn into dropdownlist for devices with smaller screens with twitter bootstrap. If you are new to responsive web design and you do not want to play around with the CSS media queries yourself, you have landed up on the right page because this post aims at explaining how to create responsive navigation menu on the go with twitter bootstrap.


Responsive navigation menu using twitter bootstrap



1. First of all download bootstrap files from here
2. Create an html file and place the 'bootstrap' folder from the download in the same location as this html file. You need 'bootstrap.css','bootstrap.responsive.css' and 'bootstrap.js' files from the download.

3. Copy and paste the below code in the html file you created.


<!DOCTYPE html>
<html>
<head>
 <title>Responsive Menu - ProgrammingFree</title>
<!-- Mobile viewport optimized -->
  <meta name="viewport" content="width=device-width">
<!-- CSS -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />   
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<!--Scripts-->
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>

</head>
<body>
<div class="container-fluid">
<header>
<h2>Responsive Navigation Menu using Twitter Bootstrap</h2>
<br/>
<div class="row-fluid">
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </a>
  <div class="nav-collapse collapse">
  <ul class="nav">
   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="">Pricing</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Latest Products</a></li>
    <li><a href="#">Popular Products</a></li>
    </ul>
   </li>          
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Personal Membership</a></li>
      <li><a href="#">Premium Membership</a></li>
    </ul>
   </li>
   <li><a href="#">Offers</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact</a></li>
   <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    </ul>
   </li>
        </ul>
    </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<p>Note: Reduce browser window size to see dropdown navigation menu</p>
</div>
</header>
<div>
</body>
</html>

4. That is it! Open the html file in browser you will see navigation menu as shown below,


After re-sizing the browser window, horizontal navigation menu changes to dropdown navigation as shown below,




Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!



Subscribe to GET LATEST ARTICLES!


Related

Responsive Design 3013314375642319006

Post a Comment

  1. Nice tutorial .. but you must install bootstrap by CDN to avoid confusion

    ReplyDelete
    Replies
    1. Thank you! Yes but for practice and development I prefer having it in my local environment.

      Delete
    2. ohhh realy nice work.................can u email me:rahulchoudhary9045589@gmail.com...........

      Delete
  2. This is great, exactly what I needed thank you! After ten years of writing all my own code from scratch and integrating plugins as and when I find them, it's taking a bit of getting used to using Bootstrap, but I am really liking it!

    ReplyDelete
    Replies
    1. Same here Dave!For newbie's in Web Design like me, I think Twitter Bootstrap is the ideal choice as it is very simple to use and rich in look.

      It also helps web developers to do web designing instantly!

      Delete
  3. good job thank u v much.......!

    ReplyDelete
    Replies
    1. hiiiiiii friend i want to know how to easily customize bootstrap responsive menu can u teach me....

      Delete
  4. Nice tutorial ! ...... Thanx.

    ReplyDelete
  5. thank you so much...........

    ReplyDelete
  6. How I can get the same result binding menu from a database?

    ReplyDelete
  7. admin can u pls give me ur email id so that i can send the screenshot to u .......i have one problem

    ReplyDelete
    Replies
    1. Please try to post your problem in any of the technical forums to get immediate help. Whatever I have posted here works, as it is evident from the demonstration you see.

      Thanks,
      Priya

      Delete
  8. Hi Priya,
    Very nice work, I liked the Menu, thought of using it in my site.
    But it is not working with the latest bootstrap framework.
    Any suggestion to make it to work in the latest bootstrap framework?

    ReplyDelete
    Replies
    1. I believe it is something to do with 'nav-collapse' ...
      I see 'navbar-collapse' in other examples, working for the latest bootstrap framework.

      Delete
    2. Hi,

      I have an updated tutorial for responsive navigation menu using Twitter Bootstrap 3 here,

      http://www.programming-free.com/2014/09/responsive-menu-bootstrap-3.html

      Thanks,
      Priya

      Delete
  9. Hi, I am making asp.net web forms app and I had this functionality working normally as it came with the webforms template... but now I have trouble because "hamburger" menu won't show the drop down after I click on it?! Anybody have insight on this pls answer: olujic.slaven@gmail.com

    ReplyDelete
  10. crap formatting of your code makes for line numbers throughout if you try to copy... and your download is a 404 ... so... thanks for nothing.

    ReplyDelete
    Replies
    1. Thank you for your (rude) comment. I have updated the download link and for the formatting, you have an icon on the top left corner of the code, which will open the source in a new window, from where you should be able to copy it. I had to move my code from dropbox to github for various reasons and when I did that, one or two links may have not been updated. It is a manual error.

      Delete
  11. how do you have a sub-menu in the dropdown menus?

    ReplyDelete

emo-but-icon

SUBSCRIBE


item