Cómo colocar el menú horizontal en enlace en la web

Aunque más adelante veremos como crear menús más complicados en la parte superior, vamos a comenzar por uno sencillo para no asustarnos e ir cogiendo base.

Antes de crear tu propia web es muy importante que tengas claro un par de cosas. Lo primero es saber de qué vas a hablar en la web y lo sengundo es tener más o menos claro cómo vas a estructurar esos contenidos. Es decir, desglosar lo que quieres contar en secciones y subsecciones. De ese modo sabrás qué secciones vas a colocar en el menú superior.

A la hora de crear la web, colocarías las secciones en el menú horizontal superior y al hacer clic sobre cada una de esas secciones, se abriría la página principal de esa sección mostrando en el menú vertical lateral (el de la izquierda que ya hemos colocado en este ejemplo) las subsecciones.

Por ejemplo, digamos que voy a crear una web de un grupo de música. Las secciones que se me ocurren son, "Presentación", "Historia del grupo", "Trabajos musicales", "Conciertos" y "Zona de Descarga". Luego, cada una de esas secciones principales pueden desglosarse o dividirse en otras subsecciones. Por ejemplo, en la sección "Trabajos Musicales" podrían aparecer las subsecciones "Disco 1", "Disco 2"...."Disco 9". La sección descargas podría dividir se "Canciones", "Videos", "Poster y Carteles", "Letras"....

Para que entendais la idea, las secciones principales irian en el menú horizontal que vamos a aprender a crear ahora mismo, mientras que las subsecciones irian en el menú lateral.

Creando el Menú Horizontal

El menú horizontal lo vamos a colocar en la capa que hemos llamado navegacion. Es esa capa gris horizontal que hay debajo del logotipo. Así que, como imaginarás, tendremos que retocar un poco el html de la plantilla y luego colocar las propiedades apropiadas en la hoja de estilo para la capa navegacion.

Colocando el Html para el menú

Como siempre, abre la plantilla.html con tu Html-Kit. Ve a la vista de código y encontrarás la línea de la capa navegacion:

<div id="navegacion">Barra de Navegación</div>

Borraremos las palabras Barra de Navegación y las sustituiremos por una lista, en la que cada elemento será un enlace del menú. Las listas en Html empiezan con un <ul> y terminan con un </ul>. Dentro de una lista cada elemento de la misma empieza por un <li> y termina con un </li>, te acuerdas?

La lista completa con los enlaces sería algo así:

<ul>
  <li>Sección 1</li>
  <li>Sección 2</li>
  <li>Sección 3</li>
  <li>Sección 4</li>
</ul>

Pues ese es el código Html que tenemos que poner dentro de la capa navegación, eliminando claro el texto que tenía de "Barra de Navegación" quedando al final así:

<div id="navegacion">
  <ul>
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
    <li>Sección 4</li>
  </ul>
</div>

Cuando hagas tus experimentos y quieras añadir o eliminar enlaces en el menú horizontal, solo tendrás que irte a la plantilla.html y añadir o eliminar líneas <li> Sección X</li> a este trozo de código de arriba.

Si haces vista previa de la plantilla verás algo así. Sorpresa? Puedes ver que los elementos no aparecen uno al lado de otro sino un debajo del otro. Esto es normal, pues las listas son así. Pero nosotros vamos a cambiar eso con solo poner la palabra mágica adecuada en la hoja de estilos, que para eso está.

Abre el archivo estilo.general.css con el Html-Kit y vamos a modificar la línea de la capa navegacion, que hasta este momento era así:

#navegacion {background-color: gray ; border: black 1px solid }

Para empezar vamos a intentar que todos los elementos de este menu de navegación aparezcan uno al lado de otro, en línea. Para ello usaremos la propiedad float, que hace que los elementos floten y se desplacen hacia el lado que queramos. Si a definimos que todos los elementos floten hacia la izquierda, el primero de ellos se irá hacia la izquierda, el segundo igual quedando al lado del anterior y así con todos los demas. Vamos a probarlo a ver qué pasa.

Al querer ponerle float:left a todos los elementos de la lista, parece lógico pensar que en la hoja de estilo hay que ponérselo a los li que haya dentro de la capa navegacion (hay que evitar que los li de la otra capa del menú lateral tomen esa propiedad), así que añadiriamos esta otra línea en la hoja estilo-general.css:

#navegacion li {float:left}

Haciendo vista previa vemos este resultado en la plantilla. Como era de esperar... vemos un auténtico churro, pero vamos a terminar de arreglarlo. Normalmente, si le damos una altura concreta a la capa, se arregla todo. Vamos a colocarle height:20px a la capa navegacion (no a #navegacion li {...., sino a #navegacion {.... ) y veamos que pasa:

#navegacion {background-color:gray; border:black 1px solid; height:20px;}

Ahora sí que sale realmente como queremos. Nos faltan aún algunas cosillas, como eliminar el punto negro de la izquierda de cada elemento del menú lateral y como ponerle unos margenes adecuados para separarlos un poco.

En la página siguiente aprenderemos a mejorar aún más el aspecto de este menú horizontal. Verás que bien nos va a quedar .