CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

The solitary strategy we had of investigating a site used to a little menu with navigational connections to chronicles and classes. This improved when the drop-down menu became. And afterward came the super menu.

Today, most news sites, online stores, and eCommerce sites would be inadequate without a super menu. Indeed, even the greatest retail sites, for example, Amazon and eBay wouldn’t be such a triumph without assistance from their uber menus.

What is a super menu, precisely? Would it be advisable for you to utilize a super menu on your site? How might you introduce one in WordPress? Continue to peruse to discover the appropriate responses.

 

Create A Mega Menu 

Make a mega menu that seems when the user moves the mouse over a component inside a navbar and hover on it, that time mega menu will start display. This is a very good approach to use only with css no any JS and jQuery required. Examining immense areas has dependably been a plan issue. You could make a huge sitemap-like menu with relationship with each page, yet it would turn out to be difficult to review and become legitimately colossal as more pages are added.

Step 1 : Add HTML

<div class="nav">
<nav>
<a href="javascript:void(0);" class="mobile-menu-trigger">Open mobile menu</a>
<ul class="menu menu-bar">
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">1. Multilevel mega
menu</a>
<ul class="mega-menu mega-menu--multiLevel">
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.1 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.1 Page link</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-list-link" aria-haspopup="true">1.1.2 Flyout link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.2 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.3 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.3.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.3.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link">1.4 Page link</a>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">2. Flat mega menu (3
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.1.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.2 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.3 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
</ul>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">3. Flat mega menu (2
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="#" class="menu-link mega-menu-link mega-menu-header">3.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.1 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
</ul>
</li>
<li class="mega-menu-content">
<p class="mega-menu-header">3.2 Page link header</p>
<p>This is just static content. You can add anything here. Images, text, buttons, your grandma's secrect recipe.</p>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-bar-link">Static link</a>
</li>
<li class="mobile-menu-header">
<a href="/home" class>
<span>Home</span>
</a>
</li>
</ul>
</nav>
</div>

Modal Explained

So, Utilize any component to open the mega menu, for example, a button element.

Utilize a holder component to make the dropdown menu and add a framework (segments) and add dropdown joins inside the lattice.

Wrap a component around the catch and the holder component ( to position the dropdown menu effectively with CSS.

STEP 2 : ADD CSS

* {
font-family: cursive;
}

nav ul,
nav li {
list-style: none;
padding: 0;
margin: 0;
}

nav a {
display: block;
text-decoration: none;
}

nav a:hover,
nav a:visited {
text-decoration: none;
}

.menu-bar {
background: #ffffff;
display: flex;
}

.menu-link {
padding: 15px 10px;
background: #ffffff;
color: #c16161;
transition: background 0.2s, color 0.2s;
position: relative;
z-index: 1;
}

.menu-link[aria-haspopup="true"] {
padding-right: 40px;
}

.menu-link[aria-haspopup="true"]:after {
content: "";
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#accent');
background-size: 14px;
width: 14px;
height: 14px;
font-size: 12px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

.mega-menu-header {
font-size: 1.2em;
text-transform: uppercase;
font-weight: bold;
color: #136a73;
}

.mega-menu {
background: #ffffff;
z-index: 10;
}

.mega-menu--multiLevel {
flex-direction: column;
}

@media all and (min-width: 951px) {
.nav {
background: #ffffff;
}
.nav>nav {
max-width: 900px;
margin: 0 auto;
}
.menu [aria-haspopup="true"]~ul {
display: none;
}
.menu-bar {
position: relative;
}
.menu-bar>li>[aria-haspopup="true"]:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#accent');
}
.menu-bar>li>[aria-haspopup="true"]:hover:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light');
}
.menu-bar>li>[aria-haspopup="true"]:focus~ul {
display: flex;
transform-origin: top;
animation: dropdown 0.2s ease-out;
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover {
display: flex;
}
.menu-bar>li:focus-within>[aria-haspopup="true"]~ul {
display: flex;
}
.menu-bar>li>[aria-haspopup="true"]:focus,
.menu-bar>li:focus-within>[aria-haspopup="true"],
.menu-bar>li:hover>a {
background: #c16161;
color: #ffffff;
}
.menu-bar>li>[aria-haspopup="true"]:focus:after,
.menu-bar>li:focus-within>[aria-haspopup="true"]:after,
.menu-bar>li:hover>a:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowTop.svg#light');
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.mega-menu:hover {
display: flex;
}
.mega-menu a:hover {
background: #dceced;
color: #136a73;
}
.mega-menu--multiLevel>li {
width: 33.33333333%;
}
.mega-menu--multiLevel>li>[aria-haspopup="true"]~ul {
left: 33.33333333%;
width: 33.33333333%;
}
.mega-menu--multiLevel>li>[aria-haspopup="true"]~ul ul {
width: 100%;
left: 100%;
}
.mega-menu--multiLevel li:hover>[aria-haspopup="true"]~ul {
display: block;
transform-origin: left;
animation: flyout 0.2s ease-out;
}
.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"]~ul {
display: block;
}
.mega-menu--multiLevel li:hover>[aria-haspopup="true"],
.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"],
.mega-menu--multiLevel li:hover>a,
.mega-menu--multiLevel li:focus-within>a {
background: #dceced;
color: #136a73;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul,
.mega-menu--multiLevel [aria-haspopup="true"] {
border-left: 1px solid #f0f0f0;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul:hover,
.mega-menu--multiLevel [aria-haspopup="true"]:hover {
display: block;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul {
position: absolute;
top: 0;
height: 100%;
}
.mega-menu--flat>* {
flex: 1;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: none;
}
}

@media all and (max-width: 950px) {
.nav {
padding: 20px;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: block;
}
.mobile-menu-trigger {
background: #c16161;
color: #ffffff;
border: 0;
padding: 10px;
font-size: 1.2em;
border-radius: 4px;
}
.mobile-menu-header {
order: -1;
background: grey;
}
.mobile-menu-header a {
padding: 20px 25px;
color: #ffffff;
visibility: visible;
}
.menu-bar {
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
height: 100vh;
width: 350px;
max-width: 350px;
max-width: 90%;
overflow-x: hidden;
transition: left 0.3s;
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.25);
}
.menu-bar>li>[aria-haspopup="true"]~ul {
display: flex;
flex-direction: column;
background: #ffffff;
position: absolute;
left: 100%;
top: 0;
max-height: 100vh;
width: 100%;
transition: left 0.3s;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"] {
font-size: 1.2em;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul a {
padding-left: 40px;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul a {
padding-left: 80px;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"] {
color: #2a2a2a;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:after {
content: "+";
background: none;
font-size: 1em;
font-weight: normal;
height: 20px;
line-height: 1;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]~ul {
max-height: 0px;
transform-origin: top;
transform: scaleY(0);
transition: max-height 0.1s;
}
.mega-menu-content {
padding: 20px 25px;
}
.mobile-menu-back-item {
order: -1;
}
.mobile-menu-back-item a {
background: #d9d9d9;
color: #2a2a2a;
max-height: calc(1.4em + 40px);
margin-top: calc(0px - (1.4em + 40px));
pointer-events: none;
}
.mobile-menu-back-item a:before {
content: "";
width: 14px;
height: 12px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');
background-size: 14px;
margin-right: 10px;
display: inline-block;
}
.mobile-menu-trigger:focus~ul {
left: 0;
}
.menu-bar:hover,
.menu-bar:focus-within {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]:focus~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul {
margin-top: calc(1.4em + 40px);
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover,
.menu-bar>li>[aria-haspopup="true"]~ul:focus-within {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:focus~ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar>li>[aria-haspopup="true"]~ul li:focus-within>[aria-haspopup="true"]~ul {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar>li:focus-within~.mobile-menu-header a {
visibility: hidden;
}
}

@media all and (max-width: 950px) and (hover: none) {
.mobile-menu-trigger:hover~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]:hover~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:hover~ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]~ul:hover {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar>li:hover~.mobile-menu-header a {
visibility: hidden;
}
}

@keyframes dropdown {
0% {
opacity: 0;
transform: scaleY(0);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(1);
}
}

@keyframes flyout {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}

See all the CSS related posts

LIVE DEMO

See the Pen sdfsdf by Rohit Gautam (@TheRrohitt) on CodePen.

Please follow and like us:

Tagged in:

,