Add mobile header menu

This commit is contained in:
Moris Zen
2018-06-30 13:28:19 +02:00
parent baf8cdf7cc
commit 9eaa57b2b3
3 changed files with 85 additions and 3 deletions

44
src/components/Header.css Normal file
View File

@@ -0,0 +1,44 @@
.menu_icon [class*='menu_bar-'] {
background: #000;
display: block;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.2s ease all;
transition: 0.2s ease all;
height: 2px;
margin-bottom: 0.3rem;
}
.menu_bar-top {
width: 25px;
}
.menu_bar-mid {
width: 15px;
}
.menu_bar-bot {
width: 20px;
}
.menu-opened .menu_bar-bot {
width: 25px;
}
.menu-opened .menu_bar-top {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 15% 15%;
transform-origin: 15% 15%;
}
.menu-opened .menu_bar-mid {
opacity: 0;
}
.menu-opened .menu_bar-bot {
-webkit-transform: rotate(45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 15% 95%;
transform-origin: 15% 95%;
}