Skip to content
Related Articles

Related Articles

Improve Article

jQuery Megadropdown.js

  • Difficulty Level : Hard
  • Last Updated : 31 Mar, 2021

Megadropdown.js is a jQuery plugin that is used for easy implementation of the drop-down menu. We can create responsive drop-down menus easily using megadropdown.js. 

We can take standard HTML nested lists and turns them into horizontal mega menus using this plugin.

Its features are as follows:

  • We can add animation-effects like fade in or slide down to display sub-menus.
  • We can select the number of sub-menu items to be shown on each row of the mega menu
  • With some basic CSS styling, it can be used to create unique and visually appealing navigation for any website.

CDN Link: To use this plugin, simply add the CDN links.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/mmenu-js/8.5.22/mmenu.js”></script>

Example:

HTML




<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" 
              href=
  
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </script>
        <style>
            .navbar-brand > img {
                padding-top: 11px;
                width: 130px;
                margin-left: 60px;
            }
            .navbar-brand {
                height: auto;
                margin: 0;
                padding: 0;
                margin-right: 20px;
            }
            .navbar-default {
                color: #fff;
                background-color: red;
                border-color: #000000;
            }
            .navbar-default .navbar-nav > li > a {
                color: #fff;
            }
            .navbar-default .navbar-nav > .dropdown > a .caret {
                border-top-color: blue;
                border-bottom-color: #fff;
            }
            .navbar-default .navbar-brand {
                color: #fff;
            }
            .menu-large {
                position: static !important;
            }
            .megamenu {
                padding: 20px 0px;
                width: 100%;
            }
            .megamenu > li > ul {
                padding: 0;
                margin: 0;
            }
            .megamenu > li > ul > li {
                list-style: none;
            }
            .megamenu > li > ul > li > a {
                display: block;
                padding: 3px 20px;
                clear: both;
                font-weight: normal;
                line-height: 1.428571429;
                color: #333333;
                white-space: normal;
            }
            .megamenu > li ul > li > a:hover,
            .megamenu > li ul > li > a:focus {
                text-decoration: none;
                color: #262626;
                background-color: #f5f5f5;
            }
            .megamenu.disabled > a,
            .megamenu.disabled > a:hover,
            .megamenu.disabled > a:focus {
                color: #999999;
            }
            .navbar-default .navbar-nav > li > a:focus,
            .navbar-default .navbar-nav > li > a:hover {
                color: #00a7e8;
            }
            .megamenu.disabled > a:hover,
            .megamenu.disabled > a:focus {
                text-decoration: none;
                background-color: transparent;
                background-image: none;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
                cursor: not-allowed;
            }
            .megamenu.dropdown-header {
                color: #428bca;
                font-size: 18px;
            }
            @media (max-width: 768px) {
                .megamenu {
                    margin-left: 0;
                    margin-right: 0;
                }
                .megamenu > li {
                    margin-bottom: 30px;
                }
                .megamenu > li:last-child {
                    margin-bottom: 0;
                }
                .megamenu.dropdown-header {
                    padding: 3px 15px !important;
                }
                .navbar-nav .open .dropdown-menu .dropdown-header {
                    color: #fff;
                }
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" 
                            class="navbar-toggle" 
                            data-toggle="collapse" 
                            data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown menu-large">
                            <a href="#" class="dropdown-toggle" 
                               data-toggle="dropdown"
                                Courses  </a>
                            <ul class="dropdown-menu megamenu row">
                                <li>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <a href="#" class="photo">
                                            <img src=
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>
  
                        <li class="dropdown menu-large">
                            <a href="#" class="dropdown-toggle"
                            data-toggle="dropdown">
                            Services <b class="caret"></b></a>
                            <ul class="dropdown-menu megamenu row">
                                <li class="col-sm-6">
                                    <ul>
                                        <li class="dropdown-header">
                                            Web
                                        </li>
                                        <li><a href="#">
                                            HTML CSS
                                            </a>
                                        </li>
                                        <li class="disabled"><a href="#">
                                            Node JS
                                            </a>
                                        </li>
                                        <li><a href="#">
                                            React
                                            </a>
                                        </li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">
                                            Andriod
                                        </li>
                                        <li><a href="#">
                                            Kotlin
                                            </a>
                                        </li>
                                        <li><a href="#">
                                            Flutter
                                            </a>
                                        </li>
                                        <li><a href="#">
                                            Java
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="col-sm-6">
                                    <ul>
                                        <li class="dropdown-header">
                                        Graphic Design
                                        </li>
                                        <li><a href="#">
                                        Figma</a>
                                        </li>
                                        <li><a href="#">
                                        Adobe XD</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li class="dropdown-header">
                                        Game Dev
                                        </li>
                                        <li><a href="#">
                                        Blender</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
  
        <script>
            // Javascript to use megadropdown.js
            $(document).ready(function() {
            jQuery(document).ready(function(){
                $(".dropdown").hover(
                    function() { $('.dropdown-menu', this)
                                    .stop().fadeIn("fast");
                    },
                    function() { $('.dropdown-menu', this)
                                    .stop().fadeOut("fast");
                });
            });
            }
        </script>
    </body>
</html>                 

Output:

  • On click of Courses menu:

    Courses menu

  •  On click of Services menu: 

    Services menu

    /li>



My Personal Notes arrow_drop_up
Recommended Articles
Page :