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...
https://www.programming-free.com/2013/02/responsive-navigation-menu-using.html?m=0
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.
Update - Twitter Bootstrap 3.2.0
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!!
Nice tutorial .. but you must install bootstrap by CDN to avoid confusion
ReplyDeleteThank you! Yes but for practice and development I prefer having it in my local environment.
Deleteohhh realy nice work.................can u email me:rahulchoudhary9045589@gmail.com...........
DeleteThis 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!
ReplyDeleteSame 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.
DeleteIt also helps web developers to do web designing instantly!
Nice tutorial ! thanks
ReplyDeleteThanks for the feedback!
Deletegood job thank u v much.......!
ReplyDeleteMost Welcome..
Deletehiiiiiii friend i want to know how to easily customize bootstrap responsive menu can u teach me....
DeleteNice tutorial ! ...... Thanx.
ReplyDeleteGreat thanks
ReplyDeletethank you so much...........
ReplyDeleteHow I can get the same result binding menu from a database?
ReplyDeleteI didn't get menu texts :(
ReplyDeletesame here
Deleteadmin can u pls give me ur email id so that i can send the screenshot to u .......i have one problem
ReplyDeletePlease 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.
DeleteThanks,
Priya
Hi Priya,
ReplyDeleteVery 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?
I believe it is something to do with 'nav-collapse' ...
DeleteI see 'navbar-collapse' in other examples, working for the latest bootstrap framework.
Hi,
DeleteI 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
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
ReplyDeletecrap formatting of your code makes for line numbers throughout if you try to copy... and your download is a 404 ... so... thanks for nothing.
ReplyDeleteThank 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.
Deletehow do you have a sub-menu in the dropdown menus?
ReplyDelete