Introduction:

You find a free mega menu, using jquery and bootstrap, with responsiv web design. Our mega menu is compsé by a bare of the navigation, an acronym image, and a search box. You have two types of menu. First of all a mega menu in large plant contains list view different, you can adapt the list view to your needs of the site. Then you will find a mega dynamic size menu based on the CSS style applied to this type of mega menu. In the end you will find nested menu with links item. Our mega menu template offers you a very ergonimic user experience on your site. Try a demo version on our webi4u.com website, and download the full 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: responsiv menu theme layout?

The layout of our menu is simple. You are missing three main elements. The image symbol, the bare of navigation and the search box.

            
<header class="row justify-content-between">
    <div>
        <div class="container-fluid">
            <div class="row">
                <div class="sigle">
                    <img src="img/logo.png"/>
                </div>
                <nav class="nav_bar">
                </nav>
            </div>
        </div>
    </div>
    <div class="search_box">
    </div>
</header>
Part 2: How add, delete, update nav bar and nav bar item?

In the navigation bar you find eight navbar items, each nav bar item contains a label and a drop down icon if it has a menu or submenu.

<!-- nav bar -->
<nav class="nav_bar">
    <!-- nav bar itel -->
    <div class="nav_bar_item">
        <div>
            <!-- nav bar item label -->
            <em class="label">
                HOME
            </em>
        </div>
    </div>
</nav>
Part 3: How add, delete, update, mega menu item?

Each mega menu contains mega menu items, including the ones you see in the list of contents for other pages of your website.

<div class="mega_menu">
    <div class="row justify-content-between">
        <div class="mega_menu_item">
            <div class="simple_liste_view">
                <header>
                    <strong class="title">
                        VARIATION 1
                    </strong>
                </header>
                <section>
                    <div class="item">
                        <a href="">
                            <em class="label">
                                FULLWIDTH BANNER
                            </em>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>
Part 4: How add, delete, update drop down menu?