Spaces:
Runtime error
Runtime error
.navimenu { | |
position: relative; | |
min-width: 50px; | |
min-height: 50px; | |
box-sizing: border-box; | |
text-align: left; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-transform-style: preserve-3d; | |
outline: transparent solid 5px; | |
transform-style: preserve-3d | |
} | |
.navimenu .gooey-menu-item, .navimenu .open-button { | |
border-radius: 100%; | |
position: absolute; | |
color: #fff; | |
text-align: center; | |
font-size: .9em; | |
transform: translate3d(0, 0, 0); | |
-ms-transform: translate3d(0, 0, 0); | |
-moz-transform: translate3d(0, 0, 0); | |
-o-transform: translate3d(0, 0, 0); | |
-webkit-transform: translate3d(0, 0, 0); | |
transition: transform ease-out 200ms; | |
-ms-transition: transform ease-out 200ms; | |
-o-transition: transform ease-out 200ms; | |
-moz-transition: transform ease-out 200ms; | |
-webkit-transition: transform ease-out 200ms; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-transform-style: preserve-3d; | |
outline: transparent solid 5px; | |
transform-style: preserve-3d | |
} | |
.navimenu .menu-open { | |
display: none | |
} | |
.navimenu .burger { | |
background: #fff; | |
display: block; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-top: -1.5px; | |
transition: transform 200ms; | |
-ms-transition: transform 200ms; | |
-moz-transition: transform 200ms; | |
-webkit-transition: transform 200ms; | |
-o-transition: transform 200ms | |
} | |
.navimenu .burger-1 { | |
transform: translate3d(0, -8px, 0); | |
-moz-transform: translate3d(0, -8px, 0); | |
-o-transform: translate3d(0, -8px, 0); | |
-webkit-transform: translate3d(0, -8px, 0); | |
-ms-transform: translate3d(0, -8px, 0) | |
} | |
.navimenu .burger-2 { | |
transform: translate3d(0, 0, 0); | |
-ms-transform: translate3d(0, 0, 0); | |
-moz-transform: translate3d(0, 0, 0); | |
-o-transform: translate3d(0, 0, 0); | |
-webkit-transform: translate3d(0, 0, 0) | |
} | |
.navimenu .burger-3 { | |
transform: translate3d(0, 8px, 0); | |
-ms-transform: translate3d(0, 8px, 0); | |
-moz-transform: translate3d(0, 8px, 0); | |
-o-transform: translate3d(0, 8px, 0); | |
-webkit-transform: translate3d(0, 8px, 0) | |
} | |
.navimenu .menu-open:checked + .open-button .burger-1 { | |
transform: translate3d(0, 0, 0) rotate(45deg); | |
-ms-transform: translate3d(0, 0, 0) rotate(45deg); | |
-moz-transform: translate3d(0, 0, 0) rotate(45deg); | |
-o-transform: translate3d(0, 0, 0) rotate(45deg); | |
-webkit-transform: translate3d(0, 0, 0) rotate(45deg) | |
} | |
.navimenu .menu-open:checked + .open-button .burger-2 { | |
transform: translate3d(0, 0, 0) scale(.1, 1); | |
-ms-transform: translate3d(0, 0, 0) scale(.1, 1); | |
-moz-transform: translate3d(0, 0, 0) scale(.1, 1); | |
-o-transform: translate3d(0, 0, 0) scale(.1, 1); | |
-webkit-transform: translate3d(0, 0, 0) scale(.1, 1) | |
} | |
.navimenu .menu-open:checked + .open-button .burger-3 { | |
transform: translate3d(0, 0, 0) rotate(-45deg); | |
-ms-transform: translate3d(0, 0, 0) rotate(-45deg); | |
-moz-transform: translate3d(0, 0, 0) rotate(-45deg); | |
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg); | |
-o-transform: translate3d(0, 0, 0) rotate(-45deg) | |
} | |
.navimenu .gooey-menu-item:hover { | |
/*background-color: #4682b4;*/ | |
/*color: #00bcd4*/ | |
} | |
.navimenu .gooey-menu-item { | |
transition-duration: 180ms; | |
-moz-transition-duration: 180ms; | |
-webkit-transition-duration: 180ms; | |
-o-transition-duration: 180ms | |
} | |
.navimenu .open-button { | |
z-index: 2; | |
transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); | |
-ms-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); | |
-moz-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); | |
-webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); | |
-o-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); | |
transition-duration: 400ms; | |
-ms-transition-duration: 400ms; | |
-o-transition-duration: 400ms; | |
-moz-transition-duration: 400ms; | |
-webkit-transition-duration: 400ms; | |
transform: scale(1.1, 1.1) translate3d(0, 0, 0); | |
-ms-transform: scale(1.1, 1.1) translate3d(0, 0, 0); | |
-o-transform: scale(1.1, 1.1) translate3d(0, 0, 0); | |
-moz-transform: scale(1.1, 1.1) translate3d(0, 0, 0); | |
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); | |
cursor: pointer | |
} | |
.navimenu .open-button:hover { | |
transform: scale(1.2, 1.2) translate3d(0, 0, 0); | |
-ms-transform: scale(1.2, 1.2) translate3d(0, 0, 0); | |
-moz-transform: scale(1.2, 1.2) translate3d(0, 0, 0); | |
-o-transform: scale(1.2, 1.2) translate3d(0, 0, 0); | |
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0) | |
} | |
.navimenu .menu-open:checked + .open-button { | |
transition: 200ms linear; | |
-ms-transition: 200ms linear; | |
-webkit-transition: 200ms linear; | |
-moz-transition: 200ms linear; | |
-o-transition: 200ms linear; | |
transform: scale(.9, .9) translate3d(0, 0, 0); | |
-ms-transform: scale(.9, .9) translate3d(0, 0, 0); | |
-o-transform: scale(.9, .9) translate3d(0, 0, 0); | |
-webkit-transform: scale(.9, .9) translate3d(0, 0, 0); | |
-moz-transform: scale(.9, .9) translate3d(0, 0, 0) | |
} | |