Sunday, January 11, 2015

Code to create responsive navigation bar with dropdown menu using bootstrap

Creating responsive navigation bar with dropdown menu in bootstrap is very simple. It is as easy to customize as to create it. Below is a running code for creating navigation bar(Menus) using bootstrap.
<!-- navbar with dropdown menu -->
<div class="navbar navbar-default navbar-fixed-top"> //creating fixed navbar menu you can change fixed to static
<div class="container">
<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span> //items to be shown in small window
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">CodeFacet</a> //for brand name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"> //navbar items
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown"> // menu with dropdown
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b class="caret"></b></a> //caret is for dropdown sign
<ul class="dropdown-menu"> //dropdown menus
<li><a href="#">Bootstrap Tutorials"</li>
<li><a href="#">PHP Tutorials"</li>
<li><a href="#">JavaScript Tutorials"</li>
<li><a href="#">CSS Tutorials"</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>

No comments:

Post a Comment