How to build a responsive mega menu
5 min readJun 2, 2020
Build a responsive mega menu in HTML, CSS, and Javascript. First of all, nothing can be more reliable than a flat, one-level menu. Though, the difficulty is that a simple menu is suitable for small sites only. But, when we need to build navigation paths for something that has more than ten pages, we are forced to create multi-level menus.
Let’s consider that a mega menu is something that has a thick structure with various node levels. It is well known as the type of menu found on any large or middle-sized website where content managers need to represent a lot of data impossible to compress into a simple, one or two-level menu. Generally, mega menus include different media content to better visually represent the navigation categories of the website.
So, Let’s begin How to build a responsive mega menu with the help of HTML, CSS, and Javascript. First, you need to create a file with the name index.html or whatever you want. After that take a look below.
HTML CODE:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="mega-container">
<div class="mega">
<ul>
<li><a href="#">Home</a></li>
<li><a href="https://softcodeon.com">Services</a>
<ul>
<li><a href="https://softcodeon.com">Department</a>
<ul>
<li><a href="https://softcodeon.com">English</a></li>
<li><a href="#">Biology</a></li>
<li><a href="#">Chemistry</a></li>
<li><a href="#">Computer</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">World</a></li>
<li><a href="#">Life</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Crona Update</a></li>
</ul>
</li>
<li><a href="#">Research</a>
<ul>
<li><a href="#">Nasa</a></li>
<li><a href="#">Soft CodeOn</a></li>
<li><a href="#">Programmer</a></li>
<li><a href="#">Sciencetist</a></li>
</ul></li>
<li><a href="#">Extra</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="https://softcodeon.com">News</a>
<ul>
<li><a href="https://softcodeon.com">Today</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Sport</a></li>
</ul></li>
<li><a href="https://softcodeon.com">Contact</a>
</li></ul></div></div>CSS CODE:
* {margin:0;padding:0; box-sizing: border-box;}
a { color: #fff; text-decoration:none;}
.mega-container {
width: 100%;
margin: 0 auto;
background: #d1499b;
}
.mega-mobile {
display: none;
padding: 20px;
background:green;}
.mega-mobile:after {
content: "\f394";
font-family: "Ionicons";
font-size: 2.5rem;
padding: 0;
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);
transform: translateY(-25%);}
.mega-dropdown-icon:before {
content: "\002B";
font-family: "Ionicons";
display: none;
cursor: pointer;
float: right;
padding: 1.5em 2em;
background: #fff;
color: #333;}
.mega > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
box-sizing: border-box;}
.mega > ul:before,
.mega > ul:after {
content: "";
display: table;}
.mega > ul:after {
clear: both;}
.mega > ul > li {
float: left;
background: #d1499b;
padding: 0;
margin: 0;}
.mega > ul > li a {
text-decoration: none;
padding: 1.5em 3em;
display: block;}
.mega > ul > li:hover {
background: #782bab;}
.mega > ul > li > ul {
display: none;
width: 100%;
background:#000;
padding: 20px;
position: absolute;
color:white;
z-index: 99;
left: 0;
margin: 0;
list-style: none;
box-sizing: border-box;}
.mega > ul > li > ul:before,
.mega > ul > li > ul:after {
content: "";
display: table;}
.mega > ul > li > ul:after {
clear: both;}
.mega > ul > li > ul > li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;}
.mega > ul > li > ul > li a {
color: #777;
padding: .2em 0;
width: 95%;
display: block;
color:white;
border-bottom: 2px solid yellow;
font-weight:bold;}
.mega > ul > li > ul > li a:hover{
color:#64e3d6;}
.mega > ul > li > ul > li > ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
box-sizing: border-box;}
.mega > ul > li > ul > li > ul:before,
.mega > ul > li > ul > li > ul:after {
content: "";
display: table;}
.mega > ul > li > ul > li > ul:after {
clear: both;}
.mega > ul > li > ul > li > ul > li {
float: left;
width: 100%;
padding: 10px 0;
margin: 0;
font-size: .8em;}
.mega > ul > li > ul > li > ul > li a {
border: 0;}
.mega > ul > li > ul.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;}
.mega > ul > li > ul.normal-sub > li {
width: 100%;}
.mega > ul > li > ul.normal-sub > li a {
border: 0;
padding: 1em 0;}
/* Mobile style's */
@media only screen and (max-width: 959px) {
.mega-container { width: 100%;}
.mega-mobile { display: block;}
.mega-dropdown-icon:before { display: block; }
.mega > ul { display: none; }
.mega > ul > li { width: 100%; float: none;display: block;}
.mega > ul > li a {padding: 1.5em;width: 100%;display: block;}
.mega > ul > li > ul {position: relative;}
.mega > ul > li > ul.normal-sub {width: 100%; }
.mega > ul > li > ul > li { float: none; width: 100%;margin-top: 20px;}
.mega > ul > li > ul > li:first-child { margin: 0;}
.mega > ul > li > ul > li > ul {position: relative;}
.mega > ul > li > ul > li > ul > li {float: none;}
.mega .show-on-mobile {display: block;}
}Javascript Code:
$(document).ready(function () {
"use strict";
$('.mega > ul > li:has( > ul)').addClass('mega-dropdown-icon');
$('.mega > ul > li > ul:not(:has(ul))').addClass('normal-sub');
$(".mega > ul").before("<a href=\"#\" class=\"mega-mobile\">Navigation</a>");
$(".mega > ul > li").hover(
function (e) { if ($(window).width() > 943) {
$(this).children("ul").fadeIn(150);
e.preventDefault();}
}, function (e) {
if ($(window).width() > 943) {
$(this).children("ul").fadeOut(150);
e.preventDefault(); }});
$(document).on('click', function(e){
if($(e.target).parents('.mega').length === 0)
$(".mega > ul").removeClass('show-on-mobile');});
$(".mega > ul > li").click(function() {
var thismega = $(this).children("ul");
var prevState = thismega.css('display');
$(".mega > ul > li > ul").fadeOut();
if ($(window).width() < 943) {
if(prevState !== 'block')
thismega.fadeIn(150);}});
$(".mega-mobile").click(function (e) {
$(".mega > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
});Alright, we’ve done everything. So, you just need to copy the above HTML, CSS, and Javascript code and put it into your index.html file. After that, hit the save button from your text editor and then open index.html file into your browser. You will see a responsive mega menu. Good luck.
