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>
<!-- 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