The Future Now - CSS3 Exploding Menu for Blogger

CSS Code Snippet
This section code should be inserted before the closing head tag.

/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/css3-explode.html Copyright (c) 2005-2011 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. BLOGGERIZED BY BLOGSPOTVISION.COM =================================================================== */ .menu, .menu ul {padding:0; margin:0; list-style:none; display:block; text-align:center; width:140px; height:50px;} .menu {width:150px; height:60px; margin:0 auto; position:relative; border-top:1px solid transparent;} /* required for non-IE browsers */ .menu li.topLi {width:150px; height:60px; line-height:50px; position:relative; z-index:100; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; transition-delay: 0.5s; -o-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } .menu li.close {position:absolute; top:0; left:-9999px; opacity:0; z-index:100; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; transition-delay: 1.5s; -o-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -ms-transition-delay: 1.5s; -webkit-transition-delay: 1.5s; } .menu li.topLi > a {display:block; width:150px; height:60px; background:url(http://www.blogspotvision.info/scripts/cssplay4/nav.png) no-repeat center center} .menu ul li a {display:block; width:140px; height:50px; opacity:0.6; float:left; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .menu li a b {position:absolute; left:-9999px;} .menu li.topLi ul li.p1 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/hi5.png);} .menu li.topLi ul li.p2 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/bebo.png);} .menu li.topLi ul li.p3 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/reddit.png);} .menu li.topLi ul li.p4 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/heart.png);} .menu li.topLi ul li.p5 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/live.png);} .menu li ul {z-index:-1; position:absolute; top:0; left:0; border:5px solid #acb; -o-border-radius: 30px; -msl-border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all0.5s ease-in-out; transition-delay: 0.5s; -o-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } .menu li ul li {position:absolute; left:0; top:0; width:150px; height:50px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; transition-delay: 0.5s; -o-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -ms-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } .menu li.topLi:hover {margin-top:-60px;} .menu li.topLi:hover ul {top:60px; width:700px; left:-280px;} .menu li.topLi:hover ul li.p1 {left:0; top:0;} .menu li.topLi:hover ul li.p2 {left:140px; top:0;} .menu li.topLi:hover ul li.p3 {left:280px; top:0;} .menu li.topLi:hover ul li.p4 {left:420px; top:0;} .menu li.topLi:hover ul li.p5 {left:560px; top:0;} .menu li a:hover {opacity:1;} .imageHolder {width:740px; margin:0 auto; height:400px; border:1px solid #ddd; padding-top:60px; background:#fff url(http://www.blogspotvision.info/scripts/cssplay4/back.png) no-repeat 0 0;} /* for iPhone, iPad and iPod Touch */ .menu li.close a {display:block; width:150px; height:60px; background: url(http://www.blogspotvision.info/scripts/cssplay4/close.png) no-repeat center center;} .menu li.topLi:hover > a {opacity:0;} .menu li.topLi:hover + li.close {left:0; top:-60px; opacity:1}

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<div class="imageHolder"> <ul class="menu"> <li class="topLi"><a href="#url"><b>menu</b></a> <ul> <li class="p1"><a href="#url"><b>hi5</b></a></li> <li class="p2"><a href="#url"><b>bobo</b></a></li> <li class="p3"><a href="#url"><b>reddit</b></a></li> <li class="p4"><a href="#url"><b>heart</b></a></li> <li class="p5"><a href="#url"><b>live</b></a></li> </ul> </li> <li class="close"><a href="#url"><b>Close</b></a> </li></ul> </div>