<div id="myList">
<span>SELECT</span>
<ul>
<li><a href="#">Chrome</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Internet Explorer</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">Safari</a></li>
</ul>
</div>
html, body{
min-height: 100%;
}
body{
background-color: #B5BECF;
background-image: -ms-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
background-image: -moz-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
background-image: -o-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 140, color-stop(0, #B5BECF), color-stop(1, #78849A));
background-image: -webkit-radial-gradient(center, ellipse cover, #B5BECF 0%, #78849A 100%);
background-image: radial-gradient(ellipse cover at center, #B5BECF 0%, #78849A 100%);
font: 16px "Lucida Grande", Tahoma, Verdana, sans-serif;
letter-spacing: .5px;
}
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
/* DropDown */
#myList{
width:300px;
margin:100px auto;
}
li{
display: none;
position: relative;
}
a{
background-color: #f8f8f8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e2e2e2;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .4);
color:#666;
display: block;
padding: 15px;
-webkit-transition: color .2s linear, padding .2s linear;
-moz-transition: color .2s linear, padding .2s linear;
-o-transition: color .2s linear, padding .2s linear;
transition: color .2s linear, padding .2s linear;
}
a:hover{
background-color: #f0f0f0;
color: #0088cc;
padding-left: 30px;
}
span{
background-color: #f8f8f8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e2e2e2;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .4);
color:#666;
cursor: pointer;
display: block;
padding: 15px;
position: relative;
font-weight: bold;
padding-left: 15px !important;
}
span:after{
content: "\25BC";
position: absolute;
right: 15px;
top:15px;
}
.expand ul{
height: auto;
}
.expand li{
display: block;
-webkit-animation: expandAll .2s ease both;
-moz-animation: expandAll .2s ease both;
-o-animation: expandAll .2s ease both;
animation: expandAll .2s ease both;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.expand span, span:hover{
color: #0088cc;
}
.expand span:after{
content: "\25B2";
position: absolute;
right: 15px;
top:15px;
}
.collapse li{
display: block;
-webkit-animation: collapseAll .2s ease both;
-moz-animation: collapseAll .2s ease both;
-o-animation: collapseAll .2s ease both;
animation: collapseAll .2s ease both;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
/* Keyframes */
@-webkit-keyframes collapseAll {
0% { -webkit-transform: perspective(300px) rotateX(0deg); }
100% { -webkit-transform: perspective(300px) rotateX(-90deg); }
}
@-webkit-keyframes expandAll {
0% { -webkit-transform: perspective(300px) rotateX(-90deg); }
100% { -webkit-transform: perspective(300px) rotateX(0deg); }
}
@-moz-keyframes collapseAll {
0% { -moz-transform: perspective(300px) rotateX(0deg); }
100% { -moz-transform: perspective(300px) rotateX(-90deg); }
}
@-moz-keyframes expandAll {
0% { -moz-transform: perspective(300px) rotateX(-90deg); }
100% { -moz-transform: perspective(300px) rotateX(0deg); }
}
@-o-keyframes collapseAll {
0% { -o-transform: perspective(300px) rotateX(0deg); }
100% { -o-transform: perspective(300px) rotateX(-90deg); }
}
@-o-keyframes expandAll {
0% { -o-transform: perspective(300px) rotateX(-90deg); }
100% { -o-transform: perspective(300px) rotateX(0deg); }
}
@keyframes collapseAll {
0% { transform: perspective(300px) rotateX(0deg); }
100% { transform: perspective(300px) rotateX(-90deg); }
}
@keyframes expandAll {
0% { transform: perspective(300px) rotateX(-90deg); }
100% { transform: perspective(300px) rotateX(0deg); }
}
/*
Tested on Win7 with Chrome, Firefox and Safari.
Inspired by Mary Lou's work on Codrops:
https://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/
*/
$(function(){
var list = $("#myList"),
listItem = $("> ul li",list),
listCount = listItem.length;
function expand(){
listItem.each(function(i){
$(this).attr("style", "z-index:"+i+";"
+ "-webkit-animation-delay:" + i * 100 + "ms;"
+ "-moz-animation-delay:" + i * 100 + "ms;"
+ "-o-animation-delay:" + i * 100 + "ms;"
+ "animation-delay:" + i * 100 + "ms;");
});
list.removeClass("collapse").addClass("expand");
}
function collapse(){
listItem.each(function(i){
i++;
$(this).attr("style", "z-index:"+i+";"
+ "-webkit-animation-delay:" + (listCount-i) * 100 + "ms;"
+ "-moz-animation-delay:" + (listCount-i) * 100 + "ms;"
+ "-o-animation-delay:" + (listCount-i) * 100 + "ms;"
+ "animation-delay:" + (listCount-i) * 100 + "ms;");
});
list.removeClass("expand").addClass("collapse");
}
$("span").bind("click", function(){
if (list.hasClass("expand")) {
collapse();
}else{
expand();
}
});
});
This Pen doesn't use any external CSS resources.