Crear un menú con lista

El menú con lista es maleable con los estilos CSS y podemos modificar la apariencia de nuestros botones de manera sencilla y muy rápida.

Se utiliza las listas desordenadas <ul> se caracteriza por no tener ningún tipo de numeración.

<ul>
<li>botón</li>
<li>botón</li>
<li>botón</li>
</ul>
—————————–
Se visualiza de este modo
• botón
• botón
• botón

Utilizando el CSS vamos a modificar la apariencia de la lista para lograr este menú:

Para este ejemplo vamos a ncesitar los siguiente archivos

  1. Crear la lista con el nombre de los botones y los vínculos correspondientes. Es importante que las listas tengan sus vínculos.
    <ul>
    <li><a href=»index.html»>Inicio</a></li>
    <li><a href=»quienes.html»>Quienes Somos</a></li>
    <li><a href=»servicios.html»>Servicios</a></li>
    <li><a href=»contacto.html»>Contáctenos</a></li>
    </ul>
  2. Para crear el menú se van a crear tres estilos uno para la etiqueta ul otro para el compuesto li a y finalmente para el evento li a:hover. Primero se crea el estilo para la etiqueta <ul> para darle las características generales al menú.
  3. En la categoría fondo editar las opciones que se muestran. En este ejemplo el fondo es una imagen que solo debe repetirse horizontalmente. Esto es opcional depende del diseño del menú.
  4. Determinar la altura, los márgenes y los espacios internos del la etiqueta. El padding y el margin se colocan en cero para eliminar el espacio predeterminado que crea el html.
  5. Eliminar los guiones del menú.
  6. Hasta el momento nuestro menú se visualiza de este modo:

    El código del css es el siguiente:

    ul {
    	margin: 0px;
    	list-style-type: none;
    	list-style-position: inside;
    	background-image: url(imagenes/menu02.gif);
    	background-repeat: repeat-x;
    	padding: 0px;
    	height: 30px;
    }
  7. Creo el estilo compuesto li a
  8. Cambiar el tamaño, color y eliminar el subrayado del enlace
  9. Para utilizar guiones personalizados se debe colocar la imagen del guión en el fondo del estilo. Si el diseño no tiene guiones no es necesario modificar estas opciones.
  10. La etiqueta li a se debe convertir en un bloque para que pueda aceptar las propiedades de altura y float. Este punto es importante de realizar.
  11. En la categoría de cuadro se coloca la altura y los espacios internos que se colocan en el botón (padding si desea conocer la diferencia entre el padding y el margin vea este enlace). La opción de float es para que los botones se pongan de manera horizontal.
  12. La categoría de borde es opcional, nos ayuda a crear una línea al costado de cada botón.
    El código del css es el siguiente:

    li a{
    	display: block;
    	width: 110px;
    	height: 20px;
    	padding-top: 5px;
    	color: #999;
    	text-decoration: none;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #CCC;
    }
  13. Crear el estilo para  la apariencia del evento hover. Esto permite cambiar la apariencia del botón cuando el usuario se coloca sobre el boton:
  14. Crear el estilo li a:hover como compuesto.
  15. Solo se modifica las características que se deasean modificar. En este ejemplo se desea cambiar el fondo del botón por lo tanto solo se modifica la categoría del fondo.

    El códgio cssdel estilo es el siguiente:

    li a:hover {
    	background-image: url(imagenes/menu02a.gif);
    	background-repeat: repeat-x;
    	background-position: 0px 0px;
    }