Hace tiempo que hablamos de los menús con CSS, hoy vamos a retomar el tema para realizar paso a paso un menú con CSS y listas. Comenzaremos con un menú vertical y terminaremos realizando el mismo menú horizontal con CSS.
1. Generando el código HTML necesario
Supongo que utilizas Dreamweaver para realizar este ejercicio, abrimos un nuevo fichero html en blanco
[singlepic id=143 w=480 h=360 float=]Guardamos el fichero con el nombre de menu-css.html. Ahora generamos el código HMTL necesario para crear nuestro menú. Primero crearemos un <div> que llamaremos menu, tendremos el siguiente código:
<div id="menu">en esta parte irá nuestro menú</div>
El segundo paso es crear una lista dentro del div creado anteriormente teniendo fianlmente el siguiente código:
<div id="menu"> <ul> <li>Inicio</li> <li>Empresa</li> <li>Productos</li> <li>Servicios</li> <li>Contactar</li> </ul> </div>
Si comprobamos en el navegador tenemos esta imagen: [singlepic id=144 w=480 h=360 float=] Para completar el código HTML necesario tengo que crear los enlaces en cada elemento li del código anterior. Como resultado tendré:
<div id="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Empresa</a></li> <li><a href="#">Productos</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contactar</a></li> </ul> </div>
Si comprobamos en el navegador tenemos esta imagen:
[singlepic id=150 w=480 h=360 float=]Ahora solo nos queda dar estilos con las CSS para completar el menú
2. Generando estilos y colores con las CSS
Vamos a concrear que tipo de estilos queremos para nuestro menú: anchura del menú, colores, fondos, tamaño de fuente, tipo de fuente…
Comenzamos a generar el código necesario, lo primero es crear los estilos para div que hemos llamado menu, busco poner un borde al menú con una anchuro de 150px:
#menu {
width: 150px; /* Ancho menú */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px; /* Borde */
border-right-width: 1px; /* Borde */
border-bottom-width: 0; /* Sin Borde */
border-left-width: 1px; /* Borde */
border-top-style: solid; /* Borde sólido */
border-right-style: solid; /* Borde sólido */
border-bottom-style: solid; /* Borde sólido */
border-left-style: solid; /* Borde sólido */
border-top-color: #ACCFE8; /* Color Borde */
border-right-color: #ACCFE8; /* Color Borde */
border-bottom-color: #ACCFE8; /* Color Borde */
border-left-color: #ACCFE8; /* Color Borde */
}
Si condensamos el código podemos tener: (recordar que visualmente en el navegado es lo mismo que el código de arriba, solamente es más corto)
#menu {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 150px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
}
Con este código visto desde el navegador hemos conseguido la siguiente imagen:
[singlepic id=145 w=480 h=360 float=]Vemos un cuadrado de color azul que no está dibujado del borde por la parte de abajo, ya veremos mas adelante cual es el motivo de no dibujar el borde de la parte de abajo.
El siguiente paso es dar estilo a la lista. Lo primero es quitar el puntito de la lista, quitar el circulito negro, esto lo hacemos añadiendo el siguiente código a los estilos:
#menu ul li {
list-style-type: none;
}
Visualizamos el resultado:
[singlepic id=146 w=480 h=360 float=]Para que todo quede bien centrado y se vea de igual forma en todos los navegadores pondremos a cero el margin y el padding de la lista añadiendo este código:
#menu ul {
margin: 0;
padding: 0;
}
Como resultado tendremos esta imagen:
[singlepic id=147 w=480 h=360 float=]Pintamos los botones de forma individual. Cada elemento de la lista (cada botón) lo separamos del siguiente con una raya horizontal. Para ello utilizo el borde inferior y lo aplico a cada li de la lista. ¿Recordais que habiamos dejado sin pinta el borde inferior del div? ahora al poner un borde inferior a cada elemente li el último coinciderá con el del div y dará la sensación de estar cerrado. Añadiremos el siguiente código
#menu li {
border-bottom: 1px solid #ACCFE8;
}
No es necesario en el código añadir el resto de bordes con valor cero, solamente pondré el que quiero modificar y como resultado tendremos esta imagen
[singlepic id=148 w=480 h=360 float=]Para finalizar nos queda que cambie de color el fondo cuando pasamos el ratón por encima del botón y separar un poco el texto del borde. Esto lo hacemos dando los estilos al enlace, la etiqueta de enlace es la a. Añadimos el siguiente código:
#menu a {
text-decoration: none;
color: #3366CC; /* Color texto */
background: #F0F7FC; /* Color Fondo */
display: block;
padding-top: 3px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
width: 138px; /* Ancho del botón */
}
[singlepic id=149 w=480 h=360 float=]
Aquí recordar que la forma utilizada para que todos los botones tengan el mismo ancho he utilizado el código:
display: block;
Y finalmente cambiamos el color al pasar con el ratón sobre el botón con el siguiente código:
#menu a:hover {
background: #DBEBF6;
}
3. Comprobar el resultado del menú vertical
Ver resultado del menú vertical funcionando. Tabmien podemos centrar horizontalmente el menú.
Para ver el menú horizontal, y recuerda que al ver el código fuente tienes los comentarios de como se ha realizado.
4. Resumen
Código HTML dentro de la etiqueta <body></body>
<div id="menu"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Empresa</a></li> <li><a href="#">Productos</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contactar</a></li> </ul> </div>
Código CSS, dentro de la etiqueta <style></style>
#menu {
width: 150px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ACCFE8;
border-right-color: #ACCFE8;
border-bottom-color: #ACCFE8;
border-left-color: #ACCFE8;
margin-right: auto;
margin-left: auto;
}
#menu ul li {
list-style-type: none;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
border-bottom: 1px solid #ACCFE8;
}
#menu a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
width: 138px;
padding-top: 3px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
}
#menu a:hover {
background: #DBEBF6;
}
