Reines CSS & HTML Burger-Menü
14.05.2017Dieses Beispiel ist für Leute, wie mich, die Dinge, welche man bereits mit CSS lösen kann, gegenüber JavaScript bevorzugen, weil wichtige Bedienelemente auch ohne aktiviertes JavaScript nutzbar sein sollten.
Es handelt sich hierbei um ein klassisches Burger-Menü, welches über einen Button in der Navigationsleiste angezeigt wird.
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;
}
/* Im Produktiven Einsatz sollte der Text-Teil des Label-Elements vielleicht durch eine Hintergrund-Grafik ersetzt werden. */
.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 auf Bitbucket: https://bitbucket.org/snippets/ParouNeko/RLkxB)
