Tiny simple dropdown.
A Pen by Carl Calderon on CodePen.
Created
August 28, 2013 09:09
-
-
Save nicotaing/6363909 to your computer and use it in GitHub Desktop.
A Pen by Carl Calderon.
This file contains hidden or 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
| <body class="theme-transit"> | |
| <section id="content"> | |
| <h1>Subway - Red Line</h1> | |
| <div class="dropdown"> | |
| <div class="title">Telefonplan</div> | |
| <ul> | |
| <li>Liljeholmen</li> | |
| <li>Midsommarkransen</li> | |
| <li>Telefonplan</li> | |
| </ul> | |
| </div> | |
| </section> | |
| </body> |
This file contains hidden or 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
| $(".dropdown .title").click(function () { | |
| $(this).parent().toggleClass("closed"); | |
| }); | |
| $(".dropdown li").click(function () { | |
| $(this).parent().parent().toggleClass("closed").find(".title").text($(this).text()); | |
| }); |
This file contains hidden or 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"; | |
| /* OPTIONS */ | |
| $list_opacity: 0.2; | |
| $border_radius: 3px; | |
| $width: 300px; | |
| /* STYLES */ | |
| section#content { | |
| width: $width; | |
| position: fixed; | |
| left: 50%; | |
| top: 50px; | |
| margin-left: -150px; | |
| text-align: center; | |
| } | |
| h1 { | |
| color: white; | |
| text-shadow: 0px 2px 1px black; | |
| margin-bottom: 1em; | |
| } | |
| div.dropdown { | |
| text-align: left; | |
| font-size: 0.9em; | |
| color: rgb(240, 240, 240); | |
| text-shadow: 0px 1px 1px black; | |
| width: inherit; | |
| &.closed { | |
| ul { | |
| margin-top: 0px; | |
| li { | |
| margin-top: -40px; | |
| height: 0px; | |
| } | |
| } | |
| div.title:after { | |
| margin-top: -14px; | |
| @include transform(rotate(0deg)); | |
| } | |
| } | |
| div.title { | |
| width: 100%; | |
| height: 40px; | |
| border: 1px solid rgba(25,25,25,0.3); | |
| padding: 12px; | |
| cursor: pointer; | |
| @include box-sizing("border-box"); | |
| @include background-image(linear-gradient(top, rgba(230, 230, 230, $list_opacity), rgba(160, 160, 160, $list_opacity))); | |
| @include border-radius($border_radius); | |
| @include box-shadow(0px 1px 0px 0px rgba(0,0,0,0.3), 0px 2px 6px rgba(0,0,0,0.3)); | |
| &:after { | |
| display: block; | |
| content: "▾"; | |
| position: absolute; | |
| right: 20px; | |
| margin-top: -12px; | |
| @include transform(rotate(180deg)); | |
| } | |
| } | |
| ul { | |
| overflow: hidden; | |
| @include transition(margin-top 1s); | |
| @include box-sizing("border-box"); | |
| @include box-shadow(0px 1px 0px 0px rgba(0,0,0,0.3), 0px 2px 6px rgba(0,0,0,0.3)); | |
| @include border-radius(0px 0px $border_radius $border_radius); | |
| li { | |
| width: 100%; | |
| height: 40px; | |
| border: 1px solid rgba(25,25,25,0.3); | |
| padding: 12px; | |
| vertical-align: top; | |
| overflow: hidden; | |
| cursor: pointer; | |
| @include transition(margin-top 0.5s, height 0.5s); | |
| @include box-sizing("border-box"); | |
| @include background-image(linear-gradient(top, rgba(230, 230, 230, $list_opacity), rgba(160, 160, 160, $list_opacity))); | |
| &:first-child { | |
| border-bottom: none; | |
| border-top: none; | |
| } | |
| &:last-child { | |
| border-top: none; | |
| @include border-radius(0px 0px $border_radius $border_radius); | |
| } | |
| &:hover { | |
| text-shadow: 0px 1px 1px black, 0px 0px 4px white; | |
| } | |
| &:before { | |
| content: " "; | |
| display: inline-block; | |
| position: relative; | |
| background: transparent url("http://www.carlcalderon.com/pen/img/line-stop.png"); | |
| margin-top: -12px; | |
| margin-right: 10px; | |
| width: 20px; | |
| height: 40px; | |
| @include opacity(0.7); | |
| @include transition(all 0.5s); | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment