Collapsible nav with burger menu, no JS
<p>Look ma, no JavaScript!</p>
<p><small>(If you're all about the markup and don't mind a tiny bit of JS, check <a target="_blank" href="https://codepen.io/eduardoboucas/pen/rayExg">this one</a>.)</small></p>
<input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>
<nav id="navigation1" class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Stuffs</a></li>
<li><a href="#">Other stuffs</a></li>
<li><a href="#">Cats</a></li>
</ul>
</nav>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
// Burger menu button
html {
background:black;
}
$burger--thickness: 4px;
.burger {
$width: 28px;
display: inline-block;
border: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: $burger--thickness solid currentColor;
width: $width;
transition: border-bottom 1s ease-in-out;
-webkit-transition: border-bottom 1s ease-in-out;
// Fix for extra space in Firefox
&::-moz-focus-inner {
border: 0;
padding: 0;
}
&:before {
content: "";
display: block;
border-bottom: $burger--thickness solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
&:after {
content: "";
display: block;
border-bottom: $burger--thickness solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-bottom: $burger--thickness solid transparent;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
&:before {
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
&:after {
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
}
// * * * Navigation * * *
$navigation__transition: max-height 0.5s ease-in-out;
.navigation {
overflow: hidden;
max-height: 0;
transition: $navigation__transition;
}
.burger-check:checked ~ .navigation {
max-height: 500px;
transition: $navigation__transition;
}
// * * * Demo * * *
body {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-style: italic;
font-size: 30px;
text-align: centeR;
}
a {
color: inherit;
}
small {
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400italic" rel="stylesheet" />