<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="dropdown">
<div class="item collapse">Item 2</div>
<div class="item collapse">Item 3</div>
<div class="item collapse">Item 4</div>
<div class="item collapse">Select Item</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
background-color: #ea4848;
font-family: 'Source Sans Pro', Arial, sans-serif;
}
.dropdown {
width: 330px;
height: 50px;
margin: 40px auto;
perspective: 1000px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.dropped {
height: 200px;
}
.item {
width: 300px;
height: 50px;
line-height: 50px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin: 0 0;
padding: 0 20px;
background-color: white;
transition: transform .15s linear;
cursor: pointer;
top:10px;
user-select: none;
}
.item:last-child {
transform: translate3d(0, -150px, 0);
}
.item:not(:last-child) {
transform: translate3d(0, 50px, 0);
}
.item:hover:not(:last-child) {
background-color: #fafafa;
}
.collapse:nth-of-type(1) {
transform: translate3d(0, 0px, 0) scale(1.025);
}
.collapse:nth-of-type(1) {
transform: translate3d(0, 0, 0);
}
.collapse:nth-of-type(2) {
transform: translate3d(0, -56px, 0) scale(1.05);
}
.collapse:nth-of-type(1) {
transform: translate3d(0, 0, 0);
}
.collapse:nth-of-type(3) {
transform: translate3d(0, -112px, 0) scale(1.075);
}
.collapse:nth-of-type(1) {
transform: translate3d(0, 0, 0);
}
.collapse:nth-of-type(4) {
transform: translate3d(0, -168px, 0) scale(1.1);
}
.collapse:nth-of-type(1) {
transform: translate3d(0, 0, 0);
}
.collapse:hover:last-child {
transform-origin: 50% 100%;
transform: translate3d(0, -174px, 0) rotateX(30deg) scale(1.1);
}
$(document).ready(function(){
var dropdown = $('.dropdown');
var item = $('.item');
item.on('click', function() {
item.toggleClass('collapse');
if (dropdown.hasClass('dropped')) {
dropdown.toggleClass('dropped');
} else {
setTimeout(function() {
dropdown.toggleClass('dropped');
}, 150);
}
});
});
