Adding jQuery effects to list value of navbar in bootstrap

Posted by manideep goud Co Author(s): Manideep in Bootstrap category on 1/6/2017 for Beginner level | Points: 250 | Views : 3913

Post Article |

Search Articles |

Articles Home

In this article we shall learn how to slide a content when navbar list value is triggered

Introduction

Menu's are like a heart of the webpage which makes user easy to navigate particular sections. Bootstrap comes with Navs and Navbars to create menu's.

It is very simple to create menus using Navbars in Bootstrap.

Objective

The main objective of this article is to create a content after navbar and give the content to the list value of the navbar and make it slide by triggering the list value of the navbar.

Using Bootstrap code

First we need to add jquery and bootsrap file in to the project

 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Create a navbar menu by following below code

<nav style="margin:0;" class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" data-target="#mynavbar" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">ToggleNavigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Sites</a>
        </div>
        <div id="mynavbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li>
                <li id="flip"><a href="#panel">TechFunda<span class="caret"></span></a></li>
                <li><a href="#"><span class="glyphicon glyphicon-book"></span> ITFunda</a></li>
                <li>
                    <form class="navbar-form">
                        <div class="col-xs-4">
                            <div class="form-group" style="display:inline;" id="manideep">
                                <div class="input-group" style="display:table;">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                                    <input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" style="width:500px;background-color:#5b2c2c;color:white;">
                                    <span class="input-group-addon">
                                        <button type="button" href="#manideep" class="close" data-dismiss="alert">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;Login</a></li>
                <li><a href="#"><img  src="TechFunda.gif" width="160" height="35"/></a></li>
            </ul>
        </div>
    </nav>

In the above code, we have used navbar predefined classes such as navbar-default, navbar-header, navbar-collapse etc. of Bootstrap.

Go to bootstrap.css and take a look at those styles.

In the above code we also grouped Glyphicons to the Menu elements to make them attractive.

Run the above code in your browser and you will observe following output.

If you reduce the screen or minimize the screen you will get the output as follows

After creating navbar we have to create content below navbar , by following below code.

 <div id="panel" style="margin:0;height:300px;background-color:black;width:100%;">
        <div class="row" style="background-color:black;color:white;padding-top:25px;">
            <div class="col-xs-12">
                <div class="col-xs-2">
                    <select style="background-color:black;color:white;" class="form-control" name="hai">
                        <option vaue="1">Office</option>
                        <option vaue="1">School</option>
                        <option vaue="1">DotNetFunda</option>
                        <option vaue="1">IFunda</option>
                        <option vaue="1">KidsFunda</option>
                    </select>
                </div>
                <div class="col-xs-2">
                    <select style="background-color:black;color:white;" class="form-control" name="hai">
                        <option vaue="1">Domain</option>
                        <option vaue="1">College</option>
                        <option vaue="1">DotNetFunda</option>
                        <option vaue="1">IFunda</option>
                        <option vaue="1">KidsFunda</option>
                    </select>
                </div>
                <div class="col-xs-2">
                    <select style="background-color:black;color:white;" class="form-control" name="hai">
                        <option vaue="1">India</option>
                        <option vaue="1">Hyderabad</option>
                        <option vaue="1">DotNetFunda</option>
                        <option vaue="1">IFunda</option>
                        <option vaue="1">KidsFunda</option>
                    </select>
                </div>
            </div>
        </div>
        <br /><br />
        <div class="row">
            <ul style="list-style:none;">
                <li id="type"><a href="#pen">Advanced Filter<span class="caret"></span></a></li>
            </ul>
        </div>
        <br /><br />
        <div id="pen" class="row">
            <div class="col-xs-12">
                <div class="col-xs-2">
                    <select style="background-color:black;color:white;" class="form-control" name="hai">
                        <option vaue="1">Mysore</option>
                        <option vaue="1">Goa</option>
                        <option vaue="1">DotNetFunda</option>
                        <option vaue="1">IFunda</option>
                        <option vaue="1">KidsFunda</option>
                    </select>
                </div>
                <div class="col-xs-2">
                    <select style="background-color:black;color:white;" class="form-control" name="hai">
                        <option vaue="1">Factory</option>
                        <option vaue="1">Goud</option>
                        <option vaue="1">DotNetFunda</option>
                        <option vaue="1">IFunda</option>
                        <option vaue="1">KidsFunda</option>
                    </select>
                </div>
                <div class="col-xs-2">
                    <div class="form-group">
                        <div class="input-group" style="display:table;">
                            <input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" style="background-color:#5b2c2c;color:white;">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-success">Filter</button>
                <button type="button" class="btn btn-danger">Clear Filter</button>
            </div>
        </div>
    </div>

Run the above code in your browser you will observe following output.

In the above code we have created created content using css styles. we created select options in the div element and we have given id as panel for the div section and we have given #panel for the value TechFunda, which is used to slide when we click the value TechFunda
In the next step add jquery functions to make slide div section when we click the Value TechFunda.

<script>
        $(document).ready(function () {
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $("#type").click(function () {
                $("#pen").slideToggle("slow");
            });
        });
    </script>

It makes slide the div section when we click the value of techfunda in the navbar.

To make it beautify add css styles, below is the style sheet which i have added

<style>
        #panel {
            padding: 50px;
            display: none;
            border: 1px solid groove;
        }

        #pen {
            display: none;
        }
         .navbar-nav > li {
            margin-left: 35px;
            margin-right: 30px;
        }
    </style>