Skip to content

Instantly share code, notes, and snippets.

@nilsandrey

nilsandrey/index.html

Created April 4, 2021 22:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nilsandrey/dd6afeb6a0da07a45502fc4644dcdff9 to your computer and use it in GitHub Desktop.
Save nilsandrey/dd6afeb6a0da07a45502fc4644dcdff9 to your computer and use it in GitHub Desktop.
Download ZIP
Scriptless HTML Menu
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0" />
<title>Document</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle">Menu</label>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Articles</a></li>
<li><a href="">Colophon</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</body>
</html>
Raw
style.css
/* Ignore this */
body {
margin: 2rem;
}
/* Main default styling */
input[type="checkbox"] {
left: -9999px;
opacity: 0;
position: absolute;
}
label {
border: 1px solid currentColor;
border-radius: 4px;
cursor: pointer;
padding: 10px;
}
nav {
opacity: 0;
position: absolute;
z-index: -2;
}
/* Show nav element when checkbox active */
input[type="checkbox"]:checked ~ nav {
opacity: 1;
z-index: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment