85 lines
1.9 KiB
CSS
85 lines
1.9 KiB
CSS
|
.menu {
|
||
|
|
cursor: pointer;
|
||
|
|
height: 24px;
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
width: 30px;
|
||
|
|
position: relative;
|
||
|
|
-webkit-transform: rotate(0deg);
|
||
|
|
-moz-transform: rotate(0deg);
|
||
|
|
-o-transform: rotate(0deg);
|
||
|
|
transform: rotate(0deg);
|
||
|
|
-webkit-transition: .3s ease-in-out;
|
||
|
|
-moz-transition: .3s ease-in-out;
|
||
|
|
-o-transition: .3s ease-in-out;
|
||
|
|
transition: .3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu li {
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 4px;
|
||
|
|
display: block;
|
||
|
|
height: 2px;
|
||
|
|
left: 0;
|
||
|
|
margin: 0;
|
||
|
|
opacity: 1;
|
||
|
|
padding: 0;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
-webkit-transform: rotate(0deg);
|
||
|
|
-moz-transform: rotate(0deg);
|
||
|
|
-o-transform: rotate(0deg);
|
||
|
|
transform: rotate(0deg);
|
||
|
|
-webkit-transition: .15s ease-in-out;
|
||
|
|
-moz-transition: .15s ease-in-out;
|
||
|
|
-o-transition: .15s ease-in-out;
|
||
|
|
transition: .15s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu li:nth-child(1) {
|
||
|
|
top: 0;
|
||
|
|
-webkit-transform-origin: left center;
|
||
|
|
-moz-transform-origin: left center;
|
||
|
|
-o-transform-origin: left center;
|
||
|
|
transform-origin: left center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu li:nth-child(2) {
|
||
|
|
top: 9px;
|
||
|
|
-webkit-transform-origin: left center;
|
||
|
|
-moz-transform-origin: left center;
|
||
|
|
-o-transform-origin: left center;
|
||
|
|
transform-origin: left center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu li:nth-child(3) {
|
||
|
|
top: 18px;
|
||
|
|
-webkit-transform-origin: left center;
|
||
|
|
-moz-transform-origin: left center;
|
||
|
|
-o-transform-origin: left center;
|
||
|
|
transform-origin: left center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu.open li:nth-child(1) {
|
||
|
|
left: 4px;
|
||
|
|
top: -1px;
|
||
|
|
-webkit-transform: rotate(45deg);
|
||
|
|
-moz-transform: rotate(45deg);
|
||
|
|
-o-transform: rotate(45deg);
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu.open li:nth-child(2) {
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu.open li:nth-child(3) {
|
||
|
|
left: 4px;
|
||
|
|
top: 20px;
|
||
|
|
-webkit-transform: rotate(-45deg);
|
||
|
|
-moz-transform: rotate(-45deg);
|
||
|
|
-o-transform: rotate(-45deg);
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
}
|