CSS ANIMATED MENU

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
</head>
<style type=”text/css”>
.concertina {width:250px; height:35px; margin:0 auto; position:relative; z-index:100;
}
/* default settings */
.concertina div {position:absolute; padding:10px; left:0px; width:230px; height:auto;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform:perspective(350px) rotateX(-90deg);
-o-transform:perspective(350px) rotateX(-90deg);
transform:perspective(350px) rotateX(-90deg);
}
.concertina div.p1 {background:#eee; top:35px;
-webkit-transition:0.2s linear 0.8s;
-o-transition:0.2s linear 0.8s;
transition:0.2s linear 0.8s;
}
.concertina div.p2 {background:#ddd; top:70px;
-webkit-transition:0.2s linear 0.6s;
-o-transition:0.2s linear 0.6s;
transition:0.2s linear 0.6s;
}
.concertina div.p3 {background:#eee; top:110px;
-webkit-transition:0.2s linear 0.4s;
-o-transition:0.2s linear 0.4s;
transition:0.2s linear 0.4s;
}
.concertina div.p4 {background:#ddd; top:150px;
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.concertina div.p5 {background:#eee; top:180px ;border-radius: 0 0 10px 10px;
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.concertina:hover div {
-webkit-transform:perspective(350px) rotateX(0deg);
-o-transform:perspective(350px) rotateX(0deg);
transform:perspective(350px) rotateX(0deg);
}
.concertina:hover .p1 {
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.concertina:hover .p2 {
-webkit-transition:0.2s linear 0.2s;
-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
}
.concertina:hover .p3 {
-webkit-transition:0.2s linear 0.4s;
-o-transition:0.2s linear 0.4s;
transition:0.2s linear 0.4s;
}
.concertina:hover .p4 {
-webkit-transition:0.2s linear 0.6s;
-o-transition:0.2s linear 0.6s;
transition:0.2s linear 0.6s;
}
.concertina:hover .p5 {
-webkit-animation: flipUp 0.2s ease-in-out 0.8s forwards;
-o-animation: flipUp 0.2s ease-in-out 0.8s forwards;
animation: flipUp 0.2s ease-in-out 0.8s forwards;
-webkit-transition:0s linear 0.9s;
-o-transition:0s linear 0.9s;
transition:0s linear 0.9s;
}
@-webkit-keyframes flipUp {
0% {-webkit-transform: perspective(350px) rotateX(-90deg);}
50% {-webkit-transform: perspective(350px) rotateX(30deg);}
80% {-webkit-transform: perspective(350px) rotateX(-15deg);}
100% {-webkit-transform: perspective(350px) rotateX(0deg); box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
}
@-o-keyframes flipUp {
0% {-o-transform: perspective(350px) rotateX(-90deg);}
50% {-o-transform: perspective(350px) rotateX(30deg);}
80% {-o-transform: perspective(350px) rotateX(-15deg);}
100% {-o-transform: perspective(350px) rotateX(0deg); box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
}
@keyframes flipUp {
0% {transform: perspective(350px) rotateX(-90deg);}
50% {transform: perspective(350px) rotateX(30deg);}
80% {transform: perspective(350px) rotateX(-15deg);}
100% {transform: perspective(350px) rotateX(0deg); box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}
}
.concertina div img {display:block; float:left; padding:0 10px 5px 0;}
.concertina div p {font: normal 12px/15px arial, sans-serif !important; color:#000; padding:0; margin:0;}
.concertina div p span {display:block; font: bold 14px/18px arial, sans-serif !important; color:#ea0;}
.concertina div p a {font: normal 12px/15px arial, sans-serif; color:#09c;}
.concertina div p a:hover {text-decoration:none;}
.concertina a.main {display:block; height:35px; font: bold 15px/35px arial, sans-serif; text-align:center; text-decoration:none; color:#fff; background:#069; border-radius:10px 10px 0 0; position:relative; z-index:100;}
ul.folding-menu
{
top:200px;
list-style:none;
}
ul.folding-menu li
{
float:left;
}
</style>
<body>
<ul class=”folding-menu”>
<li>
<div class=”concertina”><a class=”main” href=”#url“>Home</a>
<div class=”p1″>Home1</div>
<div class=”p2″>Home2</div>
<div class=”p3″>Home3</div>
<div class=”p4″>Home4</div>
<div class=”p5″>Home5</div>
</div>
</li>
<li>
<div class=”concertina”><a class=”main” href=”#url“>Services</a>
<div class=”p1″>Service1</div>
<div class=”p2″>Service2</div>
<div class=”p3″>Service3</div>
<div class=”p4″>Service4</div>
<div class=”p5″>Service5</div>
</div>
</li>
<li>
<div class=”concertina”><a class=”main” href=”#url“>Products</a>
<div class=”p1″>PRODUCT1</div>
<div class=”p2″>PRODUCT2</div>
<div class=”p3″>PRODUCT3</div>
<div class=”p4″>PRODUCT4</div>
<div class=”p5″>PRODUCT5</div>
</div>
</li>
</ul>
</body>
</html>
Advertisements

One thought on “CSS ANIMATED MENU

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s