Mega Menu ( from WTI )

Developer
Salman Raza
Size
5,522 Kb
Views
16,192
  1. Mega Menu ( from WTI ) Previews
  2. Mega Menu ( from WTI ) HTML Codes
  3. Mega Menu ( from WTI ) CSS Codes
  4. Mega Menu ( from WTI ) JS Codes

How do I make an mega menu ( from wti )?

What is a mega menu ( from wti )? How do you make a mega menu ( from wti )? This script and codes were developed by Salman Raza on 26 October 2022, Wednesday.

Mega Menu ( from WTI ) Previews
IQ Test

Mega Menu ( from WTI ) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mega Menu ( from WTI )</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header> <div class="container"> <h1 class="mega_menu_hdgn">Mega Menu (from WTI)</h1> <section class="top-menu-cont"> <nav class="top-menu left"> <div class="sticky-logo"> <a href="index.php" class="logo left"></a> </div> <ul class="nav-top"> <li class="t-hidden m-hidden"> <a href="news.php">News &amp; Views <i class="fa fa-angle-down"></i></a> <ul class="menu-article-container"> <li class="hover-icon img-scale"> <a href="#" class=""> <div class="article-thumb-img"> <img src="http://139.59.14.64/wti/images/review-medium-1.png"> </div> <div class="menu-article-sub-container"> <span class="article-thumb-section golden_font"> Review </span> <h3 class="article-thumb-heading dark_grey_font"> cvstos sea-liner gmt automatic </h3> </div> </a> </li> <li class="hover-icon img-scale"> <a href="#" class=""> <div class="article-thumb-img"> <img src="http://139.59.14.64/wti/images/review-medium-1.png"> </div> <div class="menu-article-sub-container"> <span class="article-thumb-section golden_font"> Test </span> <h3 class="article-thumb-heading dark_grey_font"> cvstos sea-liner gmt automatic </h3> </div> </a> </li> <li class="hover-icon img-scale l-hidden"> <a href="#" class=""> <div class="article-thumb-img"> <img src="http://139.59.14.64/wti/images/review-medium-1.png"> </div> <div class="menu-article-sub-container"> <span class="article-thumb-section golden_font"> Close up </span> <h3 class="article-thumb-heading dark_grey_font"> cvstos sea-liner gmt automatic </h3> </div> </a> </li> <div class="menu-article-listing"> <ul> <li> <a href="#"> <h5 class="article-thumb-section golden_font"> Featured </h5> </a> <a href="#" class="article-thumb-heading dark_grey_font"> Fresh straps for fresh spring </a> </li> <ul class="sub-menues"> <li><a href="review.php">Review | Test | Close up</a></li> <li><a href="features.php">Featured</a></li> <li><a href="news.php">News | Blogs</a></li> </ul> </ul> </div> </ul> </li> <li class="t-hidden m-hidden"> <a href="gallery.php"> Gallery </a> </li> <li class="t-hidden m-hidden" id="menu-article3"> <a href="#">Brands <i class="fa fa-angle-down"></i></a> <ul class="menu-article3 m-hidden t-hidden"> <li><a href="#">A. LANGE &amp; SÖHNE</a></li> <li><a href="#">AUDEMARS PIGUET</a></li> <li><a href="#">Baume &amp; Mercier</a></li> <li><a href="#">Balmain</a></li> <li><a href="#">Bell &amp; Ross</a></li> <li><a href="#">Blancpain</a></li> <li><a href="#">Breguet</a></li> <li><a href="#">breitling</a></li> <li><a href="#">bulgari</a></li> <li><a href="#">carl f. bucherer</a></li> <li><a href="#">cartier</a></li> <li><a href="#">chopard</a></li> <li><a href="#">citizen</a></li> <li><a href="#">Graham</a></li> <li><a href="#">greubel</a></li> <li><a href="#">harry winston</a></li> <li><a href="#">hermes</a></li> <li><a href="#">hublot</a></li> <li><a href="#">hyt</a></li> <li><a href="#">iwc</a></li> <li><a href="#">jaeger-lecoultre</a></li> <li><a href="#">jaquet droz</a></li> <li><a href="#">leroy</a></li> <li><a href="#">longines</a></li> <li><a href="#">montblanc</a></li> <li><a href="#">omega</a></li> <li><a href="#">panerai</a></li> <li><a href="#">parmigiani</a></li> <li><a href="#">patek philippe</a></li> <li><a href="#">perrelt</a></li> <li><a href="#">piaget</a></li> <li><a href="#">rado</a></li> <li><a href="#">raymond weil</a></li> <li><a href="#">richard mille</a></li> <li><a href="#">rolex</a></li> <li><a href="#">seiko</a></li> <li><a href="#">tag heuer</a></li> <li><a href="#">tissot</a></li> <li><a href="#">ulysse nardin</a></li> <li><a href="#">vacheron constantin</a></li> <li><a href="#">van cleef &amp; arpels</a></li> <li><a href="#">victorinox</a></li> <li><a href="#">zenith</a></li> <li><a href="#"></a></li> </ul> </li> <li class="t-hidden m-hidden l-hidden" id="menu-article2"> <a>Watch Basics <i class="fa fa-angle-down"></i></a> <ul class="menu-article2"> <li> <a href="watch-term.php"> Watch making glossary </a> </li> <li> <a href="pronunciation.php"> Pronunciation </a> </li> </ul> </li> <li class="t-hidden m-hidden l-hidden"><a href="events.php">Events</a></li> <li class="t-hidden m-hidden"><a href="perfect-gift.php">The perfect gift</a></li> <li class="m-hidden" id="searchMenu"> <a><span class="hideOnSticky">Search </span> <i class="fa fa-search"></i> </a> </li> <div class="top-search-bar-container" id="searchBar" style="display: none;"> <div class="remove-search white_font navy_blue_bg t-hidden"> search </div> <form action="search-result.php" method="get"> <input type="text" id="" name="search" class="" placeholder="Tell us what you are looking for..."> <button type="submit" id="" name="" class="search-icon"><i class="fa fa-search"></i></button> </form> <div class="remove-searchBar d-hidden l-hidden"></div> </div> <li class="m-hidden"><a href="#"><i class="fa fa-facebook"></i></a></li> <li class="m-hidden"><a href="#"><i class="fa fa-twitter"></i></a></li> <li class="m-hidden"><a href="#"><i class="fa fa-instagram"></i></a></li> <li class=""> <a class="menu"> Menu <i class="icon"></i> </a> </li> </ul> <div class="hamburg-menu-container" style="display: none;"> <div class="remove-menu white_font navy_blue_bg"> Menu </div> <ul> <li><a href="about-us.php">About us</a></li> <li><a href="#">contact</a></li> <li><a href="#">terms &amp; conditions</a></li> <li><a href="#">advertise</a></li> <li><a href="#">privacy policy</a></li> </ul> </div> </nav> </section> </div> </header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mega Menu ( from WTI ) - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,300i,400,600,600i,700'); @import url('https://fonts.googleapis.com/css?family=Tinos:400,400i,700,700i'); @import url('https://fonts.googleapis.com/css?family=Playball'); * {margin: 0; padding: 0; box-sizing: border-box; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; outline: 0 none transparent;} a { text-decoration: none; position: relative; display: block;} body { font-family: 'Titillium Web', sans-serif; padding: 5%; font-size: 13px; background-image: -webkit-linear-gradient(left, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); background-image: -o-linear-gradient(left, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); } header {width: 101%; position: relative;} header:after {content: 'Salman Raza'; font-family: 'Playball', cursive; position: absolute; top: 150px; left: 50%; color: rgba(0, 0, 0, 0.025); font-size: 150px; line-height: 140px; white-space: nowrap; text-transform: lowercase; transform: translateX(-50%); pointer-events: none; z-index: -1; } .mega_menu_hdgn {font-size: 50px; text-align: center; margin-bottom: 30px; color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,.4); } .container {width: 1280px; min-width: 1280px; padding: 0 10px; margin: 0 auto;} .top-menu-cont {margin-bottom: 20px; width: 100%; position: relative; background-color: #fff;box-shadow: 0 0 20px rgba(0,0,0,0.3);} ul {list-style: none outside none; margin: 0; padding: 0;} .top-menu, .nav-top {height: 40px; line-height: 40px; position: relative;max-height: 40px;} .nav-top > li {position: relative; float: left;} .nav-top > li > a {color: #646464; display: block; letter-spacing: 4px; padding: 0 14.30px; cursor: pointer; text-transform: uppercase; font-family: 'Titillium Web', sans-serif; } .nav-top ul.menu-article-container {background-color: #fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #333333; display: none; left: 0; position: absolute; top: 40px; width: 1220px; padding: 20px; height: 320px; z-index: 1; border: 1px solid #1e4682;} .nav-top ul.menu-article-container > li {float: left; width: 300px; position: relative; border: 1px solid #E6E6E6; height: 280px; background: #fff; margin-right: 10px;transition: all 0.5s ease;} .nav-top ul.menu-article-container .article-thumb-img {width: 100%; height: 160px; overflow: hidden; position: relative;} .nav-top ul.menu-article-container .menu-article-sub-container {width: 100px; height: 120px; position: relative; padding: 20px;} .nav-top ul.menu-article-container .article-thumb-section {display: block; width: 260px;} .article-thumb-section {display: block; text-transform: uppercase; line-height: 16px; letter-spacing: 4px; font-weight: bold; margin-bottom: 10px; pointer-events: auto;} .nav-top ul.menu-article-container .article-thumb-heading {width: 260px; font-size: 23px;} .article-thumb-heading {font-family: 'Tinos', serif; font-size: 27px; line-height: 26px; letter-spacing: -0.4px; text-transform: uppercase; pointer-events: auto; display: block;} .menu-article-listing {width: 240px; float: right; height: 100%; position: relative;} .menu-article-listing li:first-child {padding-top: 0;} .menu-article-listing li {float: left; width: 100%; padding: 16px 0;} .nav-top ul.menu-article-container .menu-article-listing .article-thumb-heading {font-size: 23px; line-height: 22px; text-transform: capitalize; } ul.sub-menues {position: absolute; bottom: 0; left: 0; width: 100%;} ul.sub-menues li {border-top: 1px solid #D2D2D2; padding: 0;} ul.sub-menues li a {text-transform: uppercase; line-height: 16px; letter-spacing: 3px; color: #1E4682; padding: 17px 10px 18px; font-weight: 700; } .menu-article-listing li:last-child {padding-bottom: 0;} .menu-article3 {position: absolute; top: 39px; left: -293px; display: none; width: 1260px; overflow: hidden; background: #fff; border: 1px solid #1E4682; z-index: 15; -webkit-column-width: 250px; -moz-column-width: 250px; column-width: 250px; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .menu-article3 li {border-bottom: 1px solid #D8D8D8; height: 50px;} .menu-article3 li a {padding: 0px 20px; color: #1E4682; line-height: 50px; font-weight: 700; text-transform: uppercase; letter-spacing: 4px;} .nav-top ul.menu-article2 {position: absolute; display: none; top: 39px; left: 0; width: 300px; border: 1px solid #1E4682; background-color: #fff; } .nav-top ul.menu-article2 li {float: left; width: 100%; border-bottom: 1px solid #D8D8D8;} .nav-top ul.menu-article2 li a {color: #1E4682; padding: 17px 20px; text-transform: uppercase; line-height: 16px; letter-spacing: 4px; font-weight: 700; } .nav-top > li > a > i.fa-angle-down { font-size: 20px; line-height: 14px; vertical-align: sub; transition: 0.5s; } i.icon {display: inline-block; width: 20px; height: 2.49px; background-color: #646464; position: relative; margin-left: 7.5px; top: -5px;} .nav-top > li:last-child:hover:after {position: absolute; content: ''; width: 6px; height: 100%; right: -1px; top: 0; background: #1E4682; } i.icon:before {top: -7px;} i.icon:after {top: 7px;} i.icon:before, i.icon:after {content: ''; display: block; width: 20px; height: 2px; background: #646464; position: absolute; z-index: 0; } .remove-search {right: 242px; padding: 0 38px 0 13px;} .remove-search:after, .remove-search:before {right: 25px;} .remove-menu:before, .remove-search:before, .remove-searchBar:before {transform: rotate(45deg);} .remove-menu:after, .remove-search:after, .remove-searchBar:after {transform: rotate(-45deg);} .remove-menu:after, .remove-menu:before, .remove-search:after, .remove-search:before, .remove-searchBar:after, .remove-searchBar:before { position: absolute; content: ''; right: 20px; top: 13px; width: 1px; height: 14px; background-color: #FFF; } .top-search-bar-container input[type="text"] {box-shadow: 0 0 0 1px #1e4682; width: 100%; border: 0; outline: 0; max-height: 35px; line-height: 35px; position: absolute; top: 40px; font-size: 16px; left: 0; padding: 0 10px 0 55px; } .search-icon {position: absolute; height: 35px; border: 0; width: 45px; background-color: #1E4682; cursor: pointer; left: 0; top: 40px; } .remove-menu, .remove-search {position: absolute; text-transform: uppercase; letter-spacing: 4px; right: -1px; cursor: pointer; padding: 0 50px 0 15px; } .remove-menu { top: -40px; } .remove-search {right: 244px; padding: 0 38px 0 13px;} .top-search-bar-container .fa-search {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFF;} .hamburg-menu-container {position: absolute; top: 39px; right: 0; z-index: 7; border: 1px solid #1E4682; width: 300px;border-bottom: 0; } .hamburg-menu-container ul li {width: 100%; background-color: #fff; border-bottom: 1px solid #D8D8D8; float: left; } .hamburg-menu-container ul li:last-child {border-bottom-color: #1e4682;} .hamburg-menu-container ul li a {float: left; color: #1E4682; width: 100%; line-height: 13px; font-weight: 700; letter-spacing: 4px; padding: 17px 20px; text-transform: uppercase; } .img-scale img { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; transform: scale(1.01); -webkit-transform: translateZ(0) scale(1.0, 1.0); transform: translateZ(0) scale(1.0, 1.0); -webkit-backface-visibility: hidden; } /* ---- [ Hover ] ---- */ .hamburg-menu-container ul li:hover a {background-color: #1E4682; color: #FFF;} .nav-top li:hover ul.menu-article-container, #menu-article3:hover .menu-article3 {display: block;} .nav-top > li:hover > a {color: #FFF;} .nav-top > li:hover {background: #1E4682;} .menu-article3 li:hover a {color: #FFF;} .menu-article3 li:hover {background-color: #1E4682;} .nav-top li:hover ul.menu-article2 {display: block; } .nav-top ul.menu-article-container > li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); border:0; } .nav-top ul.menu-article2 li:hover a {background-color: #1E4682; color: #FFF; transition: 300ms; } .nav-top > li:hover > a > i.fa-angle-down { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } .nav-top > li:hover > a.menu i.icon, .nav-top > li:hover > a.menu i.icon:before, .nav-top > li:hover > a.menu i.icon:after { background: #FFF; } .img-scale:hover img {-moz-transform: scale(1.07); -webkit-transform: scale(1.07); transform: scale(1.07); } /* ---- [ bg-calor / fonts colors ] ---- */ .golden_font {color: #CA9B51 !important;} .dark_grey_font {color: #505050 !important;} .navy_blue_bg {background-color: #1E4682 !important;} .white_font {color: #FFF !important; }

Mega Menu ( from WTI ) - Script Codes JS Codes

$("#searchMenu").click(function(){ $("#searchBar").fadeToggle(); }); $(".remove-search").click(function(){ $("#searchBar").fadeOut(); }); $(".menu").click(function(){ $(".hamburg-menu-container").fadeToggle(); }); $(".remove-menu").click(function(){ $(".hamburg-menu-container").fadeOut(); });
Mega Menu ( from WTI ) - Script Codes
Mega Menu ( from WTI ) - Script Codes
Home Page Home
Developer Salman Raza
Username salmanraza
Uploaded October 26, 2022
Rating 3
Size 5,522 Kb
Views 16,192
Do you need developer help for Mega Menu ( from WTI )?

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!

Salman Raza (salmanraza) Script Codes
Name
Event short details Card view
Short Premium Event Card View
Dynamic Add li using jQuery
App design
Pure CSS search bar
Testimonial carousel
Close button with css and jquery
Event Card
Circle-background-animation
Event card View
Create amazing blog posts 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!