CSS & HTML only burger button
14.05.2017This example is for everyone like me, who prefers to solve things in CSS instead of JavaScript if it's doable, because important navigation elements should be usable without activated JavaScript, too.
It's a classic burger menu that is controlled by a button in the navigation bar of the website.
Code:
<!-- CSS & HTML only burger button with animation by Alice Peters, alicepeters.de -->
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS only burger button</title>
<style type="text/css">
body {
background-color: #000;
margin: 0;
padding: 0;
}
/* Animation */
@keyframes open {
from {
left: -100vw;
}
to {
left: 0;
}
}
#burgerbutton {
display: none;
}
/* You probably want to replace the text part of the label element with a background via css in productive use. */
.burgerimage {
position: absolute;
top: 0;
left: 10px;
font-size: 28pt;
cursor: pointer;
transition: transform 0.8s ease;
color: red;
}
nav {
background-color: #fff;
display: block;
height: 50px;
border-bottom: 3px solid red;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
nav ul {
display: none;
position: fixed;
top: 53px;
margin: 0;
padding: 0;
width: 50vw;
list-style: none;
}
nav ul li {
display: block;
width: auto;
}
nav ul li a {
text-decoration: none;
color: red;
background-color: #fff;
border-bottom: 1px solid darkred;
display: block;
padding: 20px;
transition: background 0.5s ease;
}
nav ul li a:hover {
background-color: pink;
color: darkred;
}
#burgerbutton:checked ~ ul {
display: block;
animation-name: open;
animation-duration: 0.8s;
}
#burgerbutton:checked ~ .burgerimage {
transform: rotate(360deg);
}
</style>
</head>
<body>
<nav>
<input type="checkbox" id="burgerbutton" />
<label for="burgerbutton" class="burgerimage" title="Navigation">☰</label>
<ul>
<li><a href="#" title="Link">Link</a></li>
<li><a href="#" title="Link">Link</a></li>
<li><a href="#" title="Link">Link</a></li>
<li><a href="#" title="Link">Link</a></li>
<li><a href="#" title="Link">Link</a></li>
</ul>
</nav>
</body>
</html>(Snippet on Bitbucket: https://bitbucket.org/snippets/ParouNeko/RLkxB)
