MENÚ VERTICAL PARA LA SIDEBAR DE NUESTRO BLOG CON HOVER ZOOM-OUT

By Blogs Famag - domingo, agosto 18, 2019

MENÚ VERTICAL PARA LA SIDEBAR DE NUESTRO BLOG CON HOVER ZOOM-OUT .

Las posibilidades del CSS3 nos permiten hoy en día hacer diseños sin utilizar ningún tipo de imagen y javascript.

Es el caso del menú que os presento hoy, y que lo he realizado íntegramente a base de código de estilos.

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

Para añadirlo a vuestra página, tan solo tenéis que copiar el código de abajo y pegarlo donde queráis mostrarlo.

Sustituid lo que está escrito en color rojo por las URL y el texto que queréis poner.

Si queréis añadir más enlaces, ponéis la línea <li><a href="Dirección URL">TEXTO ENLACE</a></li> tantas veces como deseéis.

Si queréis verlo en acción podéis ir mi probador de códigos copiar el código

y pegadlo en el probador y lo veréis tal como es:

<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>

Data de la Publicación;18-08-2019

Fuente; redeando

Publicado por;