Seguiemos con el tutoria del menu con icono esta vez haremos unos cambios a nuestro menu.
Cambiaremos el color de nuestro nav, tambien el color cuando pasemos nuestro mouse sobre el contenedo del enlace y la imagen.
Lo que haremos primero es cambiar las carecteristicas de los enlaces
a
{
color: #fff;
text-decoration: none;
}
ahora cambiaremos el color a nuestro nav
nav
{
background: #06AFE4;
}
Aqui unicamente quitaremos el margen -4 que tenia.
ul li
{
display: inline-block;
}
Ahora la estructura de nuestro index va hacer diferente aqui se las dejos
he agregado un div contenedor y dentro de este hay otro div y el enlace cada uno tiene un ID y una CLASE que lo va ha identificar para realizar nuestro diseño
El ID IMG lo ocuparemos para mandar a llamar a las imagenes como son distintas images al id le agregaremos img1... y asi consecutivo asta donde lo necesitemos.
La clase llamada igual la utilizamos para darle el tamaño exacto a las imagenes la ubicamos horizontalmente junto con el enlace y dandole tambien una separacion de 10px, el vertical-align middle es para centrar el enlace y la imagen.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Menu desplegable</title>
<link rel="stylesheet" href="estilo6.css">
</head>
<body>
<nav>
<nav>
<ul >
<li>
<div id="contenedorimg">
<div id="img1" class="igual"></div>
<a href="#">Inicio</a>
</div>
</li>
<li>
<div id="contenedorimg">
<div id="img2" class="igual"></div>
<a href="#">Descarga</a>
</div>
</li>
<li>
<div id="contenedorimg">
<div id="img3" class="igual"></div>
<a href="#">Galeria</a>
</div>
</li>
<li>
<div id="contenedorimg">
<div id="img4" class="igual"></div>
<a href="#">Musica</a>
</div>
</li>
<li>
<div id="contenedorimg">
<div id="img5" class="igual"></div>
<a href="#">Videos</a>
</div>
</li>
</ul>
</nav>
</nav>
</body>
</html>
Ahora vamos con lo nuevo agregado al css
div con id contenedorimg le damos un tamaño de 10px de arriba hacia abajo y de ancho 20px.
#contenedorimg
{
padding: 10px 20px;
}
Al momento de hacer hover con el mouse le dara un color como anaranjado, al texto le aplicamos una sombra
#contenedorimg:hover
{
background: #FF6600;
text-shadow: 2px 2px 1px #000;
-moz-transition: background ease-in .5s;
-webkit-transition: background ease-in .5s;
}
La clase igual la alineamos horizontalmente con una altura y anchura de 24px que seria el tamaño exacto de los iconos.
.igual
{
display: inline-block;
height:24px;
vertical-align: middle;
margin-right: 10px;
width:24px;
}
#img1
{
background-image: url(img/home.png);
}
#img2
{
background-image: url(img/descarga.png);
}
#img3
{
background-image: url(img/galeria.png);
}
#img4
{
background-image: url(img/musica.png);
}
#img5
{
background-image: url(img/video.png);
}
