Cada vez se pueden hacer mas maravillas con el CSS3, es cuestion de experimentar e ir probando, sobre todo a l@s que les guste el diseño web como a mi. En esta ocasion, he diseñado este menu 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. Para realizar estos efectos, he utilizado las propiedades 'perspective', 'transform' y 'linear-gradient', entre otras. Esta confeccionado integramente con CSS3, quitando de los pequeños iconos que son imagenes en formato png transparente. El resultado es un menu original y visualmente atractivo, como podeis ver.
Para ponerlo en vuestro blog o web, tan solo teneis que copiar el siguiente codigo y ponerlo en un gadget HTML. Modificais lo siguiente para adaptarlo a lo que querais 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 imagenes de los iconos.
ORIGEN DE LA ENTRADA: http://redeando.blogspot.com/2012/09/menu-vertical-desplegable.html
<div class="menudesplegable"><a class="main">Legal Web</a>
<div class="sub first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia8WYJXxvrynx8Aok3uh0Y6iAzZWcinLxF7faDK9DWF5UoTouZZMlAKPNXa1EQqNi-a5pr2pKEXkZiGgHmZQCEdcuAwmjr0oZ0kF6KgdNKadO4-qFTjUcGWlnAhEk_vfMgo2TX0XHHhoA/s1600/home32x32.png" />
<a href="http://politicayterminoslegales.blogspot.com/" target="_blank" style="text-decoration:none;"><p><span>Legalidad Web</span></p></a>
<div class="sub even">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2SBusE3t7nO1dUxwi09eCbZSvcZiR1cDrBXltPGZYPXBtkd3lPjESlUZJ-wj3Q_UoEYMpyEOPviR8VJfdTqGCpnzIogpmATJjiIVFG3SOY09nzHwn979iWxxgE3H-DVugXcxT-pqNo_Q/s1600/contact32x32.png" />
<a href="http://politicayterminoslegales.blogspot.com/p/contactame-comments-blog-pager.html" target="_blank" style="text-decoration:none;"><p><span>Contacto</span></p></a>
<div class="sub odd">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNl7oMe0rV5c2PUYX_yldCFyJKmXp7ghIZSRfI64npR2CwIfE6TShQg0fywSivOLYVRHWcvv-r0ODqXfxe761ZxPTBuFV73bVLMUT1DXM-G3svmaYsHx6yinzJ37lu-MLFNF6ciVsVdrQ/s1600/web32x32.png" />
<a href="http://politicayterminoslegales.blogspot.com/p/blog-page.html" target="_blank" style="text-decoration:none;"><p><span>Cookies</span></p></a>
<div class="sub even">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxFORBRdofKH4DMdvmUf_pnd7tsxYbCFGgJs0IYRYmtRpR321WTXkerldsGycyKHzCNhjTNW_ltrfRCP-41VFlL0k-zopFna0FJDEavNM74iOXsatj2R-IiyMF97VMP-juILJRJfEbd8/s1600/layout_content32x32.png" />
<a href="http://politicayterminoslegales.blogspot.com/p/formulario-de-encuesta.html" target="_blank" style="text-decoration:none;"><p><span>Encuesta</span></p></a>
<div class="sub odd last">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTGTucxklOeLZ5mfZQ0qMTbY8opKVMGBqAUpKtJw2oDEUoo9DpRCLiXSw4qYVNwF99LEpEKiaJDL6ZPwEXqdJd2o1VOflnswMYEcZBtGSlslnVBdrOZ8bExXlgz8EYHUqcbUUk0HK8sYs/s1600/Copyrigh32x32.png" />
<a href="http://politicayterminoslegales.blogspot.com/p/copyright-1-propiedad-intelectual-e.html" target="_blank" style="text-decoration:none;"><p><span>Copyright ©</span></p></a>
</div></div></div></div></div></div>
<style type="text/css">
.menudesplegable {width:250px; height:35px; margin:0 auto 0px 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>
No hay comentarios:
Publicar un comentario