Post
Ask Question

Creating DropDown Menu in Bootstrap

Introduction

 
Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. Using Twitter Bootstrap, in the previous article I created a static navigation menu.
 
 
In this article, we use some built-in CSS to make a menu more attractive for your websites, like DropDown Menus and active tab.
 
Using Twitter Bootstrap, you may create a static navbar. - See more at http://www.w3resource.com/twitter-bootstrap/navbar-tutorial.php#sthash.8Za94Odc.dpuf
 
What is Bootstrap?
 
Twitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. The Bootstrap framework is used to develop front-facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons, and so on. These are the common requirements of any project. With these, you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module-based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals, and more.
 
To read more see Bootstrap
 
Include with HTML
 
Now to include them in the project. So let’s imagine we have a blank HTML file that goes something like this:
 
HTML file
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.    
  4.     <head>  
  5.    
  6.          <title></title>  
  7.    
  8.     </head>  
  9.    <body>  
  10.    </body>  
  11. </html> 
Now we need to add a reference to the bootstrap CSS file and javascript file with the HTML file.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.      <head>  
  4.            <title></title>  
  5.         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  6.         <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
  7.         <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
  8.          </head>  
  9.       <body>             
  10.      </body>  
  11. </html> 
Note: Also don’t forget to include jQuery if you’ll be using Bootstraps JS plugins.
 
Creating DropDown Menu using Bootstrap
 
In the previous article, we used the navbar-inverse, Container, and navbar classes to make a simple menu without dropdown. To make the menu more attractive with a DropDown list using Bootstrap open up the bootstrap.css file and check out the following Bootstrap CSS class.
  1. Caret Class
  2. DropDown-Menu Class
 1. Using bootstrap CSS class="Caret"  
 
Now first we use the caret class with li tag. The Caret class shows a caret sign. Now open the bootstrap.css file and find the .navbar-inverse class. It looks like this:
  1. .caret {  
  2.   display: inline-block;  
  3.   width: 0;  
  4.   height: 0;  
  5.   margin-left: 2px;  
  6.   vertical-align: middle;  
  7.   border-top: 4px solid;  
  8.   border-right: 4px solid transparent;  
  9.   border-left: 4px solid transparent;  
  10. } 
The HTML file looks such as in the following:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.   
  4.     <head>  
  5.         <title></title>  
  6.         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  7.         <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
  8.         <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
  9.     </head>  
  10.   
  11.     <body>  
  12.         <div class="navbar-inverse">  
  13.             <div class="Container">  
  14.                 <ul class="nav navbar-nav">  
  15.                     <li><a href="#">Home</a></li>  
  16.                     <li><a href="#about">Technologies</a></li>  
  17.                     <li><a href="#contact">Article</a></li>  
  18.                     <li><a href="#contact">blog</a></li>  
  19.                     <li><a href="#contact">News <b class="caret"></b></a></li>  
  20.                 </ul>  
  21.             </div>  
  22.         </div>  
  23.     </body>  
  24.   
  25. </html> 
The HTML will render without Bootstrap as in the following:
 
Caret Class
 
2. Using bootstrap CSS class="DropDown-Menu" 
 
You now need to add the DropDown-Menu class. Now open the bootstrap.css file and find the DropDown-Menu class. It looks like this:
  1. .dropdown-menu {  
  2.     position: absolute;  
  3.     top: 100%;  
  4.     left: 0;  
  5.     z-index: 1000;  
  6.     display: none;  
  7.     float: left;  
  8.     min-width: 160px;  
  9.     padding: 5px 0;  
  10.     margin: 2px 0 0;  
  11.     font-size: 14px;  
  12.     list-style: none;  
  13.     background-color: #ffffff;  
  14.     border: 1px solid #cccccc;  
  15.     border: 1px solid rgba(0, 0, 0, 0.15);  
  16.     border-radius: 4px;  
  17.     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  
  18.     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  
  19.     background-clip: padding-box;  
  20. } 
The HTML file looks such as in the following:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.   
  4.     <head>  
  5.         <title></title>  
  6.         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  7.         <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
  8.         <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
  9.         <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
  10.         <script src="Bootstrap/js/bootstrap.js" type="text/javascript"></script>  
  11.     </head>  
  12.   
  13.     <body>  
  14.         <div class="navbar navbar-inverse">  
  15.             <div class="Container">  
  16.                 <ul class="nav navbar-nav">  
  17.                     <li><a href="#">Home</a></li>  
  18.                     <li><a href="#about">Technologies</a></li>  
  19.                     <li><a href="#contact">Article</a></li>  
  20.                     <li><a href="#contact">blog</a></li>  
  21.                     <li class="dropdown"><a href="#" class="dropdown-toggle">News <b class="caret"></b></a>  
  22.                         <ul class="dropdown-menu">  
  23.                             <li><a href="#">Home</a></li>  
  24.                             <li><a href="#">Technologies</a></li>  
  25.                             <li><a href="#">Article</a></li>  
  26.                             <li><a href="#">blog</a></li>  
  27.                         </ul>  
  28.                     </li>  
  29.                 </ul>  
  30.             </div>  
  31.         </div>  
  32.         <script src="Bootstrap/js/jquery.js" type="text/javascript"></script>  
  33.         <script src="Bootstrap/js/dropdown.js" type="text/javascript"></script>  
  34.         <script type="text/javascript">  
  35.         $(document).ready(function() {  
  36.             $('.dropdown-toggle').dropdown();  
  37.         });  
  38.         </script>  
  39.     </body>  
  40.   
  41. </html> 
The HTML will be rendered with Bootstrap as in the following:
 
Dropdown menu


Similar Articles