Menu vertical con hover zoom-out

2 comentaron

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.






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