Introduction:

Choose our free mega menu template. Our menu is responsiv with all the resolution such as, mobile, pc and tablet, develop by jquery and bootstrap, for maintainability at the code level, you can modify it and adapt it to your needs. The menu is compsed by five nav bar items, for each nav bar item you find mega menu. You find mega menu and list views with different styles, for a better adaptation to the levels of your website and for a modern and easy ergonomics. Test a demo version on webi4u.com, and download the complette version for free from 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: How add, delete, update nav bar item?

You find that your nav bar item is very simple, each element of which consists of an icon, label, and a drop down image.

            
<body class="container-fluid">
    <header class="row">    
        <nav class="col-lg">
            <div class="nav_item">
                <div>
                    <img src="img/home_icon.png" class="icon"/>
                    <em class="label">
                        Home
                    </em>
                    <img src="img/drop_down_img.png" class="drop_down_img"/>
                </div>
            </div>
        </nav>
    </header>
</body>
Part 2: How add, delete, update mega menu?

You can add mega menu for each nav bar item according to this layout.

<body class="container-fluid">
    <header class="row">    
        <nav class="col-lg">
            <div class="nav_item">
                <div>
                    <img src="img/home_icon.png" class="icon"/>
                    <em class="label">
                        Home
                    </em>
                    <img src="img/drop_down_img.png" class="drop_down_img"/>
                    <div class="mega_menu row" style="display: none">
                        <!-- mega menu content -->
                    </div>
                </div>
            </div>
        </nav>
    </header>
</body>
Part 3: Use liste view item one?

<div class="liste_view liste_view_type_01">
    <header>
        <div>
            <em class="label">
                CATEGORIE
            </em>
        </div>    
    </header>
    <section>
        <ul class="item">
            <li>
                <img src="img/drop_down_img_02.png" class="icon"/>
            </li>
            <li>
                <a href="">
                    <em class="title">
                        best product
                    </em>
                </a>
            </li>
            <li>
                <span class="status">
                    (12)
                </span>
            </li>
        </ul>
    </section>
</div>
Part 3: Use liste view item two?

<div class="liste_view liste_view_type_02">
    <header>
        <div>
            <em class="label">
                TOP RATED PRODUCTS
            </em>
        </div>    
    </header>
    <section>
        <div class="row item">
            <div>
                <img src="img/1.png" class="image"/>
            </div>
            <div>
                <em class="title"> 
                    article 01
                </em>
                <br/>
                <img src="img/stars_icon.png" class="previous"/>
                <img src="img/stars_icon.png" class="previous"/>
                <img src="img/stars_icon.png" class="previous"/>
                <img src="img/stars_icon.png" class="previous"/>
                <br/>
                <em class="prise">
                    £145.25
                </em>
            </div>
        </div>
    </section>
</div>                                              
Part 3: Use liste view item three?

<div class="liste_view liste_view_type_03 row justify-content-between">
    <div class="item col-lg">
        <img src="img/1.png" class="image"/>
        <h4 class="title">
            Free user profile template
        </h4>
    </div>
</div>