Introduction:

Free nav bar menu, with responsive web design, using jquery, bootstrap, html and css. You find a collection of three, menu, for each menu, you find nav bar item and drop down menu, whose display is dynamic thanks to jquery plugins. You can change the nav bar to your needs, just follow our implementation guide. Test a demo version on webi4u.com, and download the complette version on our github account

Plant of the guide

At the end of this course, you will be able to:

Prerequisites: (5)

Before starting this guide, you must already have the following skills:

Part 1: add, delete, update new nav bar item?
Each nav bar is composed of nav bar items. The nav bar items are div tags with a small title, and an image to indicate that the nav bar item in question contains a drop down menu.

the menu is composed of two main elements, one is a bare icon for the home, menu icon, etc. And the second is the bare of the main navigation of the menu

            
<!-- nav bar menu -->
<nav class="nav_bar">
    <!-- nav bar item -->
    <div class="nav_bar_item">
        <div>
            <!-- item label -->
            <em class="label">
                HOME +
            </em>
        </div>
    </div>
</nav>
Part 2: How add, delete, update, drop down menu?

As for the nav bar item, the drop down menu developed by nested div tags, whose esr position is absolut

<!-- nav bar menu -->
<nav class="nav_bar">
    <!-- nav bar item -->
    <div class="nav_bar_item">
        <div>
            <!-- item label -->
            <em class="label">
                HOME +
            </em>
            <!-- drop down menu -->
            <div class="sub_menu sub_menu_zero">
                <!-- drop down menu -->
                <div class="sub_menu_item">
                    <div>
                        <!-- item title -->
                        <em>
                            sub item one
                        </em>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
Part 3: Make the responsiv css style?

The nav bar is responsiv with all the resolution, mobile, pc and tablet, thanks to the framwork bootstrap, and the #media of the css

@media(min-width: 900px){
    body > header .nav_bar .nav_bar_item .sub_menu{
        position: absolute;
    }
    body > header .nav_bar .nav_bar_item .sub_menu_zero{
        top: 50px;
        left: 0;
    }
    body > header .nav_bar .nav_bar_item .sub_menu_right{
        top: 0;
        left: 100%;
    }
    body > header .nav_bar .nav_bar_item > div{
        height: 50px;
    }
}
@media(max-width: 900px){
    #mobile_navs{
        display: block
    }
    #pc_navs{
        position: absolute;
        left: 15px;
        top: 50px;
        right: 0;
        width: 100%;
        background-color: #333333;
        display: none
    }
    body > header .nav_bar{
        display: block;
        width: 100%
    }
    body > header .nav_bar .nav_bar_item{
        display: block;
        width: 100%;
        text-align: left;
        border-bottom: #777777 1px solid
    }
    body > header .nav_bar .search_box .input-group{
        padding-left: 25px
    }
    body > header .nav_bar .nav_bar_item > div{
        min-height: 50px
    }
    body > header .nav_bar .nav_bar_item .sub_menu{
        width: 100%
    }
}