Burger nav
How do I make an burger nav?
Burger nav css :checked toggle. What is a burger nav? How do you make a burger nav? This script and codes were developed by Dima on 15 December 2022, Thursday.
Burger nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>burger nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<input id="nav-toggle" type="checkbox" aria-hidden="true"/>
<div class="nav"> <label class="nav-toggle" for="nav-toggle" onclick="onclick"></label> <nav><a href="">About</a><a href="">Blog</a><a href="">My cat</a></nav>
</div>
<main> <h1>yet another burger nav</h1>
</main>
</body>
</html>
Burger nav - Script Codes CSS Codes
.nav { width: 320px; position: fixed; z-index: 100; top: 0; right: 0; height: 100vh; -webkit-transform: translateX(100%); transform: translateX(100%); background: #2196f3; -webkit-transition: 0.35s; transition: 0.35s;
}
.nav-toggle { position: relative; right: 6em; color: #fff; cursor: pointer;
}
.nav-toggle:hover:before { -webkit-animation: 0; animation: 0;
}
.nav-toggle:before { -webkit-animation: bounce 1.4s infinite; animation: bounce 1.4s infinite; content: '☰'; background: #e91e63; display: inline-block; margin: 0.5em; text-align: center; border-radius: 50%; width: 2em; font-size: 2em; line-height: 2;
}
[id='nav-toggle'] { display: none;
}
[id='nav-toggle']:checked ~ .nav { -webkit-transform: translateX(0); transform: translateX(0);
}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:before { -webkit-animation: 0; animation: 0; content: '\21e5';
}
[id='nav-toggle']:checked ~ .nav > .nav-toggle:after { content: ''; position: fixed; z-index: -1; right: 320px; height: 100vh; width: 100vw; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2ZmZiI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+"); opacity: 0.8;
}
.nav nav { text-align: center;
}
.nav nav a { text-decoration: none; font-size: 1.4em; padding: 1em; display: block; color: #fff;
}
.nav nav a:hover { text-decoration: underline;
}
@media (max-width: 400px) { .nav { width: 100%; } [id='nav-toggle']:checked ~ .nav .nav-toggle { float: right; right: auto; } [id='nav-toggle']:checked ~ .nav nav { clear: both; }
}
body { margin: 0; background: url("data:image/svg+xml;utf8,") right top/50% no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh;
}
main { margin: auto;
}
@-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, 12px, 0); transform: translate3d(0, 12px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } 90% { -webkit-transform: translate3d(0, 4px, 0); transform: translate3d(0, 4px, 0); }
}
@keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, 12px, 0); transform: translate3d(0, 12px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } 90% { -webkit-transform: translate3d(0, 4px, 0); transform: translate3d(0, 4px, 0); }
}
Developer | Dima |
Username | dimaZubkov |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 3,874 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 |
Three js | 2,323 Kb |
Vue cart | 4,497 Kb |
Codrops HoverEffectIdeas | 14,526 Kb |
Angular T-shirt shop | 8,889 Kb |
Audio button | 2,784 Kb |
Glitch | 3,368 Kb |
Ken Burns effect CSS only | 3,398 Kb |
Mega menu | 5,066 Kb |
Vue radio | 5,915 Kb |
Vue shopping cart | 6,338 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 |
Arrow Navigation | Hinducows | 1,973 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Coming Soon | MariamMassadeh | 1,680 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!