Tweet
Este menú realizado con css3 permite dar un toque diferente a este segmento social y hacerlo mas atractivo, veamos lo sencillo que es.
Ver – Descargar
Vamos a realizar primero el documento, creamos lo básico, lo que define nuestro archivo y luego el elemento que creara el menú el NAV.
<html lang=”es”>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Menu social con efecto Hover</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body>
<nav id="menu"> <ul> <li>
<a href="#"><img src="img/facebook.png" alt=""></a>
<h2>Facebook</h2>
</li>
<li>
<a href="#"><img src="img/twitter.png" alt=""></a>
<h2>Twitter</h2>
</li>
<li>
<a href="#"><img src="img/google+.png" alt=""></a>
<h2>Google +</h2>
</li>
<li>
<a href="#"><img src="img/rss.png" alt=""></a>
<h2>Rss</h2>
</li>
<ul>
</div> </body> </html>
Como vemos creamos un sencillo documento con un elemento nav con un id=menu.
Bien ahora que tenemos el documento vamos a crear el style, donde como es conocido definiremos los estilos y surge la magia.
Definimos primero los estilos generales del elemento nav.
#menu{
background-color: #c3c3c3; border-radius: 10px;
margin-left:20%; width: 20%;
}
Hasta el momento vamos así.
Definimos estilos generales para los elementos li, los colocamos en forma horizontal con la propiedad Display.
#menu ul li{ color:transparent; display:inline-block; margin-top: 40px;
-webkit-transition: all 0.8s linear; -moz-transition:padding 0.8s ease-out; -o-transition:padding 0.8s ease-out;
}
#menu li img{
padding: 0 10px;
}
#menu li h2{
text-align: center;
font-family: Helvetica;
font-size: 1em;
}
Acabamos de definir los estilos para cada elemento li, y ademas para los img y h2 que se encuentren anidados a este elemento. Ahora vamos a dar el toque final colocando la propiedad :hover.
#menu li:hover{
color:navy; padding-right: 20px;
}
Sencillamente lo que hemos hecho es cambiar el color de texto dentro de los Li, esto para dar color a el, ya que al definir lo habiamos colocado transparent. También un padding-right para que cuando el mouse se pose encima del elemento haga un espacio a la derecha de 20px.
Por ultimo algo diferente podemos hacerlo con la propiedad :not(:hover) que lo hace es que cuando el mouse este encima de una de las imágenes las otras van a tomar un estado diferente. Esta propiedad se la colocamos a las img dentro del Li.
#menu :hover img:not(:hover){ -webkit-filter: blur(2px) grayscale(1);
-moz-filter: blur(2px) grayscale(1);
-o-filter: blur(2px) grayscale(1); }
Para explicarlo lo que hacemos es cuando el mouse este encima de una imagen a las otras les aplicamos un filtro Blur de 2px y convertimos todo a escala de grises.
