Cómo instalar un menú desplegable en una página web

Se que esta será la lección estrella, así que trataré de explicarlo bien porque para principiantes puede resultar un poco complicado. pero bien explicado seguro que lo consigues. Se trata de insertar un menú desplegable que colocaremos donde ahora tenemos el menú horizontal, debajo del logotipo.

Por si alguien no sabe a lo que me refiero lo explico un poco. Se trata de un menú horizontal en el que cuando colocas el puntero de ratón sobre una de sus secciones, esta se abre mostrando el resto de subsecciones. Es un recurso muy bueno pues permite tener multitud de enlaces en una página web sin necesidad de tenerlos todos visibles continuamente, lo que nos ahorra espacio en la web para otras cosas. Además, resulta bastante elegante.

Si sigues estas páginas conseguirás colocar en tu plantilla este menú desplegable.

Conseguir los archivos necesarios

Para instalar un menú desplegable como el que vamos a ver necesitaremos unos cuantos archivos que contienen el código necesario para definir las distintas secciones, el estilo css que tendrá, que definan el movimiento de desplegue del menú etc. No te preocupes porque en esta web encontrarás todos ellos. Despues de descargarlos y guardarlos en la carpeta que te indique, tendremos que hacer unos retoques para personalizarlos un poco a nuestro gusto. Cuando termines la lección y tengas tu menú desplegable en tu página web de ejemplo sabrás sin problemas colocarlo más tarde en tu propia página web, así que hazme caso en cada uno de los pasos que te muestro y síguelos al pie de la letra para no perderte. Más tarde puedes hacer tus propios experimentos, pero por ahora hazme caso y sigue las instrucciones tal cual te las muestro, oki?

Los archivos necesarios son estos. Descárgalos y guardalos en el lugar donde se indica en cada uno de ellos:

estilo-menu-desplegable.css (en la raiz de tu web)
no-tocar.txt (en la raiz de tu web)
definir-menus.txt (en la raiz de tu web)
numero-de-menus.txt (en la raiz de tu web)
blanco.png (en la carpeta "objetos")
gris.png (en la carpeta "objetos")
punto.gif (en la carpeta "objetos")
submenu-abierto.gif (en la carpeta "objetos")
submenu-cerrado.gif (en la carpeta "objetos")
espaciador.gif (en la carpeta "objetos")
fondo-activo.gif (en la carpeta "objetos")
fondo-no-activo.gif (en la carpeta "objetos")

Te los dejo todos comprimidos en dos archivo zip. En el primero están los archivos que has de pegar en la carpeta objetos y en el segundo los que tienes que colocar directamente en tu carpeta raiz.

Bien, una vez tienes todos esos archivos guardados en las carpetas correspondientes seguimos con las instrucciones. Recuerda dejarles los mismos nombres que yo he colocado, y cada uno en su lugar (en su carpeta) o no funcionará bien este invento!