Ajax Loader
×

expanding flip menu

This is a fork of http://cssdeck.com/labs/flip-menu-perspective that compresses the menu to a single tile and expands it when hovered.

HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
 
3
<html>
4
<head>
5
    <title>flip menu</title>
6
</head>
7
 
8
<body>
9
    <h2>Best result with webkit prefix browsers</h2>
10
 
11
    <ul>
12
        <li id="holder">
13
            <a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
14
        </li>
15
 
16
        <li>
17
            <a class="entypo-star" href="#"></a> <span>Favorite</span>
18
        </li>
19
 
20
        <li>
21
            <a class="entypo-newspaper" href="#"></a> <span>About us</span>
22
        </li>
23
 
24
        <li>
25
            <a class="entypo-location" href="#"></a> <span>Find us</span>
26
        </li>
27
 
28
        <li>
29
            <a class="entypo-link" href="#"></a> <span>Share</span>
30
        </li>
31
 
32
        <li>
33
            <a class="entypo-help-circled" href="#"></a> <span>FAQ's</span>
34
        </li>
35
    </ul>
36
</body>
37
</html>
 
CSS 
@import url(http://weloveiconfonts.com/api/?family=entypo);
1
@import url(http://weloveiconfonts.com/api/?family=entypo);
2
 
3
/* entypo */
4
[class*="entypo-"]:before {
5
  font-family: 'entypo', sans-serif;
6
}
7
@-webkit-keyframes shrink {
8
  0% { height: 35px; opacity: 1;}
9
  80% { height: 35px; opacity: 1;}
10
  100% { height: 0; opacity: 0;}
11
}
12
@-moz-keyframes shrink {
13
  0% { height: 35px; opacity: 1;}
14
  80% { height: 35px; opacity: 1;}
15
  100% { height: 0; opacity: 0;}
16
}
17
@-o-keyframes shrink {
18
  0% { height: 35px; opacity: 1;}
19
  80% { height: 35px; opacity: 1;}
20
  100% { height: 0; opacity: 0;}
21
}
22
@keyframes shrink {
23
  0% { height: 35px; opacity: 1;}
24
  80% { height: 35px; opacity: 1;}
25
  100% { height: 0; opacity: 0;}
26
}
27
 
28
@-webkit-keyframes flip {
29
  0%{-webkit-transform:rotateY(0deg);
30
  opacity:1;}
31
  100%{-webkit-transform:rotateY(95deg);
32
  opacity:0;}
33
}
34
 
35
@-moz-keyframes flip {
36
  0%{-moz-transform:rotateY(0deg);
37
  opacity:1;}
38
  100%{-moz-transform:rotateY(95deg);
39
  opacity:0;}
40
}
41
 
42
@-o-keyframes flip {
43
  0%{-o-transform:rotateY(0deg);
44
  opacity:1;}
45
  100%{-o-transform:rotateY(95deg);
46
  opacity:0;}
47
}
48
 
49
@keyframes flip {
50
  0%{transform:rotateY(0deg);
51
  opacity:1;}
52
  100%{transform:rotateY(95deg);
53
  opacity:0;}
54
}
55
 
56
@-webkit-keyframes flip2 {
57
  0%{-webkit-transform:rotateY(0deg);
58
  opacity:1;}
59
  30%{-webkit-transform:rotateY(0deg);
60
  opacity:1;}
61
  100%{-webkit-transform:rotateY(95deg);
62
  opacity:0;}
63
}
64
 
65
@-moz-keyframes flip2 {
66
  0%{-moz-transform:rotateY(0deg);
67
  opacity:1;}
68
  30%{-moz-transform:rotateY(0deg);
69
  opacity:1;}
70
  100%{-moz-transform:rotateY(95deg);
71
  opacity:0;}
72
}
73
 
74
@-o-keyframes flip2 {
75
  0%{-o-transform:rotateY(0deg);
76
  opacity:1;}
77
  30%{-o-transform:rotateY(0deg);
78
  opacity:1;}
79
  100%{-o-transform:rotateY(95deg);
80
  opacity:0;}
81
}
82
83
@keyframes flip2 {
84
  0%{transform:rotateY(0deg);
85
  opacity:1;}
86
  30%{transform:rotateY(0deg);
87
  opacity:1;}
88
  100%{transform:rotateY(95deg);
89
  opacity:0;}
90
}
91
 
92
body {
93
 background:url(http://developer.jmbarcelon.com/img/forestblur.jpg) no-repeat;
94
  background-size:cover;
95
}
96
 
97
h2 {
98
    color: #555;
99
    text-align: center;
100
}
101
 
102
ul {
103
  position:absolute;
104
  left:0;
105
  right:0;
106
  margin:50px;
107
  padding:0;
108
109
  width:200px;
110
  height:220px;
111
  list-style:none;
112
  -webkit-perspective:1000;
113
  -moz-perspective:1000;
114
  -o-perspective:1000;
115
  perspective:1000;
116
}
117
 
118
li {
119
  margin:2px 0;
120
  padding:0;
121
  opacity: 0;
122
  height: 0;
123
  -webkit-transition:.5s;
124
  -moz-transition:.5s;
125
  -o-transition:.5s;
126
  transition:.5s;
127
}
128
li:not(#holder) {  animation: shrink 2s linear; }
129
li#holder { height: 35px; opacity: 1; }
130
 
131
li a {
132
  display:block;
133
  height:18px;
134
  width:20px;
135
  background:hsla(205,50%,50%,0.5);
136
  color:#fff;
137
  padding:8px 6px;
138
  text-decoration:none;
139
  text-align:center;
140
}
141
 
142
li span {
143
  width:154px;
144
  float:left;
145
  text-align:center;
146
  background:hsla(205,50%,50%,0.5);
147
  color:#fff;
148
  margin:-34px 34px;
149
  padding:8px 6px;
150
  transform-origin:0%;
151
  opacity:0;
152
  -webkit-transform:rotateY(95deg);
153
  -webkit-transition:.5s;
154
  -moz-transition:.5s;
155
  -o-transition:.5s;
156
  transition:.5s;
157
  -webkit-animation: flip 2s;
158
  -moz-animation: flip 2s;
159
  -o-animation: flip 2s;
160
  animation: flip 2s;
161
}
162
.menu {
163
  -webkit-animation: flip2 2.6s;
164
  -moz-animation: flip2 2.6s;
165
  -o-animation: flip2 2.6s;
166
  animation: flip2 2.6s;}
167
li:nth-child(2) span {
168
  -webkit-animation-delay:.5s;
169
  -moz-animation-delay:.5s;
170
  -o-animation-delay:.5s;
171
  animation-delay:.5s;}
172
li:nth-child(3) span {
173
  -webkit-animation-delay:.4s;
174
  -moz-animation-delay:.4s;
175
  -o-animation-delay:.4s;
176
  animation-delay:.4s;}
177
li:nth-child(4) span {
178
  -webkit-animation-delay:.3s;
179
  -moz-animation-delay:.3s;
180
  -o-animation-delay:.3s;
181
  animation-delay:.3s;}
182
li:nth-child(5) span {
183
  -webkit-animation-delay:.2s;
184
  -moz-animation-delay:.2s;
185
  -o-animation-delay:.2s;
186
  animation-delay:.2s;}
187
li:nth-child(6) span {
188
  -webkit-animation-delay:.1s;
189
  -moz-animation-delay:.1s;
190
  -o-animation-delay:.1s;
191
  animation-delay:.1s;}
192
 
193
li a:hover ~ span {
194
  opacity:1;
195
  -webkit-transform:rotateY(0deg);
196
  -moz-transform:rotateY(0deg);
197
  -o-transform:rotateY(0deg);
198
  transform:rotateY(0deg);
199
  -webkit-transition:.5s;
200
  -moz-transition:.5s;
201
  -o-transition:.5s;
202
  transition:.5s;
203
}
204
 
205
ul:hover > li >.menu{
206
  opacity:1;
207
  -webkit-transform:rotateY(0deg);
208
  -moz-transform:rotateY(0deg);
209
  -o-transform:rotateY(0deg);
210
  transform:rotateY(0deg);
211
  -webkit-transition:.5s;
212
  -moz-transition:.5s;
213
  -o-transition:.5s;
214
  transition:.5s;
215
}
216
 
217
ul:hover li { height: 35px; opacity: 1; }
 

expanding flip menu

CSSDeck G+