Introduction:

free download mega menu with responsiv web design, using html, css, bootstrap and jquery. You find with our template a moder mega menu in terms of ergonomics, design and simplicity of code modification. Our mega menu is composed by a navigation bar of the eight element, for each element of the nav bar you find either a mega menu template with list view with different styles. Either drop down menu with sub menu of liks. You also find with our mega menu an image, and social media links. You can adapt the menu to your needs of your site, the template code is simple using jquery and bootstrap. Test a demo version on webi4u.com, 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: use mega menu layout?

The layout of menu and composed by three elements. The first is the logo of the site, the second is the bare of navigation, and the last is the list of social media links.

            
<header class="row justify-content-between">
    <div class="col-lg">
        <div class="container-fluid">
            <div class="row">
                <div class="mobile_nav_bar_icon">
                    <img src="img/Menu_icon-icons.com_55865.png"/>
                </div>
                <!-- logo image -->
                <div class="sigle_img col-lg-2 col">
                    <img src="img/freelogodesign.png"/>
                </div>
                <!-- nav bar -->
                <nav class="nav_bar col-lg-10">
                </nav>
            </div>
        </div>
    </div>
    <!-- social media links -->
    <div class="icons_nav">
    </div>
</header>
                        
Part 2: How add, delete, update nav bar and nav bar item?

the bare of the navigation is compser by eight principal element. each element contains either a simple label or a label with a link.

<header class="row justify-content-between">
    <div class="col-lg">
        <div class="container-fluid">
            <div class="row">
                <!-- nav bar -->
                <nav class="nav_bar col-lg-10">
                    <div>
                        <!-- nav bar item -->
                        <div class="nav_bar_item">
                            <div>
                                <!-- nav bar item label -->
                                <em class="label">
                                    CONTACT US
                                </em>
                                <div class="mobile_drop_down_icon">
                                    <img src="img/drop_down_icon_02.png"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
Part 3: user list view?

You find two type view list that you can use in the mega menu layout. A simple view list, and a view list with item image.

<!-- list view one -->
<div class="list_view_link">
    <!-- list view header -->
    <header>
        <!-- list view header label -->
        <em class="label">
            Facilisis Mega
        </em>
    </header>
    <section>
        <!-- list view item -->
        <div class="item">
            <div class="row">
                <!-- drop dow icon -->
                <div>
                    <img src="img/drop_down_icon.png" class="drop_down_icon"/>
                </div>
                <div>
                    <!-- list view item label -->
                    <a href="">
                        <em class="label">
                            Maecenas conguros
                        </em>
                    </a>    
                </div>
            </div>
        </div>
    </section>
</div>       
Part 3: add, delete, update, mega and mega menu item?

Each mega menu is compiled by mega menu item, and with each mega menu item you find a view list with different styles.

<header class="row justify-content-between">
    <div class="col-lg">
        <div class="container-fluid">
            <div class="row">
                <!-- nav bar -->
                <nav class="nav_bar col-lg-10">
                    <div>
                        <!-- nav bar item -->
                        <div class="nav_bar_item">
                            <div>
                                <!-- mega menu -->
                                <div class="mega_menu">
                                    <div class="row">
                                        <!-- for mobile responsiv -->
                                        <div class="mobile_close">
                                            <img src="img/1487086345-cross_81577.png"/>
                                        </div>
                                        <!-- mega menu item -->
                                        <div class="mega_menu_item col-lg">
                                            <!-- list view content -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>