Animated Slide Up Menu CSS3 ( no script )

* { margin:0; padding:0; } body { font:bold 18px Georgia, serif; }
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
#page-wrap { width:370px; margin:60px auto; }
h1 { font:32px Helvetica, Arial, Sans-Serif; margin:0 0 20px 0; }
p { margin:0 0 20px 0; } a { text-decoration:none; }
.slide_up_menu a { display:block; height:130px; margin:0 0 0px 0; background:rgba(215, 215, 215, 0.5); border:1px solid #ccc; height:65px; overflow:hidden; }
.slide_up_menu h5 { color:#333; text-align:center;height:65px; font:italic 18px/65px Georgia, Serif; opacity:1;
-webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; }
.slide_up_menu a:hover h5 { margin-top:-65px; opacity:0; }
.slide_up_menu div { position:relative; color:white; font:bold 16px Georgia, Serif;height:45px; padding:10px; opacity:0;
-webkit-transform:rotate(6deg); -webkit-transition:all 0.4s linear; -moz-transform:rotate(6deg); -moz-transition:all 0.4s linear;
-o-transform:rotate(6deg); -o-transition:all 0.4s linear; }
.slide_up_menu a:hover div { opacity:1; -webkit-transform:rotate(0); -moz-transform:rotate(0); -o-transform:rotate(0); }
.slide_up_menu a:nth-child(1) div { background:#19aad9 url(home.png) 10px 10px no-repeat; padding-left:120px; }
.slide_up_menu a:nth-child(2) div { background:#98a424 url(about.png) 10px 10px no-repeat; padding-left:90px; }
.slide_up_menu a:nth-child(3) div { background:#f89901 url(photos.png) 10px 10px no-repeat; padding-left:133px; }
.slide_up_menu a:nth-child(4) div { background:#e51e47 url(email.png) 21px 10px no-repeat; padding-left:90px; }
.slide_up_menu a:nth-child(5) div { background:#e55403 url(muthu.jpg) 10px 10px no-repeat; padding-left:133px; }

<div id="page-wrap">
<section class="slide_up_menu">
</section>
</div>

Tagged in:

• css animation
• Slide up menu
• Slide up css3
• Slide up ANIMATION