Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Burger Menu - Full CSS / No JS
<h1>Burger Menu <span>by JLNLJN</span></h1>
<input id="burger" type="checkbox" />
<label for="burger">
<span></span>
<span></span>
<span></span>
</label>
<nav>
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
</nav>
// Thx for watching
// www.julienlejeune.com
$blackColor: #020304;
body {
background: $blackColor;
h1 {
position: fixed;
top: 40px;
left: 40px;
z-index: 6;
font-size: 20px;
font-weight: 900;
font-family: sans-serif;
text-transform: uppercase;
> span {
text-transform: none;
opacity: .5;
font-weight: 300;
font-size: 12px;
}
}
input + label {
position: fixed;
top: 40px;
right: 40px;
height: 20px;
width: 15px;
z-index: 5;
span {
position: absolute;
width: 100%;
height: 2px;
top: 50%;
margin-top: -1px;
left: 0;
display: block;
background: $blackColor;
transition: .5s;
}
span:first-child {
top: 3px;
}
span:last-child {
top: 16px;
}
}
label:hover {
cursor: pointer;
}
input:checked + label {
span {
opacity: 0;
top: 50%;
}
span:first-child {
opacity: 1;
transform: rotate(405deg);
}
span:last-child {
opacity: 1;
transform: rotate(-405deg);
}
}
input ~ nav {
background: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 3;
transition: .5s;
transition-delay: .5s;
overflow: hidden;
> ul {
text-align: center;
position: absolute;
top: 35%;
left: 20%;
right: 20%;
> li {
opacity: 0;
transition: .5s;
transition-delay: 0s;
> a {
text-decoration: none;
text-transform: uppercase;
color: $blackColor;
font-weight: 700;
font-family: sans-serif;
display: block;
padding: 30px;
}
}
}
}
input:checked ~ nav {
height: 100%;
transition-delay: 0s;
> ul {
> li {
opacity: 1;
transition-delay: .5s;
}
}
}
}
@camizzz
Copy link

camizzz commented Mar 8, 2018

Hey! Thanks for the code, it's what I've been looking for a long time. There's one big problem though, when you click the icon/the x-icon to close the menu, it has always scrolled to the very top of the page. Is there a solution for this?

Cheers

@ahmadeln
Copy link

ahmadeln commented Jul 7, 2018

@camizzz

input[type='checkbox'] {
  position: fixed;
  display: none;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment