Los estilos css del menú desplegable

Este menú desplegable se basa en una hoja de estilos llamada estilo-menu-desplegable.css y es el primero de los archivos de la lista anterior. Como ya sabes, para que una página web pueda leer una hoja de estilos hay que colcocar dentro del head una línea de código. Te acuerdas de la que pusimos al principio para la hoja de estilos estilo-general.css? Pues ahora hemos de colocar otra idéntica (pero con este otro nombre) seguida de aquella primera.

Trata de hacerlo tú mismo sin mirar más pistas. Deberias saber hacerlo! je je je. El código de la cabecera (head) de tu plantilla.html ha de quedar así:

.....
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css"          type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
</head>
.....

Con esta línea conseguimos por tanto que la plantilla lea los estilos de la hoja de estilos del menú. Por suerte ya está terminada de modo que no vamos a entrar a analizarla, oki? Lo importante es que funcione! je je je.

Asociando los scripts de menú desplegable

Algunos menús desplegables funcionan tan solo con "trucos" hechos con css, sin más, pero este menú desplegable que os presento está hecho con scripts. Como aún no los hemos estudiado no os lo explico e iremos directamente a colocarlos en la web.

Igual que el código Css, el código de los scripts puede o bien escribirse directamente dentro del html de la página o bien guardarlo todo dentro de un archivo y luego hacerle una llamada desde el head de la web (igual que se hace con la hoja de estilos) que es lo que vamos a hacer.

Todo el código script que necesita este menú se va a guardar en tres archivos diferentes. En principio a estos archivos se les suele poner extensión .js pero como algunos vamos a tenerlos que editar para retocarlos les vamos a poner extensión .txt para que nos sea más fácil abrirlos con el block de notas (tranquilo, ya llevan la extensión .txt).

Abre de nuevo la plantilla.html y coloca estas nuevas línea debajo de la que hemos escrito antes:

.....
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css"          type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt"          type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt"   type="text/javascript"></script>
</head>
.....

Lo que hacen realmente estas líneas es insertar en su lugar todo el contenido de los archivos txt. Otro modo habria sido colocar el contenido directamente, pero de este modo ganamos dos cosas. Por un lado evitamos tener demasiado contenido en las páginas html y por otro lado evitamos tener que reformar todas las páginas html de la web cada vez que queremos retocar algo de ese código. Para cualquier cambio solo necesitamos de este modo retocar el archivo txt y no todas las páginas de la web. Todo un invento, no?

Ya tenemos la hoja de estilos y las hojas de scripts relacionadas. Ahora vamos al siguiente paso.