Responsive Mega Menu Plugin in jQuery & CSS3

0 118

If you have large website with number of links then it is difficult to display all the link in single navigation bar that’s why mega menu concept help you to display all your website links in single frame with multi dimensional view. It helps to building a large website with multiple categories and subcategories, a mega menu can do wonders to improve the user experience.Simply put, a mega menu is a drop-down menu with multi-level expansions that lets you pack your website’s entire navigation into a single menu.

Integrate Mega Menu on Your Website

Follow below steps into your website to integrate mega menu.

Libraries

jQuery Mega menu plugin dependent on jQuery core library include first then add navScript.js

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="navScript.js"></script>

HTML

Create the html unordered list for the multi-level mega menu.

<div class="menu-container clearfix">
	<button class="nav_menu_toggler_icon"><span class="fa fa-bars"></span></button>
		<nav class="manu clearfix">
			<ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">School</a>
                            <ul>
                                <li><a href="#">Lidership</a></li>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Locations</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Research</a>
                            <ul>
                                <li><a href="#">Undergraduate research</a></li>
                                <li><a href="#">Masters research</a></li>
                                <li><a href="#">Funding</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Something</a>
                            <ul>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                                <li><a href="#">Sub something</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">News</a>
                    <ul>
                        <li><a href="#">Today</a></li>
                        <li><a href="#">Calendar</a></li>
                        <li><a href="#">Sport</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a>
                    <ul>
                        <li><a href="#">School</a>
                            <ul>
                                <li><a href="#">Lidership</a></li>
                                <li><a href="#">History</a></li>
                                <li><a href="#">Locations</a></li>
                                <li><a href="#">Careers</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Study</a>
                            <ul>
                                <li><a href="#">Undergraduate</a></li>
                                <li><a href="#">Masters</a></li>
                                <li><a href="#">International</a></li>
                                <li><a href="#">Online</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Empty sub</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
            </ul>
		</nav>
	</div>
	<div>
		<div class="container_help">
			<h2>Responsive Mega Menu Plugin</h2>
		</div>
	</div>

 

CSS

Add CSS on page for styling your multi-level mega menu.

.menu-container{
	width:100%;
	display: none;
	z-index: 100;
	margin: 0 auto 0 auto;
	background-image: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.2),rgba(0,0,0,.0))
}
.menu-container:after,
.menu-container:before{
    content: "";
    clear: both;
}
.menu-container:after{
    display: table;
}
.menu-container .manu{
	width:95%;
	display: block;
	position: relative;
	margin: 0 auto 0 auto;
}
.menu ul{	
}
.menu ul:before,
.menu ul:after {
    content: "";
    display: table;
}
.menu ul:after {
    clear: both;
}
.menu:before,
.menu:after {
    content: "";
    display: table;
}
.menu:after {
    clear: both;
}
.menu ul li ul:before,
.menu ul li ul:after {
    content: "";
    display: table;
}
.menu ul li ul:after {
    clear: both;
}
.menu-container .manu ul li{
	float: left;
	background-color: transparent;
}
.menu-container .manu ul li a{
	display: block;
	padding: 15px 25px;
	color: #fff;
	font-size: 16px;
	transition: .2s;
}
.menu-container .manu ul li a span{
	transition: .3s all ease-out;
	line-height: 0px;
}
.menu-container .manu ul li a:hover{
	color:#14a0f9;
}
.menu-container .manu ul li a:hover span{
	transform: rotate(180deg);
	padding-right: 5px;
}
.menu-container .manu ul li a:hover{
	border-bottom: 1px solid #fff;
}
span.drop_down_icon{
	color:#fff;
	padding-left: 5px;
	font-size: 18px;
	position: absolute;
	margin-top: 11px;
}
.menu-container .manu ul li .have_dropdown{
	background-color:transparent;
	position: absolute;
/*	left: 0;*/
	display: none;
/*	width: 100%;*/
}
.menu-container .manu ul li .have_dropdown li{
	width:25%;
	float:none;
}
.menu-container .manu ul li .have_dropdown_n_style{
	background-color: transparent;
	position: absolute;
	left: 0;
	display: none;
	width: 100%;
}
.menu-container .manu ul li .have_dropdown_n_style li a{
	color: #0076db;
	border-bottom: 1px solid #fff;
}
.menu-container .manu ul li .have_dropdown_n_style li a:hover{
	font-weight: bold;
}
.menu-container .manu ul li .have_dropdown_n_style li ul li a{
	color: #285284;
	border-bottom: none;
}
.menu-container .manu ul li .have_dropdown_n_style li ul li a:hover{
	color: #0076db;
	font-weight: normal;
	background-color: #fafafa;
	text-decoration: underline;
}
.menu-container .manu ul li .have_dropdown_n_style li{
	width:25%;
	float:left;
}
.menu-container .manu ul li .have_dropdown_n_style{
	background-color: #eee;
}
.menu-container .manu ul li .have_dropdown li a{
	width: 150px;
	text-align: center;
	float: left;
	color:#285284;
	background-color: #fff;
	font-weight: normal;
}
.menu-container .manu ul li .have_dropdown li a:hover{
	background-color: #FAFAFA;
	color: #14a0f9;
}
.menu-container .manu ul li .have_dropdown li ul li{
	display: none;
}
.menu-container .manu ul li .have_dropdown_n_style li ul li{
	background-color: #fff;
	height: auto;
	float: none;
	display: block;
	width: 100%;
}
.nav_menu_toggler_icon{
	cursor: pointer;
	position: absolute;
	right: 5%;
	top: 2.3%;
	background: none;
	color: #fff;
	font-size: 25px;
	z-index: 150;
	display: none;
	border: none;
}
.nav_menu_toggler_icon span{
	padding: 2px 7px;
	border-radius: 8px;
}
.nav_menu_toggler_icon:active{
	color: #ddd;
}
.container_help{
	text-align: center;
	margin-top: 40vh;
}
.container_help h2{
	color: #fff;
	font-size: 30px;
	font-weight: normal;
}
@media only screen and (max-width: 756px) {
	.nav_menu_toggler_icon{
		display:block;
	}
	.menu-container{
		background: skyblue;
	}
	.menu-container .manu{
		display: none;
	}
	.menu-container .manu ul li{
		float: none;
		display: block;
	}
	.menu-container .manu ul li .have_dropdown{
		background-color:transparent;
		display: none;
		position: relative;
	}
	.menu-container .manu ul li .have_dropdown li{
		display: block;
		float: none;
		width: 100%;
		background-color: #fff;
	}
	.menu-container .manu ul li .have_dropdown li a{
		display: block;
		float: none;
		width: 100%;
		padding: 15px 0px;
	}
	.menu-container .manu ul li .have_dropdown_n_style li{
		width:100%;
		float: none;
	}
	.menu-container .manu ul li .have_dropdown_n_style li a{
		float: none;
	}
	.menu-container .manu ul li .have_dropdown_n_style{
		position: relative;
	}
}

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Leave A Reply

Your email address will not be published.