Responsive Drop Down Menu

Developer
Peter Appleyard
Size
4,779 Kb
Views
16,192
  1. Responsive Drop Down Menu Previews
  2. Responsive Drop Down Menu HTML Codes
  3. Responsive Drop Down Menu CSS Codes
  4. Responsive Drop Down Menu JS Codes

How do I make an responsive drop down menu?

What is a responsive drop down menu? How do you make a responsive drop down menu? This script and codes were developed by Peter Appleyard on 06 October 2022, Thursday.

Responsive Drop Down Menu Previews
IQ Test

Responsive Drop Down Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Drop Down Menu</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="close">close</div>
<div class="wrapper"> <nav class="newNav"> <ul class="topLevel"> <li class="drop"><a href="">Our Story</a></li> <article class="naver"> <div class="col1"> <span class="header">About US</span> <ul> <li><a href="/our-story-our-history">Our History</a></li> <li><a href="/our-story-our-winemakers">Our Winemakers</a></li> <li><a href="/our-story-the-berardo-family">the Berardo Family</a></li> </ul> </div> <div class="col1"> <span class="header">Winemaking &amp; Vineyards</span> <ul> <li><a href="/winemaking-and-vineyards-our-estate">Our Estate</a></li> <li><a href="/winemaking-and-vineyards-our-winemaking-regions">Our Winemaking Regions</a></li> <li><a href="/winemaking-and-vineyards-about-orange">About Orange</a></li> </ul> </div> </article> <li><a href="/ourwines">Our Wines</a></li> <li class="logoMenu"><a href="/"><img alt="" src="https://cumuluswines.businesscatalyst.com/img/logo.png"></a></li> <li class="drop"><a href="">Shop</a></li> <article class="naver"> <div class="col1"> <span class="header">Shop By Brand</span> <ul> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> </ul> </div> <div class="col1"> <span class="header">Shop By Grape Varietal</span> <ul> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> </ul> </div> <div class="col1"> <span class="header">Shop By Price</span> <ul> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> </ul> </div> <div class="col1"> <span class="header">By Wine Type</span> <ul> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> <li><a href="">here</a></li> </ul> </div> </article> <li><a href="/members-become-a-member">Become a Member</a></li> </ul> </nav>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://formstone.it/components/Naver/jquery.fs.naver.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Drop Down Menu - Script Codes CSS Codes

* { box-sizing: border-box;
}
.wrapper { width: 90%; max-width: 1200px; margin: 0 auto;
}
/* * Naver v3.1.2 - 2014-11-25 */
.naver { margin: 0;
}
.naver,
.naver *,
.naver *:before,
.naver *:after { box-sizing: border-box;
}
.naver-handle { width: 100%; background: #0c223f; border: 0px; color: #a5a9af; cursor: pointer; display: none; font-size: 16px; margin: 0; padding: 10px 15px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.naver-handle:after { height: 3px; width: 15px; position: absolute; top: 0; right: 15px; bottom: 0; background: #cccccc; box-shadow: 0 5px 0 #cccccc, 0 -5px 0 #cccccc; content: ''; display: block; margin: auto 0;
}
.naver.open .naver-handle:after { width: 15px; height: 15px; background: transparent; border: none; box-shadow: none; color: #cccccc; content: "\00d7"; font-size: 22px; font-weight: 700; line-height: 15px; text-align: center;
}
.naver-wrapper { border: none; height: auto; margin: 0; padding: 0;
}
.naver-container:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden;
}
.naver.enabled .naver-handle { display: block;
}
.naver.enabled .naver-wrapper { height: 0px; overflow: hidden;
}
.naver.enabled .naver-container { background: #0c223f; border: 0;
}
.newNav ul.topLevel { margin: 0; padding: 0;
}
.newNav ul.topLevel article { padding: 40px; background-color: #0c223f; color: #FFF; position: absolute; margin-top: 110px; display: block; width: 96%; max-width: 1200px; z-index: 2000;
}
.newNav ul.topLevel article .col1 { width: 25%; float: left;
}
.newNav ul.topLevel article .col1 .header { text-transform: uppercase; font-size: 13px; font-weight: 300; color: #6dabe4;
}
.newNav ul.topLevel article .col1 a { display: block; padding: 5px 0;
}
.newNav ul.topLevel article .col1 ul { margin: 0; padding: 0;
}
.newNav ul.topLevel article .col1 ul li { margin: 0; padding: 0; width: 100%;
}
.newNav ul.topLevel article .col1 ul li a { height: 30px; padding: 10px 0; text-align: left; text-transform: uppercase; font-size: 13px;
}
.newNav ul.topLevel article .col1 ul li a:hover { background-color: #0c223f; color: #FFF;
}
.newNav ul.topLevel li { list-style-type: none; margin: 0; padding: 0; width: 20%; float: left; position: relative; z-index: 400;
}
.newNav ul.topLevel li.logoMenu a { padding-top: 20px;
}
.newNav ul.topLevel li.logoMenu a img { width: 80%; margin: 0 auto;
}
.newNav ul.topLevel li a { font-size: 15px; font-weight: 300; display: block; height: 110px; background-color: #0c223f; margin: 0; color: #a5a9af; text-decoration: none; text-align: center; padding-top: 48px; text-transform: uppercase; outline: none;
}
.newNav ul.topLevel li a img { width: 100%;
}
.newNav ul.topLevel li a:hover { background-color: #0a1b32; color: #FFF;
}
.newNav ul.topLevel li a.active { margin-bottom: 0; background-color: #646971; color: #FFF;
}
@media only screen and (max-width: 600px) { .wrapper { width: 100%; } .newNav ul.topLevel { margin: 0; padding: 0; } .newNav ul.topLevel article { padding: 10px 20px; background-color: #08162a; color: #FFF; margin-top: 0; display: block; width: 100%; max-width: 1200px; z-index: 2000; margin-left: 0; margin-top: 140px; } .newNav ul.topLevel article .col1 { width: 50%; float: left; margin-top: 10px; } .newNav ul.topLevel article .col1 .header { text-transform: uppercase; font-size: 13px; font-weight: 300; color: #6dabe4; } .newNav ul.topLevel article .col1 a { display: block; padding: 10px 0; background-color: #08162a; } .newNav ul.topLevel article .col1 ul { margin: 0; padding: 0; } .newNav ul.topLevel article .col1 ul li { margin: 0; padding: 0; width: 100%; } .newNav ul.topLevel article .col1 ul li a { height: 30px; padding: 10px 0; text-align: left; text-transform: uppercase; font-size: 13px; } .newNav ul.topLevel article .col1 ul li a:hover { background-color: #0c223f; color: #FFF; } .newNav ul.topLevel li { width: 100%; } .newNav ul.topLevel li.logoMenu { display: none; } .newNav ul.topLevel li a { height: 35px; margin: 0; color: #a5a9af; padding: 10px 0; }
}

Responsive Drop Down Menu - Script Codes JS Codes

(function($) { var allPanels = $('.newNav > ul > article').hide(); var allButtons = $('.newNav > ul > li > a'); $('.newNav > ul > li.drop > a').click(function() { $this = $(this); $target = $this.parent().next(); if(!$target.hasClass('active')){ allPanels.removeClass('active').fadeOut().slideUp('fast'); allButtons.removeClass('active'); $target.addClass('active').fadeIn().slideDown('slow'); $this.addClass('active'); } else { $target.removeClass('active').fadeOut().slideUp('fast'); } return false; });
})(jQuery);
/*$('.naver-handle').click(function() { $(allPanels).hide();
});*/
$("nav.newNav").naver({	maxWidth: "600px"
});
Responsive Drop Down Menu - Script Codes
Responsive Drop Down Menu - Script Codes
Home Page Home
Developer Peter Appleyard
Username whodaman
Uploaded October 06, 2022
Rating 3
Size 4,779 Kb
Views 16,192
Do you need developer help for Responsive Drop Down Menu?

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!

Peter Appleyard (whodaman) Script Codes
Name
Google Charts
Builtform Flexbox Grid
Isotope asc desc sorting
Cycle2 transparent overlay
Navigation Play
Function for responsively loading carousel items with Cycle2
LiScroll 1.0 fluid
Slicknav testing
Simple SCSS Dropdown Nav
Slidebars js
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!