Skip to content

Instantly share code, notes, and snippets.

@RStankov

RStankov/menu.html

Created February 25, 2024 17:32
Show Gist options
  • Save RStankov/946d5578b089e454843c1ae973f8eeaf to your computer and use it in GitHub Desktop.
Save RStankov/946d5578b089e454843c1ae973f8eeaf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
menu.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Menu</title>
<style>
.wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 1.5em;
padding-right: 1.5em;
padding-left: 1.5em;
max-width: 1080px;
}
.main-menu:after {
content: '';
display: table;
clear: both;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu .main-menu {
display: none;
}
#tm:checked + .main-menu {
display: block;
}
#menu input[type='checkbox'],
#menu ul span.drop-icon {
display: none;
}
#menu .sub-menu {
background-color: #444;
margin: 0 1em;
}
#menu li,
#toggle-menu,
#menu a {
position: relative;
display: block;
color: white;
}
#menu {
background-color: #09c;
}
#toggle-menu {
background: #333;
}
#toggle-menu,
#menu a {
padding: 1em 1.5em;
}
#menu a:hover {
background-color: lightgray;
color: #09c;
}
#menu .sub-menu {
display: none;
}
#menu input[type='checkbox']:checked + .sub-menu {
display: block;
}
#menu .sub-menu a:hover {
color: #444;
}
#toggle-menu .drop-icon,
#menu li label.drop-icon {
position: absolute;
right: 0;
top: 0;
}
#menu label.drop-icon,
#toggle-menu span.drop-icon {
padding: 1em;
text-align: center;
background-color: rgba(0, 0, 0, 0.125);
color: rgba(255, 255, 255, 0.75);
}
@media only screen and (min-width: 1024px) {
#menu .main-menu {
display: block;
}
#toggle-menu,
#menu label.drop-icon {
display: none;
}
#menu ul span.drop-icon {
display: inline-block;
}
#menu li {
float: left;
}
#menu .sub-menu li {
float: none;
}
#menu .sub-menu {
margin: 0;
position: absolute;
top: 100%;
left: 0;
width: 12em;
z-index: 3000;
}
#menu .sub-menu,
#menu input[type='checkbox']:checked + .sub-menu {
display: none;
}
#menu .sub-menu .sub-menu {
top: 0;
left: 100%;
}
#menu .sub-menu .drop-icon {
position: absolute;
top: 0;
right: 0;
padding: 1em;
}
#menu li:hover > input[type='checkbox'] + .sub-menu {
display: block;
}
}
</style>
</head>
<body>
<div class="wrapper">
<nav id="menu">
<label for="tm" id="toggle-menu"
>Navigation <span class="drop-icon">▾</span></label
>
<input type="checkbox" id="tm" />
<ul class="main-menu">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#"
>Menu 2
<span class="drop-icon">▾</span>
<label class="drop-icon" for="sm0">▾</label>
</a>
<input type="checkbox" id="sm0" />
<ul class="sub-menu">
<li>
<a href="#">Item 2.1</a>
</li>
<li>
<a href="#">Item 2.2</a>
</li>
<li>
<a href="#">Item 2.3</a>
</li>
<li>
<a href="#">Item 2.4</a>
</li>
</ul>
</li>
<li>
<a href="#"
>Menu 3
<span class="drop-icon">▾</span>
<label class="drop-icon" for="sm1">▾</label>
</a>
<input type="checkbox" id="sm1" />
<ul class="sub-menu">
<li>
<a href="#">Item 3.1</a>
</li>
<li>
<a href="#"
>Item 3.2
<span class="drop-icon">▸</span>
<label class="drop-icon" for="sm2">▾</label>
</a>
<input type="checkbox" id="sm2" />
<ul class="sub-menu">
<li>
<a href="#">Item 3.2.1</a>
</li>
<li>
<a href="#">Item 3.2.2</a>
</li>
<li>
<a href="#">Item 3.2.3</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 3.3</a>
</li>
</ul>
</li>
<li>
<a href="#"
>Menu 4
<span class="drop-icon">▾</span>
<label class="drop-icon" for="sm3">▾</label>
</a>
<input type="checkbox" id="sm3" />
<ul class="sub-menu">
<li>
<a href="#"
>4.1
<span class="drop-icon">▸</span>
<label class="drop-icon" for="sm4">▾</label>
</a>
<input type="checkbox" id="sm4" />
<ul class="sub-menu">
<li>
<a href="#">4.1.1</a>
</li>
<li>
<a href="#">4.1.2</a>
</li>
<li>
<a href="#">4.1.3</a>
</li>
<li>
<a href="#">4.1.4</a>
</li>
</ul>
</li>
<li>
<a href="#"
>4.2
<span class="drop-icon">▸</span>
<label class="drop-icon" for="sm5">▾</label>
</a>
<input type="checkbox" id="sm5" />
<ul class="sub-menu">
<li>
<a href="#">4.2.1</a>
</li>
<li>
<a href="#">4.2.2</a>
</li>
<li>
<a href="#">4.2.3</a>
</li>
</ul>
</li>
<li>
<a href="#"
>4.3
<span class="drop-icon">▸</span>
<label class="drop-icon" for="sm6">▾</label>
</a>
<input type="checkbox" id="sm6" />
<ul class="sub-menu">
<li>
<a href="#">4.3.1</a>
</li>
<li>
<a href="#">4.3.2</a>
</li>
<li>
<a href="#">4.2.2</a>
</li>
<li>
<a href="#">4.3.4</a>
</li>
<li>
<a href="#">4.3.5</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</li>
<li>
<a href="#"
>Menu 6
<span class="drop-icon">▾</span>
<label class="drop-icon" for="sm8">▾</label>
</a>
<input type="checkbox" id="sm8" />
<ul class="sub-menu">
<li>
<a href="#">Item 6.1</a>
</li>
<li>
<a href="#">Item 6.2</a>
</li>
<li>
<a href="#">Item 6.2</a>
</li>
<li>
<a href="#">Item 6.4</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment