Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Menú vertical CSS3 con rotación al hacer hover


Menú vertical con rotación CSS3


En está entrada veremos un menú vertical realizado con CSS3 que al hacer hover o al pasar el cursor por encima del menú, tiene un efecto de rotación. Es un menú bastante bonito y sencillo a la misma vez, que pueden usarlo o utilizarlo para añadir enlaces o etiquetas en vuestro blog de Blogger, por ejemplo. Es indicado añadir dicho menú en la sidebar o columna lateral o también en el footer, mediante la implantación que nos ofrece Blogger: Añadir un Gadget y luego HTML & Javascript, así de fácil. A continuación veremos el menú en modo de ejemplo para que podáis ver el efecto y el diseño del menú, si os gusta, ya sabéis, agregarlo en vuestro blog, vamos allá con el ejemplo en vivo y en directo, lo puedes ver seguidamente:





Ahora vamos ha añadir el código mediante un gadget


<style type="text/css">
/* Css3 menú vertical */
#css3menu {  }
#css3menu ul { 
list-style: none; 
}
#css3menu ul li { 
font-family: Georgia, serif, Times; /* Tipo de fuente */
font-size: 20px; /* Tamaño de la fuente */
text-transform: uppercase; /* Fuente en mayúsculas */
}
#css3menu ul li a {
 display:block; 
 width: 300px; /* Ancho del menú */
 height: 34px; /* Alto del menú */
 background-color: #555; /* Color del fondo */
 border-left: 5px solid #222; /* Bordes */
 border-right: 5px solid #222;
 border-top: 5px solid #222; 
 border-bottom: 5px solid #222;
 padding-left: 10px;
 text-decoration: none; 
 color: #bfe1f1; /* Color de la fuente */
}
#css3menu ul li a:hover {  
-moz-transform:rotate(-5deg); /* Efecto rotación */
-moz-box-shadow:10px 10px 20px #000000; /* Sombras */
-webkit-transform:rotate(-5deg); /* Efecto rotación */
-webkit-box-shadow:10px 10px 20px #000000; /* Sombras */
 transform:rotate(-5deg); /* Efecto rotación */
 box-shadow:10px 10px 20px #000000; /* Sombras */
}
</style>


<div id="css3menu">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Sobre mí</a></li>
      <li><a href="#">Contacto</a></li>
   </ul>
</div>

Por último sólo te queda remplazar las # pertinentes, por el enlace o link que desees, también cambia el nombre de cada enlace por el tuyo en el código HTML de la parte inferior del código anterior. Y además he resaltado con texto en el código CSS, los cambios que puedes realizar, para personalizar el menú a tu gusto.



Aizum Blog, lunes, febrero 17, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9