Created
June 9, 2013 16:45
-
-
Save vxsx/5744220 to your computer and use it in GitHub Desktop.
A CodePen by Vadim Sikora. Dropdown menu - Just a proof of concept no js dropdown menu inspired by http://www.riotindustries.com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <link rel="stylesheet" href="css/screen.css" type="text/css" /> | |
| </head> | |
| <body> | |
| <div class="menu"> | |
| <label class="menu__toggle" for="menu-toggle"> | |
| show/hide | |
| </label> | |
| <ul class="menu__i"> | |
| <input type="checkbox" id="menu-toggle" class="menu__input"> | |
| <li class="menu__item">menu item 1</li> | |
| <li class="menu__item">menu item 2</li> | |
| <li class="menu__item">menu item 3</li> | |
| <li class="menu__item">menu item 4</li> | |
| <li class="menu__item">menu item 5</li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //"look ma" joke |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass"; | |
| @import "compass"; | |
| @import "compass/reset"; | |
| html, body { | |
| //some dirty stuff | |
| font-family: Helvetica, Arial, sans-serif; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| // necessary part | |
| .menu { | |
| @include perspective(3000px); | |
| @include transform-style(preserve-3d); | |
| } | |
| .menu__item { | |
| @include transition(0.4s); | |
| @include transform(rotateX(-100deg) translateZ(-20px)); | |
| @include backface-visibility(hidden); | |
| background: #888; | |
| input:checked ~ & { | |
| @include transform(rotateX(0deg) translateZ(0)); | |
| background: #fff; | |
| } | |
| $x : 5; | |
| @for $i from 0 through $x { | |
| &:nth-child(#{$i+1}) { | |
| @include transition-delay(0.2s*$i); | |
| } | |
| input:not(:checked) ~ &:nth-child(#{$x - $i +1}) { | |
| @include transition-delay(0.2s*$i); | |
| } | |
| } | |
| } | |
| .menu__input { | |
| display: none; | |
| } | |
| // optional part | |
| body { | |
| background-color: #a0a0a0; | |
| padding-top: 20px; | |
| } | |
| .menu { | |
| width: 300px; | |
| margin: 0 auto; | |
| } | |
| .menu__item, | |
| .menu__toggle { | |
| padding: 10px; | |
| display: block; | |
| } | |
| .menu__toggle { | |
| cursor: pointer; | |
| background-color: white; | |
| } | |
| .menu__item { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment