Bootstrap 4 Responsive Mega Menu on Hover

An awesome, cross-platform and cross browser Bootstrap 4 responsive mega menu on hover. This mega menu mainly powered by Bootstrap framework and jQuery that comes with smooth CSS transitions and animations, best for content heavy websites.



Plugin Overview

Plugin: Bootstrap Megamenu
Author: Dave Manser
Licence: MIT Licence
Published: January 12, 2024
Repository: Fork on CodePen
Dependencies: jQuery 3.3.1 or Latest version, Bootstrap 4.1.3 or Latest, Font Awesome 4 or 5,
hoverIntent 1.9 and Lodash JS 4.17
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 8 KB

How to Make Bootstrap 4 Responsive Mega Menu on Hover

1. Load the jQuery, Bootstrap 4 framework, Font Awesome and all other necessary assets for mega menu in your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Hover Intent Js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.9.0/jquery.hoverIntent.min.js'></script>

<!-- Lodash Js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js'></script>

2. After that, also include the Mega Menu ‘s CSS and JavaScript files into your page.

<!-- Mega Menu CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Mega Menu Js -->
<script  src="js/index.js"></script>

3. Finally, create (or copy the following) HTML structure for mega menu like below and add your links in it.

 <nav class="megamenu">
    <ul class="megamenu-nav d-flex justify-content-center" role="menu">
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fa fa-home"></i>
                <span class="sr-only">Home</span>
            </a>
        </li>
        <li class="nav-item is-parent">
            <a class="nav-link" href="#" id="megamenu-dropdown-1" aria-haspopup="true" aria-expanded="false">
                Link 1 <i class="fa fa-angle-down"></i>
            </a>
            <div class="megamenu-content" aria-labelledby="megamenu-dropdown-1">
                <div class="container">
                    <div class="row">
                        <div class="col-8 pr-5">
                            <div class="row">
                                <div class="col-6">
                                    <h3 class="">Another title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-6">
                                    <h3 class="">Some title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex">
                                <div class="align-self-center pr-4">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae corrupti reprehenderit provident ipsam quibusdam, iste ad amet exercitationem sunt. Impedit libero aperiam ratione reiciendis dolorem itaque aut quas eos labore.
                                </div>
                                <div class="align-self-center">
                                    <a href="#" class="btn btn-outline-primary">Click me</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <img src="https://source.unsplash.com/640x480/?bikini" class="img-fluid mb-3" alt="test image">
                            <p>
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, expedita sint quis rem amet, a nihil, non sunt ea quasi.
                            </p>
                            <a href="#">See more <i class="fa fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="nav-item is-parent">
            <a class="nav-link" href="#" id="megamenu-dropdown-2" aria-haspopup="true" aria-expanded="false">
                Link 2 <i class="fa fa-angle-down"></i>
            </a>
            <div class="megamenu-content" aria-labelledby="megamenu-dropdown-2">
                <div class="container">
                    <div class="row">
                        <div class="col-8 pr-5">
                            <div class="row">
                                <div class="col-6">
                                    <h3 class="">Some title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 4</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-6">
                                    <h3 class="">Another title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem 2</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex">
                                <div class="align-self-center pr-4">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae corrupti reprehenderit provident ipsam quibusdam, iste ad amet exercitationem sunt. Impedit libero aperiam ratione reiciendis dolorem itaque aut quas eos labore.
                                </div>
                                <div class="align-self-center">
                                    <a href="#" class="btn btn-outline-primary">Click me</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <img src="https://source.unsplash.com/640x480/?yoga" class="img-fluid mb-3" alt="test image">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, expedita sint quis rem amet, a nihil, non sunt ea quasi.</p>
                            <a href="#">Read more <i class="fa fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="nav-item is-parent">
            <a class="nav-link" href="#" id="megamenu-dropdown-3" aria-haspopup="true" aria-expanded="false">
                Link 3 <i class="fa fa-angle-down"></i>
            </a>
            <div class="megamenu-content" aria-labelledby="megamenu-dropdown-3">
                <div class="container">
                    <div class="row">
                        <div class="col-8 pr-5">
                            <div class="row">
                                <div class="col-6">
                                    <h3 class="">Another title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-6">
                                    <h3 class="">Some title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex">
                                <div class="align-self-center pr-4">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae corrupti reprehenderit provident ipsam quibusdam, iste ad amet exercitationem sunt. Impedit libero aperiam ratione reiciendis dolorem itaque aut quas eos labore.
                                </div>
                                <div class="align-self-center">
                                    <a href="#" class="btn btn-outline-primary">Click me</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <img src="https://source.unsplash.com/640x480/?rose" class="img-fluid mb-3" alt="test image">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, expedita sint quis rem amet, a nihil, non sunt ea quasi.</p>
                            <a href="#">Read more <i class="fa fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="nav-item is-parent">
            <a class="nav-link" href="#" id="megamenu-dropdown-4" aria-haspopup="true" aria-expanded="false">
                Link 4 <i class="fa fa-angle-down"></i>
            </a>
            <div class="megamenu-content" aria-labelledby="megamenu-dropdown-4">
                <div class="container">
                    <div class="row">
                        <div class="col-8 pr-5">
                            <div class="row">
                                <div class="col-6">
                                    <h3 class="">Some title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 4</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-6">
                                    <h3 class="">Another title</h3>
                                    <hr>
                                    <ul class="subnav">
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 1</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Menuitem 3</a>
                                        </li>
                                        <li class="subnav-item">
                                            <a href="#" class="subnav-link">Another menuitem 2</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex">
                                <div class="align-self-center pr-4">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae corrupti reprehenderit provident ipsam quibusdam, iste ad amet exercitationem sunt. Impedit libero aperiam ratione reiciendis dolorem itaque aut quas eos labore.
                                </div>
                                <div class="align-self-center">
                                    <a href="#" class="btn btn-outline-primary">Click me</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <img src="https://source.unsplash.com/640x480/?bike" class="img-fluid mb-3" alt="test image">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, expedita sint quis rem amet, a nihil, non sunt ea quasi.</p>
                            <a href="#">Read more <i class="fa fa-angle-double-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                Link without megamenu
            </a>
        </li>
    </ul>
    <div class="megamenu-background" id="megamenu-background"></div>
</nav>

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...