How to build a responsive mega menu

Create a Responsive Mega Menu
<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>
* {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;}
}
$(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();
});
});

--

--

--

Innovative tech mind with 15 years of experience working as a computer programmer. Capable of working with a variety of technology and software solutions…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Node.js Password-free Sign-in

How to implement Redis caching in a NodeJS project

Feature flag & toggle

How this drawing changed me as a developer

React Hooks

Using HomeBrew to Install Java JDK11 on macOS

The Adapter Pattern in JavaScript

Striped pattern

Create a React Native App with Google Map using Expo.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Muhammad Rauf.

Muhammad Rauf.

Innovative tech mind with 15 years of experience working as a computer programmer. Capable of working with a variety of technology and software solutions…

More from Medium

Make your Github profile look great!

Crisp Chat — Contact Form Integration in under 5 Minutes

100 Days of Code — Day 4.

How The Web Workds image

Google Chrome brings a new smart, customizable toolbar shortcut — Yashraj Solutions