Ademas de los icono utilizaremos transiciones, al pasar el mouse sobre cada link mostrara un background azul el que hemos utilizado en tutoriales anteriores.
Primero vamos a crear la estructura del menu con su estilo seguido le agregamos el efecto de transicion y por ultimo los iconos.
HTML
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Menu con iconos</title>
<link rel="stylesheet" href="estilo6.css">
</head>
<body>
<nav>
<ul >
<li>
<a href="#">Inicio</a>
</li>
<li>
<a href="#">Descarga</a>
</li>
<li>
<a href="#">Galeria</a>
</li>
<li>
<a href="#">Musica</a>
</li>
<li>
<a href="#">Videos</a>
</li>
</ul>
</nav>
</body>
</html>
CSS
Como en tutoriales anteriores ire explicando el codigo para su mayor comprension.
Este es nuestro reset le quitamos todos los margenes, padding, que tienen cada uno de los navegadores.
*{margin:0px;
padding:0px;
border:0px;
}
Al body le definimos el tipo de letra verdana de tamaño 15px y que tenga negrita.
body
{
font-family: verdana;
font-size: 15px;
font-weight: bold;
}
A nuestra etiqueta nav unicamente le asignamos un color de fondo.
nav
{
background: #333;
}
A los enlaces que el color de texto sea blanco de tipo block con padding de 15px arriba-abajo y izq-der, le quitamos el interlineado que trae por defecto los enlaces con el text-decoration.
a
{
color: #fff;
display: block;
padding: 15px 15px;
text-decoration: none;
}
Le quitamos cualquier estilo que tenga los ul.
ul
{
list-style:none;
}
Que los li sean de tipo bloque
li
{
display: block;
}
Si asta este momento ya copiaron el codigo html y el css pueden ver que el menu esta verticalmente pues con solo esta linea de codigo css logramos que se ubiquen uno a la para de otro. El margin right de -4px lo quitamos y le agragamos unbackground del color que ustedes quieran notaran que hay espacios entre cada li buen el margin hace que se los quite.
ul li{
display: inline-block;
margin-right: -4px;
}
Aqui estan los tipo de efectos que le podemos agregar a las transiciones, al momento de pasar el mouse sobre los link tambien al texto le agrega una sombra y como ya pudieron notar el efecto que el fondo o background lo muestra de una manera lenta suave.
Si este codigo lo prueban en mozilla, chrome,opera en todos ellos podran ver el tipo de transicion que tiene esto pasa por los prefijos colocado antes de la palatra transition.
-webkit- para chrome
-moz- para mozilla
-o- para opera
/*"linear", "ease-in", "ease-out", "ease-in-out", y "cubic-bezier".*/
ul li a:hover {
background: #4386FA;
text-shadow: 2px 2px 1px #000;
-moz-transition: background ease-in .5s;
-webkit-transition: background ease-in .5s;
-o-transition: background ease-in .5s;
}
No hay comentarios :
Publicar un comentario