SCSS - Mobile menu
/* Mobile Menu */
$spanheight: 4px;
$margin: 5px;
$spans: 3;
$font: 'bignoodle';
.mobile-menu-icon {
span {
background: #fff;
display: block;
opacity:1;
transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
margin-bottom: $margin;
position:relative;
width: 100%;
height: $spanheight;
background: #fff;
&:hover {
background:#ddd;
}
.span2 {
transition:all 0.05s linear;
-webkit-transition:all 0.05s linear;
}
}
}
.show-mobile-menu .mobile-menu-icon {
margin-right: 5px;
width: 40px;
float: right;
}
.mobile-menu-icon.fixed {
span:first-child {
transform: rotate(45deg) ;
-webkit-transform: rotate(45deg) ;
-moz-transform: rotate(45deg) ;
-o-transform: rotate(45deg) ;
-ms-transform: rotate(45deg) ;
opacity:1;
top:$spanheight + $margin;
span {
opacity:0;
}
}
span:last-child {
transform: rotate(-45deg) ;
-webkit-transform:rotate(-45deg);
-moz-transform: rotate(-45deg) ;
-o-transform: rotate(-45deg) ;
-ms-transform: rotate(-45deg) ;
opacity:1;
bottom:($spanheight + $margin) * ($spans - 2);
}
}
.mobile-menu {
position: fixed;
top: -100%;
width: 100%;
height: 100%;
background: #545454;
z-index: 2;
transition: .5s all;
-webkit-transition: .5s all;
overflow-y: scroll;
ul {
margin: 70px 0 0 0;
padding: 0;
li:first-of-type {
display:none;
visibility: hidden;
}
li {
list-style: none;
list-style-type: none;
text-align: center;
font-size: 100%;
text-transform: uppercase;
a {
color:#fff;
font-family: $font;
}
}
}
}
.mobile-menu.active {
top: 0%;
}