A pesar del nombre, no tiene nada que ver con un restaurant. Lo que les voy a tratar de enseñar ahora, es como hacer un menu usando hojas de estilo CSS y listas.

Esta debe ser, en la actualidad, la forma mas comun de hacer los menues para las paginas web. Esto se debe a que solo necesitamos nas pocas lineas de codigo y un buen manejo de las hojas de estilo CSS.

Vamos a ncesitar 2 archivos, uno sera donde pondremos los estilos, que se llamara estilo.css y el segundo, una pagina en html donde colocaremos los enlaces del menu, a este archivo lo llamaremos menu.htm

Empecemos por el segundo, ya que es mas facil:

<div id="menu">
<ul>
<li><a href="#">QUIENES SOMOS</a></li>
<li><a href="#">CONTACTO</a></li>
<li><a href="#">SERVICIOS </a></li>  
</ul>
</div>

Estas tres son las opciones mas comunes para un menu, claro que le puden poner lo que desean y al mismo tiempo, reemplazar los # por las direcciones reales de las paginas. No se necesita demasiada explicacion, es simplemente una lista desordenada, dentro de los tags ul pondremos tantos links o elementos como necesitemos. Todo esto dentro de la capa menu, que explicaremos a continuacion en la hoja de estilo.

Ahora si, veremos lo mas interesante del ejemplo, el archivo estilo.css que contendra la informacion necesaria para nuesto menu.

#menu
{width:600px;
float:left;
text-align:center;
font-size:14px;
font-weight:bold;
}
#menu ul
{list-style-type:none;

}
#menu li
{float:left;
margin-top:5px;
}
#menu li a {
background-color:#000000;
border:#FFFFFF thin solid;
margin-right:3px;
float:left;
color:#FFFFFF;
width:185px;
height:40px;
}
#menu li a:hover
{
border-bottom:#FFFFFF medium solid;
}

Lo  primero que hacemos es crear la capa menu, la cual estamos llamando desde el archivo menu.htm,  esta capa es la que se encarga de darle la "forma" a nuestro menu. Como veran, estamos usando varias "capas" menu, en realidad lo que estamos haciendo, es crear un estilo para que cada etiqueta que se encuentre dentro de la capa.

En la primera (#menu) estamos creando el espacio dentro del cual estan contenidos nuestros enlaces, no usamos ningun color de fondo para que no reemplace el fondo de nuestra web, aunque, si asi lo quieren, le podran agregar en esa parte un fondo, tampoco usamos un color de texto, igual que lo anterior, eso depende de cada uno, pero de esta manera mantenemos los colores uniformes de la web.

Le damos un ancho de 600 pixeles (pueden darle el valor que desean) un tamaño de texto de 14 pixeles, en negrita, el texto estara centrado y toda la capa "flotara" hacia la izquierda. Esto en realidad significa que la capa estara alineada a la izquierda.

Luego trabajamos con las listas, #menu ul, en donde solo indicamos que no queremos ningun estilo de lista (es decir que no ponga ningun "bullet" o adorno en las lineas) Seguido, le damos un estilo a los elementos de la lista, #menu li, lo alineamos a la izquierda mediante un float y le damos un margen superior de 5 pixeles, solo de adorno. Si no lo alineamos a la izquierda, los elementos se mostraran uno debajo del otro y no saldra el efecto deseado.

Ahora viene el trabajo en serio, el #menu li a, esto se refiere a los elementos de la lista que tienen un enlace, hagan la prueba colocando elementos con enlace y elementos sin enlace para que entiendan a que me refiero. A cada elemento le daremos un color de fondo negro (pueden usar el que quieran o una imagen), un color de texto blanco. Especificamos un ancho de 185 pixeles y un alto de 40, esto es para que todos los elementos esten de manera uniforme y no se vea uno mas grande que el otro.

Por ultimo le damos una separacion a la derecha de 3 pixeles, para que queden todos pegados y un borde delgado, solido y blanco. Por ultimo, el #menu li a:hover se refiere cuendo pasamos el mouse por encima del enlace, esto hara (segun este estilo) que el borde inferior se ensanche un poco ya que le estamos dando un tamaño medio de grosor.

Este es un ejemplo sencillo para que entiendan y aprendan como se hace un menu mediante hojas de estilo. Ustedes tomaran los colores que crean convenientes, o si desean podran usar imagenes como fondo. Creo que el ejemplo esta claro, pero si tienen dudas, pueden consultar sin problemas. Insisto, tal vez no sea el diseño mas bonito, pero enseña como hacer el menu con CSS y listas.

Salu2

Agrega a:

Hide Sites