Responsive Mega Menu - CSS3

Developer
Ahsan K. Rathore
Size
4,373 Kb
Views
46,552
  1. Responsive Mega Menu - CSS3 Previews
  2. Responsive Mega Menu - CSS3 HTML Codes
  3. Responsive Mega Menu - CSS3 CSS Codes

How do I make an responsive mega menu - css3?

Responsive Mega Menu Purely CSS3 based with CSS3 transitions applied.. What is a responsive mega menu - css3? How do you make a responsive mega menu - css3? This script and codes were developed by Ahsan K. Rathore on 04 July 2022, Monday.

Responsive Mega Menu - CSS3 Previews
IQ Test

Responsive Mega Menu - CSS3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Mega Menu - CSS3 </title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Available in two variations: "light" and "dark" | Change <header> class to see impact. -->
<header class="dark"> <nav role="navigation"> <a href="javascript:void(0);" class="ic menu"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </a> <a href="javascript:void(0);" class="ic close"></a> <ul class="main-nav"> <li class="top-level-link"> <a><span>Home</span></a> </li> <li class="top-level-link"> <a class="mega-menu"><span>Products</span></a> <div class="sub-menu-block"> <div class="row"> <div class="col-md-4 col-lg-4 col-sm-4"> <h2 class="sub-menu-head">Clothing</h2> <ul class="sub-menu-lists"> <li><a>Mens</a></li> <li><a>Womens</a></li> <li><a>Kids</a></li> <li><a>New Born</a></li> <li><a>View All</a></li> </ul> </div> <div class="col-md-4 col-lg-4 col-sm-4"> <h2 class="sub-menu-head">Handbags</h2> <ul class="sub-menu-lists"> <li><a>Wallets</a></li> <li><a>Athletic bag</a></li> <li><a>Backpack</a></li> <li><a>Bucket Bag</a></li> <li><a>View All</a></li> </ul> </div> <div class="col-md-4 col-lg-4 col-sm-4"> <h2 class="sub-menu-head">Shoes</h2> <ul class="sub-menu-lists"> <li><a>Mens</a></li> <li><a>Womens</a></li> <li><a>Kids</a></li> <li><a>View All</a></li> </ul> </div> </div> <div class="row banners-area"> <div class="col-md-6 col-lg-6 col-sm-6"> <img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;"> </div> <div class="col-md-6 col-lg-6 col-sm-6"> <img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;"> </div> </div> </div> </li> <li class="top-level-link"> <a><span>Services<span></a> </li> <li class="top-level-link"> <a class="mega-menu"><span>About</span></a> <div class="sub-menu-block"> <div class="row"> <div class="col-md-4 col-lg-4 col-sm-4"> <h2 class="sub-menu-head">Company</h2> <ul class="sub-menu-lists"> <li><a>About</a></li> <li><a>Mission</a></li> <li><a>Community</a></li> <li><a>Team</a></li> </ul> </div> <div class="col-md-4 col-lg-4 col-sm-4"> <h2 class="sub-menu-head">Media</h2> <ul class="sub-menu-lists"> <li><a>News</a></li> <li><a>Events</a></li> <li><a>Blog</a></li> </ul> </div> <div class="col-md-4 col-lg-4 col-sm-4"> <h2 class="sub-menu-head">Careers</h2> <ul class="sub-menu-lists"> <li><a>New Opportunities</a></li> <li><a>Life @ Company</a></li> <li><a>Why Join Us?</a></li> </ul> </div> </div> <div class="row banners-area"> <div class="col-md-6 col-lg-6 col-sm-6"> <img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;"> </div> <div class="col-md-6 col-lg-6 col-sm-6"> <img src="http://devitems.com/tf/teemo-preview/teemo/img/banner/banner-menu1.jpg" width="100%;"> </div> </div> </div> </li> <li class="top-level-link"> <a><span>Contact</span></a> </li> </ul> </nav> <blockquote> <h2>Responsive Mega Menu - CSS3</h2> <br> <strong>Cross Browser Support:</strong> <br> Tested on Chrome (48.0.2564.109 m), Firefox, IE 11, Chrome Browser for Android 5.1.1 (Xperia Z2), Windows Phone 8.0 for Lumia 720 <br><br> <strong>Expected Support for Desktop:</strong><br> IE9+, Chrome, Firefox, Opera, Safari for Mac, <a href="http://caniuse.com/#search=transform" target="_blank">See All Browsers</a> <br><br> <strong>Expected Support for Handheld:</strong><br> Chrome Browser for Android, Android Browser, Safari for iOS, Windows Phone 8.1, <a href="http://caniuse.com/#search=transform" target="_blank">See All Browsers</a> <br> <hr> Available in two variations: "light" and "dark" | Change &lt;header&gt; class to see impact. </blockquote>
</header>
</body>
</html>

Responsive Mega Menu - CSS3 - Script Codes CSS Codes

/* Body Styles */
body { margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; background-color: #fff;
}
header.dark blockquote { color:#fff; }
header.light blockquote { color:#000; }
blockquote { max-width: 1000px; margin:0 auto; font-size: 16px; border-left: 0px; padding: 20px ;
}
blockquote h2 { padding-right: 40px; margin: 0px; }
header.dark blockquote a {color: orange; text-decoration: underline;}
header.light blockquote a {text-decoration: underline;}
header { min-height: 450px; }
header.dark { background-color: #444; }
header.light { background-color: #fff; }
/* Navigation Styles */
nav { position: relative; }
header.dark nav { background-color:rgba(255,255,255,0.5); }
header.light nav { background-color:rgba(0,0,0,0.5); }
ul.main-nav { list-style-type: none; padding: 0px; font-size: 0px; max-width: 1000px; margin: 0 auto;
}
ul.main-nav > li { display: inline-block; padding: 0;
}
ul.main-nav > li > a { display: block; padding: 20px 30px; position: relative; color: #fff; font-size: 16px; font-weight: 400; box-sizing: border-box;
}
ul.main-nav > li:hover { background-color: #f9f9f9; }
ul.main-nav > li:hover > a { color: #333; font-weight: 400; }
ul.main-nav > li ul.sub-menu-lists { margin: 0px; padding: 0px; list-style-type : none; display:block;
}
ul.main-nav > li ul.sub-menu-lists > li { padding: 2px 0;
}
ul.main-nav > li ul.sub-menu-lists > li > a { font-size: 14px;
}
.ic { position: fixed; cursor: pointer; display: inline-block; right: 25px; width: 32px; height: 24px; text-align: center; top:0px; outline: none;
}
.ic.close { opacity: 0; font-size: 0px; font-weight: 300; color: #fff; top:8px; height:40px; display: block; outline: none;
}
/* Menu Icons for Devices*/
.ic.menu { top:25px; z-index : 20; }
.ic.menu .line { height: 4px; width: 100%; display: block; margin-bottom: 6px;
}
.ic.menu .line-last-child { margin-bottom: 0px; }
.sub-menu-head { margin: 10px 0; }
.banners-area { margin-top: 20px; padding-top: 15px; }
@media only screen and (max-width:768px) { .sub-menu-head { color:orange; } .ic.menu { display: block; } header.dark .ic.menu .line { background-color: #fff; } header.light .ic.menu .line { background-color: #000; } .ic.menu .line { -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .ic.menu:focus .line { background-color: #fff !important; } .ic.menu:focus .line:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .ic.menu:focus .line:nth-child(2) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -10px; } .ic.menu:focus .line:nth-child(3) { transform: translateY(15px); opacity: 0; } .ic.menu:focus{ outline: none; } .ic.menu:focus ~ .ic.close { opacity: 1; z-index : 21; outline: none; } /* .ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21; } .ic.close:focus { opacity: 0; } */ .ic.menu:focus { opacity: 1; } nav { background-color: transparent; } /* Main Menu for Handheld Devices */ ul.main-nav { z-index:2; padding: 50px 0; position: fixed; right: 0px; top: 0px; width: 0px; background-color:rgba(0,0,0,1); height: 100%; overflow: auto; /*CSS animation applied : Slide from Right*/ -webkit-transition-property: background, width; -moz-transition-property: background, width; -o-transition-property: background, width; transition-property: background, width;	-webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; } .ic.menu:focus ~ .main-nav { width: 300px; background-color:rgba(0,0,0,1); } ul.main-nav > * { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity;	-webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; opacity: 0; } .ic.menu:focus ~ .main-nav > * {opacity: 1;} ul.main-nav > li > a:after {display: none;} ul.main-nav > li:first-child { border-radius: 0px; } ul.main-nav > li { display: block; border-bottom: 1px solid #444; } ul.main-nav > li > a { font-weight: 600; } ul.main-nav > li ul.sub-menu-lists > li a { color: #eee; font-size: 14px; } .sub-menu-head { font-size: 16px;} ul.main-nav > li:hover { background-color: transparent; } ul.main-nav > li:hover > a {color: #fff; text-decoration: none; font-weight: 600;} .ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block { border-left: 0px solid #ccc; border-right: 0px solid #ccc; border-bottom: 0px solid #ccc; position: relative; visibility: visible; opacity: 1.0; } .sub-menu-block { padding: 0 30px; } .banners-area { padding-bottom: 0px; } .banners-area div { margin-bottom: 15px; } .banners-area { border-top: 1px solid #444; }
}
@media only screen and (min-width:769px) { .ic.menu { display: none; } /* Main Menu for Desktop Devices */ ul.main-nav { display: block; position: relative; } .sub-menu-block { padding: 15px; } /* Sub Menu */ ul.main-nav > li > div.sub-menu-block { visibility: hidden; background-color: #f9f9f9; position: absolute; margin-top: 0px; width: 100%; color: #333; left: 0; box-sizing: border-box; z-index : 3; font-size: 16px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; opacity: 0; /*CSS animation applied for sub menu : Slide from Top */ -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; } ul.main-nav > li:hover > div.sub-menu-block{ background-color: #f9f9f9; visibility: visible; opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } ul.main-nav > li > div.sub-menu-block > * { -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity;	-webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; opacity: 0; } ul.main-nav > li:hover > div.sub-menu-block > * { opacity: 1; } .sub-menu-head { font-size: 20px;} /* List Separator: Outer Border */ header.dark ul.main-nav > li > a { border-right: 1px solid #bbb; } header.light ul.main-nav > li > a { border-right: 1px solid #666; } /* List Separator: Inner Border */ ul.main-nav > li > a:after { content: ''; width: 1px; height: 62px; position: absolute; right:0px; top: 0px; z-index : 2; } header.dark ul.main-nav > li > a:after { background-color: #777; } header.light ul.main-nav > li > a:after { background-color: #999; } /* Drop Down/Up Arrow for Mega Menu */ ul.main-nav > li > a.mega-menu > span { display: block; vertical-align: middle; } ul.main-nav > li > a.mega-menu > span:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; content: ''; background-color: transparent; display: inline-block; margin-left: 10px; vertical-align: middle; } ul.main-nav > li:hover > a.mega-menu span:after{ border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 0px solid transparent; border-bottom: 5px solid #666; } .banners-area { border-top: 1px solid #ccc; }
}
Responsive Mega Menu - CSS3 - Script Codes
Responsive Mega Menu - CSS3 - Script Codes
Home Page Home
Developer Ahsan K. Rathore
Username ahsanrathore
Uploaded July 04, 2022
Rating 4.5
Size 4,373 Kb
Views 46,552
Do you need developer help for Responsive Mega Menu - CSS3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ahsan K. Rathore (ahsanrathore) Script Codes
Name
SVG Radar Animation with Radio Waves Alert
Password Strength
Bootstrap Modal Example
Shopping Cart - Angular JS
Full Calendar - Isotope
SVG Path Animation using CSS3
JQCap - jQuery Captcha Widget
Get a Quote Widget for Taxi Services in UK
One page responsive website By Ahsan Khurshid
Select Previous Value of Dropdown on Custom Click Button
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!