Unidad 8. Ejercicio paso a paso: Crear menús básicos (I)

Objetivo

Partiendo de una misma lista con enlaces, vamos a crear dos menús distintos cambiando sólo el CSS.

Puedes utilizar una lista con enlaces a donde quieras, o utilizar la misma que en el sitio de ejemplo del curso.

Guarda la pagina como menus.html. La utilizaremos en el tema siguiente.

Ejercicio 1. Menú horizontal

Vamos a crear un menú, con aspecto de una barra horizontal. Al pasar el cursor por los distintos elementos, estos alternarán el color de texto y fondo.

• Inicio
• Flores
• Nosotros
• Contacto
• Noticias

1. Crea una nueva página de HTML.
2. Escribe el html de la lista con los enlaces, asignándole el id menu1.
3. En la cabecera de la página, crea una etiqueta de estilo: <style type="text/css"> ... </style>.
4. Define el selector ul#menu1.
5. Al selector ul#menu1, quítale los márgenes, padding, y estilo de la lista. Dale también el formato general al texto como aparece a continuación:

    ul#menu1 {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-family: sans-serif;
        font-size: 16px;
        font-weight: bold;
       } 

6. Define el selector ul#menu1 li para los elementos del menú.
7. A los elementos, les daremos flotamiento a la izquierda (float: left;) para que aparezcan en la misma línea, un alto específico (height: 2.5em), y el mismo alto de línea (line-height: 2.5em;) para que se centre verticalmente, además de los estilos para conseguir el diseño que buscamos. Introduce los estilos:

     ul#menu1 li {
   	background-color: #AF7051;
   	float: left;
   	height:2.5em;
   	line-height:2.5em;
   	border-color: #AF7051;
   	border-style: solid;
   	border-width: 3px 0;
     }

8. Como todo el texto de los elementos son enlaces, será en el selector ul#menu1 a en el que definamos el estilo del texto. Declara el selector, quítale el subrayado y dale el color al texto que se muestra a continuación. Además, para que llenen a todo el elemento de lista, le hemos dado display: block y un alto del 100%:

   ul#menu1 a {
   	color: #F0D7B5;
   	text-decoration:none; 
   	padding: 0 20px; 
   	display: block;
   	height: 100%;
   }

   .
9. Para cambiar el color del fondo al posar el ratón, utilizaremos el selector ul#menu1 li:hover, y para cambiar el color del texto, el selector ul#menu1 li:hover a. Declara los siguientes estilos:

      #menu1 li:hover {
          background-color: #F0D7B5;
        }
      #menu1 li:hover a {
          color: #AF7051;
        }

10. Guarda la página y pruébala en el navegador. Utilizaremos esta página en el siguiente ejercicio.
11. Observa, que al declarar los tamaños en em, si cambias el tamaño de la fuente, cambia el tamaño de los elementos manteniendo la proporción.

Hay otro ejercicio en la página siguiente.