<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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 </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 <header> class to see impact. </blockquote> </header>

/* Body Styles */ body { margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; background-color: #fff; } .author { position: fixed; bottom: 15px; right: 15px; font-family: 'Open Sans', sans-serif; font-size: 14px; color: #999; } .author a { color: #777; text-decoration: none; } .author a:hover { color: blue; } 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-image: -ms-linear-gradient(bottom right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1b1b1b 100%); background-image: -moz-linear-gradient(bottom right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1b1b1b 100%); background-image: -o-linear-gradient(bottom right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1b1b1b 100%); background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #959595), color-stop(46, #0D0D0D), color-stop(50, #010101), color-stop(53, #0A0A0A), color-stop(76, #4E4E4E), color-stop(87, #383838), color-stop(100, #1b1b1b)); background-image: -webkit-linear-gradient(bottom right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1b1b1b 100%); background-image: linear-gradient\(to top left, #959595 0%, #0D0D0D 46%,; } header.light { background-color: #fff; } /* Navigation Styles */ nav { position: relative; } header.dark nav { background-image: -ms-linear-gradient(bottom left, #ffb76b 0%, #FFA73D 0%, #FF7C00 100%, #FF7F04 0%); background-image: -moz-linear-gradient(bottom left, #ffb76b 0%, #FFA73D 0%, #FF7C00 100%, #FF7F04 0%); background-image: -o-linear-gradient(bottom left, #ffb76b 0%, #FFA73D 0%, #FF7C00 100%, #FF7F04 0%); background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #ffb76b), color-stop(0, #FFA73D), color-stop(100, #FF7C00), color-stop(0, #FF7F04)); background-image: -webkit-linear-gradient(bottom left, #ffb76b 0%, #FFA73D 0%, #FF7C00 100%, #FF7F04 0%); background-image: linear-gradient(to top right, #ffb76b 0%, #FFA73D 0%, #FF7C00 100%, #FF7F04 0%); } 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; } ul.main-nav > li > div.sub-menu-block { background-image: -ms-linear-gradient(left, #ffb76b 0%, #FFA73D 50%, #FF7C00 51%, #ff7f04 100%); background-image: -moz-linear-gradient(left, #ffb76b 0%, #FFA73D 50%, #FF7C00 51%, #ff7f04 100%); background-image: -o-linear-gradient(left, #ffb76b 0%, #FFA73D 50%, #FF7C00 51%, #ff7f04 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffb76b), color-stop(50, #FFA73D), color-stop(51, #FF7C00), color-stop(100, #ff7f04)); background-image: -webkit-linear-gradient(left, #ffb76b 0%, #FFA73D 50%, #FF7C00 51%, #ff7f04 100%); background-image: linear-gradient(to right, #ffb76b 0%, #FFA73D 50%, #FF7C00 51%, #ff7f04 100%); } @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:hover, .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; } }