Responsive Menu

Developer
Robin Brons
Size
2,907 Kb
Views
16,192
  1. Responsive Menu Previews
  2. Responsive Menu HTML Codes
  3. Responsive Menu CSS Codes

How do I make an responsive menu?

What is a responsive menu? How do you make a responsive menu? This script and codes were developed by Robin Brons on 16 September 2022, Friday.

Responsive Menu Previews
IQ Test

Responsive Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://robinbrons.com/menu/css/fontello.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400);
html { font-family: 'Open Sans', sans-serif;
}
.wrap { margin: 20px auto;
}
#nav { width: 960px; background: hsl(0,0%,5%); font-weight: 600; font-size: 13px; border-radius: 5px;
}
#nav ul { margin: 0; padding: 0;
}
#nav ul li, label[for=toggle] { display: inline-block; cursor: pointer; color: hsl(0,0%,75%); padding: 13px 10px 13px 25px; text-transform: uppercase; letter-spacing: 1px;
}
#nav ul li:last-child { padding: 13px 25px 13px 25px;
}
#nav ul li:hover,
label[for=toggle]:hover { color: hsl(0,0%,90%); text-shadow: 0 0 1px #fff;
}
@media only screen
and (min-width : 1025px) { input[type=checkbox]#toggle, label[for=toggle] { display: none; }
}
@media only screen
and (max-width : 679px) { #nav { width: 80%; } input[type=checkbox]#toggle { position: absolute; z-index: -9999px; top: -9999px; left: -9999px; } i.icon-menu-1 { margin: 0 10px 0 0; } label[for=toggle] { width: 90%; } #menu { display: none; } input[type=checkbox]#toggle:checked ~ #menu { display: block; } input[type=checkbox]#toggle:checked ~ #menu li { display: block; }
}
@media only screen
and (min-width : 680px)
and (max-width : 702px) { #nav { width: 80%; font-size: 11px; } input[type=checkbox]#toggle, label[for=toggle] { display: none; }
}
@media only screen
and (min-width : 703px)
and (max-width : 728px) { #nav { width: 80%; font-size: 12px; } input[type=checkbox]#toggle, label[for=toggle] { display: none; }
}
@media only screen
and (min-width : 728px)
and (max-width : 1024px) { #nav { width: 80%; font-size: 13px; } input[type=checkbox]#toggle, label[for=toggle] { display: none; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
</head>
<body> <nav id="nav" class="wrap"> <input type="checkbox" name="toggle" id="toggle" /> <label for="toggle"><i class="icon-reorder"></i>Menu</label> <ul id="menu"> <li>Home</li> <li>Portfolio</li> <li>Services</li> <li>Blog</li> <li>About</li> <li>Contact</li> </ul> </nav>
</body>
</body>
</html>

Responsive Menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400);
html { font-family: 'Open Sans', sans-serif;
}
.wrap { margin: 20px auto;
}
#nav { width: 960px; background: hsl(0,0%,5%); font-weight: 600; font-size: 13px; border-radius: 5px;
}
#nav ul { margin: 0; padding: 0;
}
#nav ul li, label[for=toggle] { display: inline-block; cursor: pointer; color: hsl(0,0%,75%); padding: 13px 10px 13px 25px; text-transform: uppercase; letter-spacing: 1px;
}
#nav ul li:last-child { padding: 13px 25px 13px 25px;
}
#nav ul li:hover,
label[for=toggle]:hover { color: hsl(0,0%,90%); text-shadow: 0 0 1px #fff;
}
@media only screen
and (min-width : 1025px) { input[type=checkbox]#toggle, label[for=toggle] { display: none; }
}
@media only screen
and (max-width : 679px) { #nav { width: 80%; } input[type=checkbox]#toggle { position: absolute; z-index: -9999px; top: -9999px; left: -9999px; } i.icon-menu-1 { margin: 0 10px 0 0; } label[for=toggle] { width: 90%; } #menu { display: none; } input[type=checkbox]#toggle:checked ~ #menu { display: block; } input[type=checkbox]#toggle:checked ~ #menu li { display: block; }
}
@media only screen
and (min-width : 680px)
and (max-width : 702px) { #nav { width: 80%; font-size: 11px; } input[type=checkbox]#toggle, label[for=toggle] { display: none; }
}
@media only screen
and (min-width : 703px)
and (max-width : 728px) { #nav { width: 80%; font-size: 12px; } input[type=checkbox]#toggle, label[for=toggle] { display: none; }
}
@media only screen
and (min-width : 728px)
and (max-width : 1024px) { #nav { width: 80%; font-size: 13px; } input[type=checkbox]#toggle, label[for=toggle] { display: none; }
}
Responsive Menu - Script Codes
Responsive Menu - Script Codes
Home Page Home
Developer Robin Brons
Username bronsrobin
Uploaded September 16, 2022
Rating 3.5
Size 2,907 Kb
Views 16,192
Do you need developer help for Responsive 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!

Robin Brons (bronsrobin) Script Codes
Name
Doggie
Pure CSS Menu
Pure CSS Image Slider
Raaawr Dinosaur
Price Tags
Form Progress
Codepen.io Chrome Extension
Chrome Cast Loader
Responsive forum
Wordpress Calendar
Create amazing web content 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!