MENÚ VERTICAL CON EFECTO HOVER PARA EL SIDEBAR DE BLOGGER

enero 01, 2019

MENÚ VERTICAL CON EFECTO HOVER PARA EL SIDEBAR DE BLOGGER.

Las posibilidades del CSS3 nos permiten hoy en dia hacer diseños sin utilizar ningun tipo de imagen y javascript.

Es el caso del menu que os presento hoy, y que lo he realizado integramente a base de codigo de estilos.

Como podeis ver, tiene un diseño elegante que se adapta a cualquier plantilla, efecto zoom-out al pasar el raton y es ideal para colocarlo en la sidebar de nuestro blog.

Para añadirlo a vuestra pagina, tan solo teneis que copiar el codigo de abajo y pegarlo donde querais mostrarlo. Sustituid lo que esta escrito en color rojo por las urls y el texto que quereis poner.

Si quereis añadir mas enlaces, poneis la linea <li><a href="DIRECCION URL">TEXTO ENLACE</a></li> tantas veces como deseeis.

Si queréis verlo en acción podéis ir a mi Bloc de Demos

lo veréis en el sidebar con el nombre Menú Vertical

Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Ir a Blogger

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

<center>
<div class="menuzoomout">
<ul>
<li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
<li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
<li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
<li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
<li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
</ul>
</center></div>

<style>
.menuzoomout ul {
width: 100%;
margin: 15px 10px;
padding: 10px;
list-style: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #cccccc;
background: -moz-linear-gradient(left, #cccccc 0%, #e8e8e8 29%, #cccccc 43%, #e8e8e8 65%, #cccccc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(29%,#e8e8e8), color-stop(43%,#cccccc), color-stop(65%,#e8e8e8), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(left, #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
background: -o-linear-gradient(left, #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
background: -ms-linear-gradient(left, #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
background: linear-gradient(to right, #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 );

}
.menuzoomout ul li {
margin: 5px auto;
padding: 5px;border:2px solid #cdcdcd;
cursor: pointer;color:#575757;
font-family: century gothic;font-weight: bold;
font-size: 25px;
line-height: 30px;
-webkit-transition: 200ms all;
-moz-transition: 200ms all;
-o-transition: 200ms all;
transition: 200ms all;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px #cdcdcd;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );

-webkit-box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);
}
.menuzoomout ul li:first-of-type {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
}
.menuzoomout ul li:last-of-type {
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.menuzoomout ul li:hover {
padding-left: 20px;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menuzoomout ul li a {color:#575757 !important;}
</style>

Listo Ahora solo queda dar un clic en "Guardar".