Responsive nav with submenus

Developer
Teo Dragovic
Size
4,273 Kb
Views
6,072
  1. Responsive nav with submenus Previews
  2. Responsive nav with submenus HTML Codes
  3. Responsive nav with submenus CSS Codes

How do I make an responsive nav with submenus?

What is a responsive nav with submenus? How do you make a responsive nav with submenus? This script and codes were developed by Teo Dragovic on 05 January 2023, Thursday.

Responsive nav with submenus Previews
IQ Test

Responsive nav with submenus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive nav with submenus</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.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! */ /* globals */
* { box-sizing: border-box;
}
ul { margin: 0; padding: 0; overflow: hidden;
}
input { position: absolute; top: -99999px; left: -99999px; opacity: 0;
}
nav { height: 50px; background: #F00; font: 16px/1.5 Arial, sans-serif; position: relative;
}
a { color: #FFFFFF; display: inline-block; text-decoration: none; line-height: 50px; padding: 0 20px;
}
a:hover, a:active { background-color: #000000; color: #FFFFFF;
}
/* nav for +600px screen */
ul.lvl-1 { text-align: center; *zoom: 1;
}
ul.lvl-1:after { content: ""; display: table; clear: both;
}
ul.lvl-1 li { display: inline;
}
ul.lvl-2,
ul.lvl-3 { position: absolute; width: 100%; background: #ff4d4d; display: none;
}
ul.lvl-3 { background: #ff9999;
}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 { display: block;
}
.pull { display: none;
}
/* arrow thingy - crappy positioning, needs tinkering */
.sub { position: relative; cursor: pointer;
}
.sub:after { position: absolute; top: 40%; right: 0; content: ""; width: 0; height: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 6px solid white;
}
/* medium-ish nav */
@media screen and (max-width: 600px) { nav { height: auto; } a { text-align: left; width: 100%; text-indent: 25px; border-bottom: 1px solid #FFFFFF; } ul > li { width: 50%; float: left; } ul > li:nth-of-type(odd) { border-right: 1px solid white; } li:nth-of-type(even) ul.lvl-2, li:nth-of-type(even) ul.lvl-3 { position: relative; width: 200%; left: -100%; } li:nth-of-type(odd) ul.lvl-2, li:nth-of-type(odd) ul.lvl-3 { position: relative; width: 200%; left: 1px; } ul.lvl-2 li { background: #ff4d4d; } ul.lvl-3 li { background: #ff9999; }
}
/* small-ish nav */
@media only screen and (max-width: 480px) { .pull { display: block; width: 100%; position: relative; } ul { height: 0; } ul > li { width: 100%; } ul > li:nth-of-type(odd) { border-right: none; } #nav-toggle-1:checked ~ ul.lvl-1 { height: auto; } #nav-toggle-2:checked ~ ul.lvl-2, #nav-toggle-3:checked ~ ul.lvl-3 { left: 0; width: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <input type="checkbox" id="nav-toggle-1" /> <label for="nav-toggle-1" class="pull sub"><a>Menu</a></label> <ul class="lvl-1"> <li><a href="https://www.domain.co.uk/">Homepage</a></li> <li> <input type="checkbox" id="nav-toggle-2" /> <label for="nav-toggle-2" class="sub"><a>Services</a></label> <ul class="lvl-2"> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li> <input type="checkbox" id="nav-toggle-3" /> <label for="nav-toggle-3" class="sub"><a>Service 3</a></label> <ul class="lvl-3"> <li><a href="#">Service 3 a</a></li> <li><a href="#">Service 3 b</a></li> </ul> </li> <li><a href="#">Service 4</a></li> </ul> </li> <li><a href="/project-gallery">Project Gallery</a></li> <li><a href="/contact-us">Contact Us</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Responsive nav with submenus - Script Codes CSS Codes

/* globals */
* { box-sizing: border-box;
}
ul { margin: 0; padding: 0; overflow: hidden;
}
input { position: absolute; top: -99999px; left: -99999px; opacity: 0;
}
nav { height: 50px; background: #F00; font: 16px/1.5 Arial, sans-serif; position: relative;
}
a { color: #FFFFFF; display: inline-block; text-decoration: none; line-height: 50px; padding: 0 20px;
}
a:hover, a:active { background-color: #000000; color: #FFFFFF;
}
/* nav for +600px screen */
ul.lvl-1 { text-align: center; *zoom: 1;
}
ul.lvl-1:after { content: ""; display: table; clear: both;
}
ul.lvl-1 li { display: inline;
}
ul.lvl-2,
ul.lvl-3 { position: absolute; width: 100%; background: #ff4d4d; display: none;
}
ul.lvl-3 { background: #ff9999;
}
#nav-toggle-2:checked ~ ul.lvl-2,
#nav-toggle-3:checked ~ ul.lvl-3 { display: block;
}
.pull { display: none;
}
/* arrow thingy - crappy positioning, needs tinkering */
.sub { position: relative; cursor: pointer;
}
.sub:after { position: absolute; top: 40%; right: 0; content: ""; width: 0; height: 0; border-right: 6px solid transparent; border-left: 6px solid transparent; border-top: 6px solid white;
}
/* medium-ish nav */
@media screen and (max-width: 600px) { nav { height: auto; } a { text-align: left; width: 100%; text-indent: 25px; border-bottom: 1px solid #FFFFFF; } ul > li { width: 50%; float: left; } ul > li:nth-of-type(odd) { border-right: 1px solid white; } li:nth-of-type(even) ul.lvl-2, li:nth-of-type(even) ul.lvl-3 { position: relative; width: 200%; left: -100%; } li:nth-of-type(odd) ul.lvl-2, li:nth-of-type(odd) ul.lvl-3 { position: relative; width: 200%; left: 1px; } ul.lvl-2 li { background: #ff4d4d; } ul.lvl-3 li { background: #ff9999; }
}
/* small-ish nav */
@media only screen and (max-width: 480px) { .pull { display: block; width: 100%; position: relative; } ul { height: 0; } ul > li { width: 100%; } ul > li:nth-of-type(odd) { border-right: none; } #nav-toggle-1:checked ~ ul.lvl-1 { height: auto; } #nav-toggle-2:checked ~ ul.lvl-2, #nav-toggle-3:checked ~ ul.lvl-3 { left: 0; width: 100%; }
}
Responsive nav with submenus - Script Codes
Responsive nav with submenus - Script Codes
Home Page Home
Developer Teo Dragovic
Username teodragovic
Uploaded January 05, 2023
Rating 3
Size 4,273 Kb
Views 6,072
Do you need developer help for Responsive nav with submenus?

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!

Teo Dragovic (teodragovic) Script Codes
Name
Annoying label thingy
Galaxy sky thingy
Cube thingy
Client logo done in css
A Pen by Teo Dragovic
Sticky sidebar thingy
Mobile navigation thingy
Page load thingy
Fade text
Origami boat
Create amazing art & images 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!