|
/*
|
|
gefunden auf
|
http://elijahmanor.com/css-animated-hamburger-icon/
|
|
Pfeilsymbole auf
|
https://websitebuilders.com/tools/html-codes/arrows/
|
|
*/
|
|
/*body { background-color: black; height: 100%; }*/
|
/*h3 { color: white; }*/
|
#nav-toggle { position: absolute; left: 3px; top: 1px; }
|
|
#nav-toggle { cursor: pointer; padding: 10px 70px 16px 0px; }
|
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
|
cursor: pointer;
|
border-radius: 1px;
|
height: 3px;
|
width: 18px;
|
background: black;
|
position: absolute;
|
display: block;
|
content: '';
|
}
|
#nav-toggle span:before {
|
top: -5px;
|
}
|
#nav-toggle span:after {
|
bottom: -5px;
|
}
|
|
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
|
transition: all 500ms ease-in-out;
|
}
|
#nav-toggle.active span {
|
background-color: transparent;
|
}
|
#nav-toggle.active span:before, #nav-toggle.active span:after {
|
top: 0;
|
}
|
#nav-toggle.active span:before {
|
transform: rotate(45deg);
|
}
|
#nav-toggle.active span:after {
|
transform: rotate(-45deg);
|
}
|
