--> Skip to main content
Home Bootstrap Web Design Dropdown Menu with Bootsrap

Dropdown Menu with Bootsrap

The menu creation is the most important thing in arranging a navigation on the website. It guides the visitor clearly what we have in our website . All of people know that a good design menu will influence visitor to continue search another article. In this tutorial, we will create dropdown menu by using Bootstrap. By default, to display the dropdown menu in Bootsrap we have to click on a menu item. Our target is the dropdown menu will be displayed on mouse hover.

 We will show you the default dropdown menu in Bootstrap and the dropdown menu on mouse over. In the step 1 is about the default dropdown menu, while step 2 is the dropdown menu on mouse over.

Step 1

Create a file index.html and copy source below : 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial Boostrap </title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <script  src="assets/js/bootstrap.min.js"></script>
    <style type="text/css">
    .navbar-inverse {
        background-color: #3b5998;
        font-size:18px;
    }
    .navbar-brand{
        float: none !important;
    }
    .navbar-inverse .navbar-nav > li.c1 a:hover, .navbar-inverse .navbar-nav > li.c1.active a{
        color:#fff;
        background: #F55;
    }
    .navbar-inverse .navbar-nav > li.c2 a:hover, .navbar-inverse .navbar-nav > li.c2.active a{
        color: #fff;
        background:#973CB6;
    }
    </style>
</head>
<body>
<div class="navbar navbar-inverse">
    <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><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
                <img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li class="c1 active"><a href="index.html">Home</a></li>
                <li class="c2 dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown">Programming<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="">Web Programming</a></li>
                        <li><a href="">Dekstop Programming</a></li>
                        <li><a href="">Android Programming</a></li>
                    </ul>
                </li>
                <li><a href="">English</a></li>
                <li><a href="">Review</a></li>
                <li><a href="">Videos</a></li>
                <li><a href="">Gallery</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- /.navbar -->   
</body>
</html>

Step 2

Add javascript on your index.html as shown by code below :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial Boostrap </title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <script  src="assets/js/bootstrap.min.js"></script>
    <style type="text/css">
    .navbar-inverse {
        background-color: #3b5998;
        font-size:18px;
    }
    .navbar-brand{
        float: none !important;
    }
    .navbar-inverse .navbar-nav > li.c1 a:hover, .navbar-inverse .navbar-nav > li.c1.active a{
        color:#fff;
        background: #F55;
    }
    .navbar-inverse .navbar-nav > li.c2 a:hover, .navbar-inverse .navbar-nav > li.c2.active a{
        color: #fff;
        background:#973CB6;
    }
    </style>
</head>
<body>
<div class="navbar navbar-inverse">
    <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><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
                <img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li class="c1 active"><a href="index.html">Home</a></li>
                <li class="c2 dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown">Programming<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="">Web Programming</a></li>
                        <li><a href="">Dekstop Programming</a></li>
                        <li><a href="">Android Programming</a></li>
                    </ul>
                </li>
                <li><a href="">English</a></li>
                <li><a href="">Review</a></li>
                <li><a href="">Videos</a></li>
                <li><a href="">Gallery</a></li>
            </ul>
        </div>
    </div>
</div><script>
            $(document).ready(function(){
            $(".dropdown").hover(            
            function() {
                $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
                $(this).toggleClass('open');        
            },
            function() {
                $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
                $(this).toggleClass('open');       
            }
            );
        });
        </script>
</body>
</html>

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar