Skip to content

Instantly share code, notes, and snippets.

@Nesa344
Last active Feb 16, 2021
Embed
What would you like to do?
3 Hamburger menu button click animations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav Checkbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="nav-btn navbtn-1">
<input type="checkbox" class="btn">
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="nav-btn navbtn-2">
<input type="checkbox" class="btn">
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="nav-btn navbtn-3">
<input type="checkbox" class="btn">
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</body>
</html>
/*== STEP 1 ==*//*Body Reset*/
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background: #333;
display: flex;
justify-content: space-evenly;
align-items: center;
min-height: 100vh;
}
/*== STEP 2 ==*//*Main Container & Checkbox*/
.nav-btn {
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
position: relative;
}
.nav-btn .btn {
-webkit-appearance: none;
outline: none;
cursor: pointer;
z-index: 2;
transition: 0.6s;
}
/*== STEP 3 ==*//*Styles When the Checkbox is checked*/
.nav-btn .btn:checked ~ .lines .line:nth-child(1) {
opacity: 0;
}
.nav-btn .btn:checked ~ .lines .line:nth-child(3) {
transform: rotate(45deg) translate(-2em, 0.4em);
}
.nav-btn .btn:checked ~ .lines .line:nth-child(2) {
transform: rotate(-45deg) translate(-1.8em, -0.6em);
}
/*== STEP 4 ==*//*Hamburger Lines*/
.nav-btn .btn,
.nav-btn .lines {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
/*== STEP 5 ==*//*Individual Line*/
.nav-btn .line {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 0.3em;
background: #fff;
pointer-events: none;
transition: 0.3s;
}
.nav-btn .line:nth-child(2) { top: 25%; }
.nav-btn .line:nth-child(3) { top: 75%; }
/*== STEP 6 ==*//*Additional v2 and v3 styles*/
.navbtn-2 .btn:checked ~ .lines .line:nth-child(1) {
top: -1em;
}
.navbtn-3 .btn:checked ~ .lines .line:nth-child(1) {
transform: rotate(180deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment