%body.nojs
%h1 drop down menus
.select
%span Standard drop down
%ul
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%br
.select
%span multiple select dropdown
%ul
%li
%label
%input{:type => "checkbox"}/
%span
awesome
%li
%label
%input{:type => "checkbox"}/
%span
awesome
%li
%label
%input{:type => "checkbox"}/
%span
awesome
%li
%label
%input{:type => "checkbox"}/
%span
awesome
%li
%label
%input{:type => "checkbox"}/
%span
awesome
%br
.select
%span Drop down with a long list
%ul
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} big tall list
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click wow
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} it is very tall
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} click
%li
%a{:href => ""} so tall
%br
%br
%br
%br
%br
%br
%br
%br
%br
%br
%br
%br
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import "compass/css3";
$tone: #b5b9bf;
$rh-blue: #4e9fdd;
$line-height:1.75em;
$size:11.2px;
/* demo junk */
body{ max-width: 30em; margin: 1em auto;
background-color:$tone; height: 101%;
padding:4em;
font:{
family: "Open Sans",sans-serif;
weight: 400;
size: $size;
}
line-height:$line-height;
}
h1{font-weight: 300; font-size:4em; text-align:center; color: darken($tone, 10%); padding-bottom:.5em;line-height:1em;}
/* ************************ */
/* meat and potatoes */
.select{ user-select:none;
cursor: pointer;
position:relative;
text-align:left;
height: $line-height*2;
line-height: $line-height*2;
display: block; width: 100%;
background-color:rgba(lighten($tone, 17%),.5);
@include background(linear-gradient(top, lighten($tone, 19%) 0%, darken($tone, 0%) 100%));
@include border-radius( .25em);
color:rgba(0,0,0,0.5);
@include box-shadow( 0 1px 2px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 $line-height 0 rgba(255,255,255,0.15));
text-indent: 1em;
width: 97%;
min-width: 11em;
text-overflow:ellipsis;
white-space:nowrap;
&:after{
position:absolute;
top:0;
right:0;
content:"";
display: block;
height: $line-height*2; width: 2.5em ;
@include box-shadow( 0 0 0 1px rgba(0,0,0,0.015), inset 0 0 0 1px rgba(255,255,255,0.1), -.2em 0 .2em -.2em rgba(0,0,0,0.2)) ;
float:right;
border-radius:0 .25em .25em 0;
}
&:before{
content:"";
border: .5em solid black;
border-width:.5em .5em 0;
border-color: #ccc transparent ;
border-color: rgba(0,0,0,0.2) transparent ;
width: 0; height: 0;
position:absolute; right:0;
margin-top: $line-height*.85;
margin-left:-4em;
margin-right: .75em;
transition: all .15s ease;
}
&:hover{
background-color: rgba(255,255,255,0.5);
color:#333;
&:before{
border-color: #666 transparent ;
border-color: rgba(0,0,0,0.5) transparent ;
}
}
ul{ position:relative;
list-style: none; z-index:2;
padding:0; margin:0;
background-color: lighten($tone, 20%);
@include border-radius( 0 0 .25em .25em);
@include box-shadow( 0 1px 2px rgba(0,0,0,0.15),
0 0 0 1px rgba(0,0,0,0.05),
0 0 3em rgba(0,0,0,0.2),
inset 0 0 0 1px rgba(255,255,255,0.12));
width: 100%;
overflow:hidden;
max-height:15em; overflow-y: auto;
li{ display:inline;
margin:0;
padding:0;
width: 100%;
a, label, span{
span{display: block; position: absolute; top:0; left:0; width: 100%;}
input[type="checkbox"]{opacity:0;}
cursor: pointer;
text-overflow: ellipsis;
position:relative;
z-index:1;
text-decoration: none;
display:block;
color:darken($tone, 20%);
&:hover, input:checked ~ span{
background-color:$rh-blue;
@include background(linear-gradient(top, lighten($rh-blue, 7%) 0%, darken($rh-blue, 7%) 100%));
color: white;
}
input:checked ~ span{&:after{content: "selected"; position: absolute; right: 2em; margin-right:2em; }}
}
&:last-child a{
@include border-radius( 0 0 .25em .25em );
}
}
&:before{
content:"";
display: block; position: absolute; top: 2px; width: 100%; height: .5em; @include background(linear-gradient(top, lighten($rh-blue, 25%) 0%, lighten($tone, 20%) 100%));
box-shadow:0 -1px 0 lighten($rh-blue, 35%), 0 -2px 0 $rh-blue}
}
span{display:block;text-overflow: ellipsis; overflow:hidden; padding-right:3em; position:relative; z-index: 1;}
}
.select.clicked{@include border-radius( .25em .25em 0 0 );
background-color:rgba(lighten($tone, 17%),.5);
@include background(linear-gradient(top,
lighten($tone, 6%) 0%,
lighten($tone, 14%) 20%,
lighten($tone, 22%) 100%));
@include box-shadow( 0 1px .5em rgba($rh-blue,0.5), 0 0 0 1px $rh-blue, inset 0 0 0 1px rgba(255,255,255,0.25));
color: darken($tone, 50%);
&:before{
content:"";
border-width:0 .5em .5em .5em;
border-color: rgba(0,0,0,0.15) transparent ;
position:absolute; right:0;
margin-top: $line-height*.8;
}
span{color:desaturate(darken($tone,50%), 80%)}
}
.select.clicked ul{display:block; @include box-shadow( 0 1px 2px rgba(0,0,0,0.15),
0 0 0 1px rgba(0,0,0,0.05),
0 0 3em rgba(0,0,0,0.2),
inset 0 0 0 1px rgba(255,255,255,0.12)); }
.select ul{display: none}
/* for our friends without javascript */
.nojs .select{ height: auto;
&:hover ul{display:block; max-height: 8em; &:before{display:none;}}}
$("body").removeClass("nojs").addClass("js");
$("div.select > span").click(function(e) {
var container = $(this).parent();
// var container = $(this).closest('div.select'); // alternative
if (container.hasClass('clicked')) {
// Dropdown already open so close it
container.removeClass('clicked');
}
else {
// Hide all open dropdowns so only one is open at a time
$("div.select.clicked").removeClass("clicked");
// Open this dropdown
container.addClass("clicked");
}
e.stopPropagation(); // prevent the $('html').click fires..
});
$('html').click(function(e){
// this is not pretty...
// check if we are clicking inside an open select
if ($(e.target).closest('div.select.clicked').length == 0) {
// Close open dropdowns when clicking elsewhere
$('div.select.clicked').removeClass('clicked');
}
});
External CSS
This Pen doesn't use any external CSS resources.