| commit | author | age | ||
| a9b206 | 1 | |
| U | 2 | /* |
| 3 | ||
| 4 | gefunden auf | |
| 5 | http://elijahmanor.com/css-animated-hamburger-icon/ | |
| 6 | ||
| 7 | Pfeilsymbole auf | |
| 8 | https://websitebuilders.com/tools/html-codes/arrows/ | |
| 9 | ||
| 10 | */ | |
| 11 | ||
| 12 | /*body { background-color: black; height: 100%; }*/ | |
| 13 | /*h3 { color: white; }*/ | |
| 14 | #nav-toggle { position: absolute; left: 3px; top: 1px; } | |
| 15 | ||
| 16 | #nav-toggle { cursor: pointer; padding: 10px 70px 16px 0px; } | |
| 17 | #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { | |
| 18 | cursor: pointer; | |
| 19 | border-radius: 1px; | |
| 20 | height: 3px; | |
| 21 | width: 18px; | |
| 22 | background: black; | |
| 23 | position: absolute; | |
| 24 | display: block; | |
| 25 | content: ''; | |
| 26 | } | |
| 27 | #nav-toggle span:before { | |
| 28 | top: -5px; | |
| 29 | } | |
| 30 | #nav-toggle span:after { | |
| 31 | bottom: -5px; | |
| 32 | } | |
| 33 | ||
| 34 | #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { | |
| 35 | transition: all 500ms ease-in-out; | |
| 36 | } | |
| 37 | #nav-toggle.active span { | |
| 38 | background-color: transparent; | |
| 39 | } | |
| 40 | #nav-toggle.active span:before, #nav-toggle.active span:after { | |
| 41 | top: 0; | |
| 42 | } | |
| 43 | #nav-toggle.active span:before { | |
| 44 | transform: rotate(45deg); | |
| 45 | } | |
| 46 | #nav-toggle.active span:after { | |
| 47 | transform: rotate(-45deg); | |
| 48 | } | |
