MENÚ VERTICAL ACORDEÓN DESPLEGABLE

julio 27, 2019

MENÚ VERTICAL ACORDEÓN DESPLEGABLE .

Si queréis verlo en acción podéis ir a mi Bloc de Demos lo veréis con el nombre Menú.

Cada vez se pueden hacer más maravillas con el CSS3, es cuestión de experimentar e ir probando, sobre todo a las que les guste el diseño web como a mí.

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.

Para realizar estos efectos, he utilizado las propiedades 'perspective', 'transform' y 'linear-gradient', entre otras.

Está confeccionado íntegramente 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 está en color rojo son las direcciones (URL), lo que está en color verde es el texto de los enlaces y lo que está en color violeta son las URL 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://gadgetskiradoberman.blogspot.com"><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://escaparatedigital2019.blogspot.com"><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://gadgetskiradoberman.blogspot.com"><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://gadgetskiradoberman.blogspot.com"><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://gadgetskiradoberman.blogspot.com"><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>

Despues de haber insertado el código, un clic en "Guardar"