Responsive Dropdown Menu

Developer
Boyd Massie
Size
3,922 Kb
Views
12,144
  1. Responsive Dropdown Menu Previews
  2. Responsive Dropdown Menu HTML Codes
  3. Responsive Dropdown Menu CSS Codes

How do I make an responsive dropdown menu?

Responsive dropdown menu. http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly/. What is a responsive dropdown menu? How do you make a responsive dropdown menu? This script and codes were developed by Boyd Massie on 27 November 2022, Sunday.

Responsive Dropdown Menu Previews
IQ Test

Responsive Dropdown Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Dropdown Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a> <ul class="clearfix"> <li><a href="">Home</a></li> <li> <a href=""><span>Blog</span></a> <ul> <li><a href="">Design</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> <li><a href="">JavaScript</a></li> </ul> </li> <li> <a href=""><span>Work</span></a> <ul> <li><a href="">Web Design</a></li> <li><a href="">Typography</a></li> <li><a href="">Front-End</a></li> </ul> </li> <li><a href="">About</a></li> </ul>
</nav>
<script src="http://osvaldas.info/examples/main.js"></script>
<script src="http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.js"></script>
<script>	$( function()	{	$( '#nav li:has(ul)' ).doubleTapToGo();	});
</script>
</body>
</html>

Responsive Dropdown Menu - Script Codes CSS Codes

/********** Start RESET **********	AUTHOR: Osvaldas Valutis, www.osvaldas.info
*/
* {	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box;	box-sizing: border-box; *behavior: url( '/theme/js/boxsizing.htc' );	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );	-webkit-overflow-scrolling: touch;
}
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sup, sub, tt, var, b, u, i, center, ul, ol, li, dl, dt, dd, table, tr, th, td, thead, tbody, tfoot, caption, form, fieldset, legend, input, textarea, select, label, applet, object, iframe, audio, video, canvas, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {	font-size: 100%;	font-family: inherit;	font-weight: inherit;	font-style: inherit;	line-height: inherit;	vertical-align: baseline;	border: 0;	outline: 0;	padding: 0;	margin: 0;
}
html {	font-size: 100%;	-webkit-text-size-adjust: 100%;	-moz-text-size-adjust: 100%;	-ms-text-size-adjust: 100%;	-o-text-size-adjust: 100%;	text-size-adjust: 100%;
}
body {	font-family: Helvetica, Arial, sans-serif;	line-height: 1;	color: #000;	background-color: #fff;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {	display: block;
}
audio, canvas, video {	display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {	display: none;
}
canvas {	-ms-touch-action: double-tap-zoom;
} [hidden] {
display: none;
}
a {	text-decoration: underline;	color: #000;
}
a:hover {	text-decoration: none;
}
small {	font-size: 75%;
}
big {	font-size: 125%;
}
em {	font-style: italic;
}
strong {	font-weight: bold;
}
ins {	text-decoration: none;
}
del {	text-decoration: line-through;
}
sup, sub {	font-size: 75%;	line-height: 0;
}
sup {	vertical-align: super;
}
sub {	vertical-align: sub;
}
pre {	display: block;	overflow: auto;
}
code {	font-family: 'Courier New', Courier, monospace;
}
ul, ol {	list-style: none;
}
table {	table-layout: auto;	border-collapse: separate;	border-spacing: 0;	empty-cells: hide;
}
img {	vertical-align: middle;	-ms-interpolation-mode: bicubic;
}
svg:not(:root) {	overflow: hidden;
}
blockquote, q {	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {	content: '';	content: none;
}
input, textarea {	-webkit-appearance: none;
}
button, input, select, textarea {	vertical-align: baseline;
*vertical-align: middle;	-webkit-border-radius: 0;
}
button, input {	line-height: normal;
*overflow: visible;
}
table button, table input {
*overflow: auto;
}
button, input[type='button'], input[type='reset'], input[type='submit'] {	cursor: pointer;	-webkit-appearance: button;
}
textarea {	overflow: auto;	vertical-align: top;
}
input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button, input[type='search']::-webkit-search-results-decoration {
display: none;
}
input[type='search'] {	-webkit-appearance: textfield;
}
input[type='radio'] {	-webkit-appearance: radio;
}
input[type='checkbox'] {	-webkit-appearance: checkbox;
}
input::-ms-clear {
display: none;
}
input[type='password']::-ms-reveal {
display: none;
}
.clearfix:after {	visibility: hidden;	display: block;	font-size: 0;	content: " ";	clear: both;	height: 0;
}
* html .clearfix {	zoom: 1;
}
*:first-child+html .clearfix {	zoom: 1;
}
.cleaner {	height: 0;	line-height: 0;	clear: both;
}
/********** End RESET **********/
html {	font-size: 100%;
}
body {	font-family: 'Noticia Text', serif;	font-weight: 400;	-webkit-font-smoothing: antialiased;	background-color: #f7efeb;	padding: 1.25em; /* 20 */
}
body, a, a:hover {	color: #111;
}
a {	-webkit-transition: color .3s ease;	-moz-transition: color .3s ease;	-ms-transition: color .3s ease;	-o-transition: color .3s ease;	transition: color .3s ease;
}
a, a:hover {	text-decoration: none;
}
#nav {	width: 60em; /* 1000 */	font-family: 'Open Sans', sans-serif;	font-weight: 400;	position: absolute;	top: 25%;	left: 50%;	margin-left: -30em; /* 30 480 */
}
#nav > a {	display: none;
}
#nav li {	position: relative;
}
#nav li a {	color: #fff;	display: block;
}
#nav li a:active {	background-color: #c00 !important;
}
#nav span:after {	width: 0;	height: 0;	border: 0.313em solid transparent; /* 5 */	border-bottom: none;	border-top-color: #efa585;	content: '';	vertical-align: middle;	display: inline-block;	position: relative;	right: -0.313em; /* 5 */
}
/* first level */	#nav > ul {	height: 3.75em; /* 60 */	background-color: #e15a1f;
}
#nav > ul > li {	width: 25%;	height: 100%;	float: left;
}
#nav > ul > li > a {	height: 100%;	font-size: 1.5em; /* 24 */	line-height: 2.5em; /* 60 (24) */	text-align: center;
}
#nav > ul > li:not( :last-child ) > a {	border-right: 1px solid #cc470d;
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {	background-color: #cc470d;
}
/* second level */	#nav li ul {	background-color: #cc470d;	display: none;	position: absolute;	top: 100%;
}
#nav li:hover ul {	display: block;	left: 0;	right: 0;
}
#nav li:not( :first-child ):hover ul {	left: -1px;
}
#nav li ul a {	font-size: 1.25em; /* 20 */	border-top: 1px solid #e15a1f;	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {	background-color: #e15a1f;
} @media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav {	width: 100%;	position: static;	margin: 0;
}
} @media only screen and ( max-width: 40em ) /* 640 */ {
html {	font-size: 75%; /* 12 */
}
#nav {	position: relative;	top: auto;	left: auto;
}
#nav > a {	width: 3.125em; /* 50 */	height: 3.125em; /* 50 */	text-align: left;	text-indent: -9999px;	background-color: #e15a1f;	position: relative;
}
#nav > a:before, #nav > a:after {	position: absolute;	border: 2px solid #fff;	top: 35%;	left: 25%;	right: 25%;	content: '';
}
#nav > a:after {	top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {	display: block;
}
/* first level */	#nav > ul {	height: auto;	display: none;	position: absolute;	left: 0;	right: 0;
}
#nav:target > ul {	display: block;
}
#nav > ul > li {	width: 100%;	float: none;
}
#nav > ul > li > a {	height: auto;	text-align: left;	padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {	border-right: none;	border-bottom: 1px solid #cc470d;
}
/* second level */	#nav li ul {	position: static;	padding: 1.25em; /* 20 */	padding-top: 0;
}
}
Responsive Dropdown Menu - Script Codes
Responsive Dropdown Menu - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 27, 2022
Rating 4.5
Size 3,922 Kb
Views 12,144
Do you need developer help for Responsive Dropdown 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!

Boyd Massie (massiebn) Script Codes
Name
Advanced JQuery Carousel
Snow Falling JS
Countdown Timer
Round-A-Bout Image Showcase
Background Video
Page Peel
Image Hover
JQuery Quiz
Responsive Tournament Bracket
Drag and Drop Images
Create amazing video scripts 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!