<!-- added menu wrapper to the body so other elements can potentially hook of the same class -->
<body class="menu-active">
<!-- menu wrapper is needed for hover / click area and positioning -->
<div class="menu-wrapper">
<nav class="menu">
<ul>
<li><a href="#">Two all-beef patties</a></li>
<li><a href="#">Special sauce</a></li>
<li><a href="#">Lettuce</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Pickles</a></li>
<li><a href="#">Onions</a></li>
<li><a href="#">On a sesame seed bun</a></li>
</ul>
</nav>
</div>
<p>Respond me!</p>
</body>@import "bourbon";
body {
background: #13171b;
color: white;
font-family: 'Helvetica', sans-serif;
}
.menu-wrapper {
padding-top: 30px;
cursor: pointer;
overflow: hidden;
@include transition(padding 0.5s);
@media screen and (min-width: 500px) {
padding-top: 0px;
cursor: hand;
}
}
nav.menu {
position: relative; // for positioning before and after elements
background: white;
height: 5px;
width: 35px;
border-radius: 2px;
padding: 0;
cursor: pointer;
@include transition(all 0.5s 0.3s, margin 0.5s 0s);
@media screen and (min-width: 500px) {
height: auto;
width: auto;
}
ul {
list-style: none;
margin: 0;
padding: 0;
opacity: 0;
@include transition(opacity 0.5s 0.3s);
@media screen and (min-width: 500px) {
opacity: 1;
}
li {
border-radius: 2px;
overflow: hidden;
visibility: hidden;
@media screen and (min-width: 500px) {
display: inline-block;
visibility: visible;
}
a {
color: #53A8C9;
display: block;
padding: 10px 20px 10px 10px;
border-top: solid 1px #eeeeee;
text-decoration: none;
@include transition(all 0.3s 0s);
@media screen and (min-width: 500px) {
padding: 10px;
border-radius: 2px;
}
&:first-child {
border-top: none;
}
&:hover,
&:focus,
&.active {
background: #eeeeee;
color: darken(#53A8C9, 10);
padding: 10px 10px 10px 20px;
@media screen and (min-width: 500px) {
padding: 10px;
}
}
}
}
}
&:before,
&:after {
content: '';
height: 5px;
width: 35px;
background: white;
display: block;
position: absolute;
border-radius: 2px;
left: 0;
@include transition(all 0.5s);
@media screen and (min-width: 500px) {
display: none;
}
}
&:before {
top: -10px;
}
&:after {
top: -20px;
}
}
// -------------------- Active state
.menu-active {
.menu-wrapper {
padding-top: 0px;
}
nav.menu {
width: 200px;
margin-top: 40px;
box-shadow: 0px 2px 0px 0px rgba(black, 0.2);
height: 280px;
@include transition(all 0.5s 0.3s, margin 0.5s 0s);
@media screen and (min-width: 500px) {
margin-top: 0;
width: auto;
height: auto;
}
ul {
opacity: 1;
@include transition(opacity 0.5s 0s);
li {
visibility: visible;
}
}
&:before,
&:after {
top: -20px;
left: 100%;
right: 0;
width: 25px;
margin-left: -25px;
}
&:before {
@include transform(rotateZ(45deg));
}
&:after {
@include transform(rotateZ(-45deg));
}
}
}$(".menu-wrapper").on('click', function(){
$("body").toggleClass('menu-active');
});
External CSS
This Pen doesn't use any external CSS resources.