Lo primero es lo primero: creamos el menú con 1 <div>, 1 <ul> y varios <li>
Simbologia
#: Url del enlace
-*-: Nombre del enlace
Cita: <div id="menu">
<ul>
<li><a href=" #"> -*-</a></li>
<li><a href=" #"> -*-</a></li>
<li><a href=" #"> -*-</a></li>
<li><a href=" #"> -*-</a></li>
</ul>
</div>
Le vamos a dar color y forma a esto. Agregando estilo al #menu:
Cita: #menu ul {
padding: 0px;
margin: 0px;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
y el punto clave: horizontalizando a través de display: inline;
Código: #menu ul li {
display: inline;
}
Hasta aquí, nada fuera de lo común. Nos falta agregar algo bonito para que se vea bien en un rollover, algo simple. Un cambio de color:
Cita: #menu ul li a:link, #menu ul li a:visited {
background-color: #333;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #F30;
background-color: #CCC;
height: 20px
}
Ver resultado parcial>>
Nuestro menú básico horizontal está hecho y funciona de maravilla. Ahora agreguémosle un rollover con imagen de fondo ( background-image en vez de background-color) y que las instancias estén en un mismo gif:
Gif del a:link y a:hover
Url de esta imagen Cita: http://www.csslab.cl/ejemplos/fondo_menu.gif
Solamente reemplazaremos donde antes habíamos seteado los parámetros relacionados con el fondo (background-image):
Cita: #menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
}
Ver resultado Final>>
El código CSS completo es :
Cita:
<-Menu wedmasterayuda->
body {
padding: 0px;
margin: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#menu ul {
padding: 0px;
margin: 0px;
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
background-color: #333;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
#menu ul li {
display: inline;
}
#menu ul li a:link, #menu ul li a:visited {
background-image: url("fondo_menu.gif");
background-repeat: repeat;
background-position: 0 0;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #900;
background-position: 0 -30px;
background-color: #CCC;
height: 20px;
} |
