Dropdown NavBar creation Using CSS, HTML and Bootstrap Navbar
In Bootstrap Dropdown NavBar, we can create a dropdown menu very easily. We have to include the following library files
- min.css
- min.js
- min.js
After including the above file we have to use the following classes
- .dropdown : Attach the class into the <li> tag in which we want to create the dropdown.
- .dropdown-toggle : Attach the class into the <a> tag in which we want to create the dropdown.
- .dropdown-menu : Attach the class into the <ul> tag attached with the li tag in which we want to create the dropdown.
- .divider : placed a divider between two menu item.
- .nav : for create a navbar.
- .nav-pills : create the top menu item.
Using the above classes we want write down the following code which will produce a dropdown menu. ( In the next post we learn how to customize a bootstrap menu bar.)
Dropdown NavBar Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Dropdown Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!--LINK THE FILE -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style>
.tah
{
margin:20px;
}.menu-header
{
font-weight:bold;
text-align:center;
}
</style></head>
<body>
<div class="tah">
<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"> Courses <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#"> HTML </a> </li>
<li> <a href="#"> CSS </a> </li>
<li> <a href="#"> Java Script </a> </li>
<li> <a href="#"> Bootstrap </a> </li>
</ul>
</li><li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Centre <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"> Kolkata </a> </li>
<li><a href="#"> Delhi </a> </li>
<li class="divider"> </li>
<li class="menu-header"> Head Office </li>
<li><a href="#"> Hydrabad </a></li>
</ul>
</li>
</ul></div>
<div class="container">
<h3 style="font-size:2vw;"> Tutorial At Home </h3>
<p> Free Tutorial for All </p>
</div>
</body>
</html>
Video Tutorials
