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.
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>
<head>
<title>flip menu</title>
</head>
<body>
<h2>Best result with webkit prefix browsers</h2>
<ul>
<li id="holder">
<a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
</li>
<li>
<a class="entypo-star" href="#"></a> <span>Favorite</span>
</li>
<li>
<a class="entypo-newspaper" href="#"></a> <span>About us</span>
</li>
<li>
<a class="entypo-location" href="#"></a> <span>Find us</span>
</li>
<li>
<a class="entypo-link" href="#"></a> <span>Share</span>
</li>
<li>
<a class="entypo-help-circled" href="#"></a> <span>FAQ's</span>
</li>
</ul>
</body>
</html>
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
@-webkit-keyframes shrink {
0% { height: 35px; opacity: 1;}
80% { height: 35px; opacity: 1;}
100% { height: 0; opacity: 0;}
}
@-moz-keyframes shrink {
0% { height: 35px; opacity: 1;}
80% { height: 35px; opacity: 1;}
100% { height: 0; opacity: 0;}
}
@-o-keyframes shrink {
0% { height: 35px; opacity: 1;}
80% { height: 35px; opacity: 1;}
100% { height: 0; opacity: 0;}
}
@keyframes shrink {
0% { height: 35px; opacity: 1;}
80% { height: 35px; opacity: 1;}
100% { height: 0; opacity: 0;}
}
@-webkit-keyframes flip {
0%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
@-moz-keyframes flip {
0%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
@-o-keyframes flip {
0%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
@keyframes flip {
0%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
@-webkit-keyframes flip2 {
0%{transform:rotateY(0deg);
opacity:1;}
30%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
@-moz-keyframes flip2 {
0%{transform:rotateY(0deg);
opacity:1;}
30%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
@-o-keyframes flip2 {
0%{transform:rotateY(0deg);
opacity:1;}
30%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
@keyframes flip2 {
0%{transform:rotateY(0deg);
opacity:1;}
30%{transform:rotateY(0deg);
opacity:1;}
100%{transform:rotateY(95deg);
opacity:0;}
}
body {
background:url(http://developer.jmbarcelon.com/img/forestblur.jpg) no-repeat;
background-size:cover;
}
h2 {
color: #555;
text-align: center;
}
ul {
position:absolute;
left:0;
right:0;
margin:50px;
padding:0;
width:200px;
height:220px;
list-style:none;
perspective:1000;
perspective:1000;
perspective:1000;
perspective:1000;
}
li {
margin:2px 0;
padding:0;
opacity: 0;
height: 0;
transition:.5s;
transition:.5s;
transition:.5s;
transition:.5s;
}
li:not(#holder) { animation: shrink 2s linear; }
li#holder { height: 35px; opacity: 1; }
li a {
display:block;
height:18px;
width:20px;
background:hsla(205,50%,50%,0.5);
color:#fff;
padding:8px 6px;
text-decoration:none;
text-align:center;
}
li span {
width:154px;
float:left;
text-align:center;
background:hsla(205,50%,50%,0.5);
color:#fff;
margin:-34px 34px;
padding:8px 6px;
transform-origin:0%;
opacity:0;
transform:rotateY(95deg);
transition:.5s;
transition:.5s;
transition:.5s;
transition:.5s;
animation: flip 2s;
animation: flip 2s;
animation: flip 2s;
animation: flip 2s;
}
.menu {
animation: flip2 2.6s;
animation: flip2 2.6s;
animation: flip2 2.6s;
animation: flip2 2.6s;}
li:nth-child(2) span {
animation-delay:.5s;
animation-delay:.5s;
animation-delay:.5s;
animation-delay:.5s;}
li:nth-child(3) span {
animation-delay:.4s;
animation-delay:.4s;
animation-delay:.4s;
animation-delay:.4s;}
li:nth-child(4) span {
animation-delay:.3s;
animation-delay:.3s;
animation-delay:.3s;
animation-delay:.3s;}
li:nth-child(5) span {
animation-delay:.2s;
animation-delay:.2s;
animation-delay:.2s;
animation-delay:.2s;}
li:nth-child(6) span {
animation-delay:.1s;
animation-delay:.1s;
animation-delay:.1s;
animation-delay:.1s;}
li a:hover ~ span {
opacity:1;
transform:rotateY(0deg);
transform:rotateY(0deg);
transform:rotateY(0deg);
transform:rotateY(0deg);
transition:.5s;
transition:.5s;
transition:.5s;
transition:.5s;
}
ul:hover > li >.menu{
opacity:1;
transform:rotateY(0deg);
transform:rotateY(0deg);
transform:rotateY(0deg);
transform:rotateY(0deg);
transition:.5s;
transition:.5s;
transition:.5s;
transition:.5s;
}
ul:hover li { height: 35px; opacity: 1; }