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.

Creating Menu in Bootstrap

In this article, we use some built-in CSS to make a menu more attractive for your websites, like DropDown Menus and active tabs.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

Now we need to add a reference to the bootstrap CSS file and javascript file with the HTML file.

<!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>
    </body>
</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 a 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.

Caret Class
DropDown-Menu Class

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: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

The HTML file looks such 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="nav navbar-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.

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: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
}

The HTML file looks such 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="navbar navbar-inverse">
            <div class="Container">
                <ul class="nav navbar-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.

5 Comments

Join the conversation! Your thoughts help the community grow.

Muhammad Akram8y ago
And if want to multi level drop down menu then what I should to do?
Nazmul Badsha9y ago
Nice article bro . keep up it.
Dhanik Sahni11y ago
Nice
chitranajna rathore12y ago
Nice article for create a create a dropdown menu using jquery
Bhawana Thaokar12y ago
can you please help me for how can i populate the bootstrap dropdown dynamically from SQL database