Lección 24. Menú Desplegable

Descargaros este material y descomprimirlo en la carpeta principal, junto con el index

Realmente estos materiales me los baje del curso que yo realice en CCTW, la verdad que aprendí mucho ahí, no dejéis de visitarlo, merece la pena, hoy intente buscarlos en ese mismo sitio para pasaros directos a esa página pero modificaron el curso, así que os paso lo que me dieron en su día

Tenéis en el los siguientes archivos que vamos a ir abriendo y modificando para personalizarlos a nuestro gusto

Abrimos el archivo numero-de-menus.txt con el Dream y veremos esto escrito en él

Como nosotros tenemos cuatro enlaces en el menú de navegación, copiamos y pegamos las dos frases de las líneas 7 y 8 y solo cambiamos los números, para tener desplegable 1, 2, 3 y 4. (fijaros que no dejamos espacios ninguno) y guardamos este archivo, aquí no tocamos nada más

Abrimos ahora nuestra plantilla

Para que nuestra plantilla reconozca todos estos archivos en primer lugar enlazamos la nueva hoja de estilos para el menú desplegable

Buscamos esa hoja de estilos y aceptamos las dos ventanas

Ahora copiamos a continuación estas frases y las pegamos en nuestro head

También en nuestra plantilla, ponemos donde pone body lo siguiente:

Y donde tenemos nuestro menú de navegación añadimos esto justo donde están los enlaces y añadimos detrás de "a" lo siguiente: id="desplegable1, 2 3 4" fijaros en la captura

Y por último, al final de la página justo antes del body pegamos esto

Si vamos a vista previa tendremos esto, ahora solo funciona el desplegable 1, y cuando pasáis el ratón por la sección 2 se despliega un submenú

Ahora abrimos el archivo definir-menus.txt

Ya la personalizaremos, primero que nos funcione, pero antes vamos a fijarnos donde tenemos esos menús escritos para poder modificarlos a nuestro gusto. al desplegable 1 lo identificamos con id="desplegable1" por lo tanto si comparamos vemos donde podemos modificar los textos que nos aparecen, y donde pone ruta pondremos después los enlaces a las páginas correspondientes

Para ampliar nuestro desplegable solo seria cuestión de copiar desde la fila 5 hasta la 12 y pegarlo a continuación, solo modificando lo adecuado , por ejemplo

Si comparamos fijaros lo que cambié, el submenú ahora quiero que sea en la tercera en vez de en la segunda sección, por lo que ese trozo lo pongo detrás de la sección 3 y ahora los numeritos para que no me de error, mirar lo que cambie, y lo que sería mi vista previa ahora

Añadir vosotr@s el resto de desplegables, después borramos o añadimos si nos interesan alguno mas , pero de momento probar a añadir menús y submenús y en diferentes lugares para el desplegable 3 y el 4

Subimos la plantilla que ha cambiado y todos los archivos del menú desplegable que modificamos también

***

Nuestra vista previa ahora seria esta: AQUI

***

Tutorial realizado por Energiaelca

Derechos reservados