Responsive Navigation Menu using Twitter Bootstrap




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!


advertise here

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. How I can get the same result binding menu from a database?

    ReplyDelete
  5. 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
  6. 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

emo-but-icon

Currency Converter

Built using AngularJS and ASP.NET Web API

SUBSCRIBE


item