Hello friends, Now we go for some standard development of mega-menu using html and css . Everyone seen amazon website and you navigate on products/category using mega menu. Look like great and we feel amazon 🙂
Now i describe you to how can we build custom mega menu same as amazon mega menu and it’s simple and light weight without using any jQuery script.
Amazon mega menu
See live demo and download source code after learning below points
Mega menu if a wide/large width with no of categories and image to view what’s inside the main category looks. See below code for how we create mega menu same as amazon mega menu:
Step 1: Add style-sheet link in you project/demo
<link rel="stylesheet" type="text/css" href="style.css">
Step 2: Create a html look for view menu structure
<!--Start mega-menu-->
<div class="menu">
<div class="link">
<div class="btn btn-nav init-megamenu">
<!--Mega menu text-->
<h5>Mega Menu</h5>
<div id="megamenu">
<!--Menus-->
<div class="menu">
<ul>
<li class="hash-child">
<!--Main menu contents/submenu and title-->
<div class="content">
<a href="http://queyep.com">
<h4>Amazon Apps</h4>
<span>Shopping, Kindle, Appstore</span>
</a>
</div>
<!--Sub menu-->
<!--withImg add class if have menu image-->
<div class="sub-menu withImg">
<ul>
<li>
<div class="nav">
<!--Sub menu category group-->
<div class="cat-group">
<span class='title'>
Main Category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
<li><a href="http://www.queyep.com">Child category 3</a></li>
</ul>
</div>
</div>
<!--Megamenu background image-->
<a href="http://www.amazon.in/b/ref=sweeps_flyout?_encoding=UTF8&node=6967394031"><img src="amazon-sample-image.png" height="100%" class="menu-img2"></a>
</li>
</ul>
</div>
</li>
<!--Second menu same as above-->
<li class="hash-child">
<div class="content">
<a href="http://queyep.com">
<h4>Amazon Game Apps</h4>
<span>Shopping, Kindle, Appstore</span>
</a>
</div>
<!--withImg add class if have menu image-->
<div class="sub-menu withImg">
<ul>
<li>
<div class="nav"><div class="cat-group">
<span class='title'>
Game category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
</ul>
</div>
<div class="cat-group">
<span class='title'>
Game category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
</ul>
</div>
<div class="cat-group">
<span class='title'>
Game category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
</ul>
</div>
</div>
<a href="https://9code.info/"><img src="amazon-game.png" height="100%" class="menu-img"></a>
</li>
</ul>
</div>
</li>
<li class="hash-child">
<div class="content">
<a href="http://queyep.com">
<h4>Amazon Open Apps</h4>
<span>Shopping, Kindle, Appstore</span>
</a>
</div>
<div class="sub-menu">
<ul>
<li>
<div class="nav">
<div class="cat-group">
<span class='title'>
Game category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
</ul>
</div>
<div class="cat-group">
<span class='title'>
Game category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
</ul>
</div>
<div class="cat-group">
<span class='title'>
Game category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
</ul>
</div>
<div class="cat-group">
<span class='title'>
Game category</span>
<ul>
<li><a href="http://www.queyep.com">Child category 1</a></li>
<li><a href="http://www.queyep.com">Child category 2</a></li>
<li><a href="http://www.queyep.com">Child category 3</a></li>
</ul>
</div>
</div>
</li>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
In above pure HTML you can made mega menu to responsive also for as per your requirement.
Step 3: See below style sheet for display and view properly position and menu hover effect’s, Main part of css in this mega menu because I was developed each effect’s using css
a{
text-decoration: none;
}
/*************Mega Menu style ************/
/*Main menu button*/
.btn h5{
padding: 9px 20px;
width: 70px;
border: 1px solid #eee;
background-color: #fafafa;
margin: 0px;
display: block;
color: rgb(130, 130, 131);
border-radius: 3px;
}
.btn h5:hover{
color: rgb(63, 164, 249);
}
#megamenu{
display: none;
padding: 10px;
width: auto;
height: auto;
position: absolute;
}
#megamenu .menu{
border: 1px solid #eaeaea;
position: relative;
background: #ffffff;
border: 1px solid #eaeaea;
box-shadow: 0px 0px 7px -2px #ddd;
}
/*For up arrow start*/
#megamenu .menu:after, #megamenu .menu:before {
bottom: 100%;
left: 15%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#megamenu .menu:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 7px;
margin-left: -7px;
}
#megamenu .menu:before {
border-color: rgba(234, 234, 234, 0);
border-bottom-color: #eaeaea;
border-width: 8px;
margin-left: -8px;
}
#megamenu .menu li.hash-child:hover:after{
content: "";
position: absolute;
top: 0px;
bottom: 0px;
width: 6px;
background: #fff;
right: 8px;
}
/*Up arrow end*/
/*MEga menus ul style*/
#megamenu ul {
list-style-type: none;
padding: 10px;
margin: 0px;
position: relative;
}
#megamenu .child-nav{
display: none;
}
.menu li h4{
padding: 0px 5px;
margin: 3px 0px;
}
li span{
padding: 0px 5px;
color: #999;
}
.menu li{
padding-right: 10px;
}
.menu li.hash-child>.content{
/* this data image copied from amazon.in */
background-image: url(data:image/gif;base64,R0lGODlhBwAKAMIEAObm5uvr6/Dw8P39/f///////////////yH5BAEKAAcALAAAAAAHAAoAAAMWSDPUGoE5AaIj1M4qMW+ZFDYD1ClnAgA7);
background-position: right 10px;
background-repeat: no-repeat;
padding-right: 10px;
display: inline-block;
}
.menu li.hash-child:hover>.content{
background-image: url(data:image/gif;base64,R0lGODlhBwAKAMIEAICAgJmZmbOzs/f39////////////////yH5BAEKAAcALAAAAAAHAAoAAAMWSDPUGoE5AaIj1M4qMW+ZFDYD1ClnAgA7);
}
.menu .content>a{
color: #000;
}
.menu li:hover h4{
color: rgb(0, 148, 255);
}
.menu li:hover span{
color: #555
}
.sub-menu{
display: none;
}
.menu li:hover .sub-menu
{
display: inline-block;
position: absolute;
min-height: 100%;
height: auto;
background: #fff;
top: -1px;
left: 95.99%;
border: 1px solid rgb(234, 234, 234);
box-shadow: 0px 0px 7px -2px #ddd;
min-width: 450px;
}
.menu li:hover .sub-menu.withImg
{
min-width: inherit;
}
.sub-menu ul{
padding: 0px !important;
margin: 0px !important;
}
.sub-menu ul li{
padding-right: 0px;
}
.sub-menu ul li .nav{
padding: 10px;
z-index: 999;
}
.sub-menu.withImg ul li .nav{
position: absolute;
padding: 10px;
z-index: 999;
}
.sub-menu span.title{
font-size: 18px;
color: rgb(0, 148, 255) !important;
}
.nav ul{
padding-left: 10px !important;
list-style-type: circle !important;
padding-left: 25px !important;
}
.nav .cat-group{
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
/*child menu image*/
.menu-img{
position: relative;
left: 0px;
height: 58%;
top: 5px;
}
.menu-img2{
position: relative;
left: 4%;
height: 68%;
top: 5px;
}
.init-megamenu:hover #megamenu{
display: block;
}Then after see you site menu is present with like like amazon mega menu:
If you have any query or questions regarding this tutorials or any other then please fill free and ask me to i help you.
Thanks and regard,
Sir it’s amazing I lot’s of helpful for my website
It’s a amazing and lot’s of helpful for my website + knowledge
This is a beautiful menu. I would like to understand how to make it responsive please, to a vertical dropdown. Thank you if you can help.
Thanks you Bell.
Sure i will help you for make it responsive… I will made for you other demo of vertical responsive/mobile friendly mega menu…
That is awesome and INCREDIBLY nice! Thank you so much.