CODIGO: <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>
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.
