Checkbox Mobile Nav Toggle Test
How do I make an checkbox mobile nav toggle test?
Testing to see if I could make a CSS only navigation that would collapse when one of the links was clicked, rather than relying on the checkbox being un-ticked.... What is a checkbox mobile nav toggle test? How do you make a checkbox mobile nav toggle test? This script and codes were developed by Chris Sargent on 29 November 2022, Tuesday.
Checkbox Mobile Nav Toggle Test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Checkbox Mobile Nav Toggle Test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="mobile-nav-check" />
<nav id="main-nav" class="navbar"> <label for="mobile-nav-check" class="mobile-nav-button"> Toggle Menu </label> <div class="nav-list-container"> <ul class="nav-list"> <li><a href="#about">About Us</a> </li> <li><a href="#team">Our Team</a> </li> <li><a href="#contact">Contact Us</a> </li> </ul> </div>
</nav>
</body>
</html>
Checkbox Mobile Nav Toggle Test - Script Codes CSS Codes
input#mobile-nav-check { display: none;
}
input#mobile-nav-check:checked + .navbar { max-height: 400px;
}
.mobile-nav-button { line-height: 50px;
}
.navbar { max-height: 50px; overflow: hidden; background-color: grey; border-bottom: 1px solid black;
}
.navbar .nav-list { margin: 0; padding: 0; border: 0; list-style-type: none;
}
.navbar .nav-list li a { display: block; line-height: 20px; padding: 15px 15px;
}
nav.navbar ~ a:active { background-color: yellow; height: 100px;
}
Developer | Chris Sargent |
Username | ChrisSargent |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 2,295 Kb |
Views | 10,120 |
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!
Name | Size |
Flexbox Linebreaks V1 | 1,900 Kb |
Map Expand 1 | 2,637 Kb |
Engine Anim Loader | 2,268 Kb |
Travis Neilson, Splash Page Flexbox Test | 4,633 Kb |
Flexbox Linebreaks V2 | 1,914 Kb |
IOS Pure CSS Slide Toggle Checkbox | 2,374 Kb |
Speech Bubble, Bg Image | 2,716 Kb |
Angle Gradient | 1,937 Kb |
Text Alignment Test | 1,531 Kb |
Angular Animation Done Call Back | 2,520 Kb |
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!
Name | Username | Size |
Button fills | Zubfatal | 5,205 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!