Menu vertical uno

Menú vertical uno

Cada vez se pueden hacer mas maravillas con el CSS3, es cuestión de experimentar e ir probando, sobre todo al que les guste el diseño web como a mi. En esta ocasión, he diseñado este menú vertical en el que solo se ve una pestaña, pero que al posar el cursor sobre ella, se despliega como si fuera de papel. Esta confeccionado integramente con CSS3, quitando de los pequeños iconos que son imágenes en formato png transparente. El resultado es un menú original y visualmente atractivo, como podéis ver.

Para ponerlo en vuestro blog o web, tan solo tenéis que copiar el siguiente código y ponerlo en un Gadget HTML. Modificáis lo siguiente para adaptarlo a lo que queráis enlazar a vuestro gusto: Lo que esta en color rojo son las direcciones Urls, lo que esta en color verde es el texto de los enlaces y lo que esta en color violeta son las Urls de las imágenes de los iconos.

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior

<div class="menudesplegable"><a class="main">Menu</a><div class="sub first"><img src="http://png-4.findicons.com/files/icons/1254/flurry_system/32/home.png"><a href="https://blogimagenzero.blogspot.com.es/"><p><span>Inicio</span></a></p><div class="sub even"><img src="http://png-5.findicons.com/files/icons/2352/frankfurt/32/contact.png"><a href="https://blogimagenzero.blogspot.com.es//p/contacto_1.html"><p><span>Contacto</span></a></p><div class="sub odd">
<img alt="" src="http://png-4.findicons.com/files/icons/653/the_spherical/32/web.png"><a href="https://blogimagenzero.blogspot.com.es//p/webs-amigas.html"><p><span>Webs Amigas</span></a></p><div class="sub even">
<img alt="" src="http://png-4.findicons.com/files/icons/1588/farm_fresh_web/32/layout_content.png"><a href="https://blogimagenzero.blogspot.com.es//p/contenido.html"><p><span>Contenido</span></a></p><div class="sub odd last">
<img alt="" src="http://png-5.findicons.com/files/icons/753/gnome_desktop/32/gnome_emblem_photos.png"><a href="https://blogimagenzero.blogspot.com.es//p/banners_5.html"><p><span>Banners</span></a></p></div></div></div></div></div></div>

<style type="text/css">

.menudesplegable {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 10px 10px 0;}
.menudesplegable .sub p {font: normal 15px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 22px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 12px/15px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 30px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#F2F2F2 !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.16, rgb(0,102,153)),
color-stop(0.58, rgb(0,0,0))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style>

5-Da un clic en “Guardar”