"TaskListViews"
Bootstrap 2.3.2 Snippet by AlejandroLeonor

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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);
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rotating CSS Card

Questions / Comments: