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.
- Caret Class
- 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,
- .caret
- {
- display: inline - block;
- width: 0;
- height: 0;
- margin - left: 2 px;
- vertical - align: middle;
- border - top: 4 px solid;
- border - right: 4 px solid transparent;
- border - left: 4 px solid transparent;
- }
The HTML file looks as in the following,
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
-
- <head>
- <title></title>
- <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
- <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
- <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
- </head>
-
- <body>
- <div class="navbar-inverse">
- <div class="Container">
- <ul class="navnavbar-nav">
- <li><a href="#">Home</a></li>
- <li><a href="#about">Technologies</a></li>
- <li><a href="#contact">Article</a></li>
- <li><a href="#contact">blog</a></li>
- <li><a href="#contact">News <b class ="caret"></b></a></li>
- </ul>
- </div>
- </div>
- </body>
-
- </html>
The HTML will render without Bootstrap as in the following:
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,
- .dropdown - menu
- {
- position: absolute;
- top: 100 % ;
- left: 0;
- z - index: 1000;
- display: none;
- float: left;
- min - width: 160 px;
- padding: 5 px 0;
- margin: 2 px 0 0;
- font - size: 14 px;
- list - style: none;
- background - color: #ffffff;
- border: 1 px solid# cccccc;
- border: 1 px solid rgba(0, 0, 0, 0.15);
- border - radius: 4 px; -
- webkit - box - shadow: 0 6 px 12 px rgba(0, 0, 0, 0.175);
- box - shadow: 0 6 px 12 px rgba(0, 0, 0, 0.175);
- background - clip: padding - box;
- }
The HTML file looks as in the following,
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
-
- <head>
- <title></title>
- <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
- <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
- <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
- <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
- <script src="Bootstrap/js/bootstrap.js" type="text/javascript"></script>
- </head>
-
- <body>
- <div class="navbarnavbar-inverse">
- <div class="Container">
- <ul class="navnavbar-nav">
- <li><a href="#">Home</a></li>
- <li><a href="#about">Technologies</a></li>
- <li><a href="#contact">Article</a></li>
- <li><a href="#contact">blog</a></li>
- <li class="dropdown"><a href="#" class="dropdown-toggle">News <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Home</a></li>
- <li><a href="#">Technologies</a></li>
- <li><a href="#">Article</a></li>
- <li><a href="#">blog</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- <script src="Bootstrap/js/jquery.js" type="text/javascript"></script>
- <script src="Bootstrap/js/dropdown.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $('.dropdown-toggle').dropdown();
- });
- </script>
- </body>
-
- </html>
The HTML will be rendered with Bootstrap as in the following,