Cómo crear una lista desplegable con vínculos

Por craig witt

Muchos sitios web presentan menús de navegación por medio de bloques de opciones que ocupan la parte superior del sitio o bien uno de sus costados. Debido a que estas estructuras de navegación presentan todas las opciones disponibles, ofrecen una gran cantidad de información contextual. Sin embargo, ocupan una considerable cantidad de espacio en pantalla. Los diseñadores que no disponen de mucho espacio pueden elegir el uso de menús desplegables que contengan una lista de objetos y se expandirán sólo cuando sean seleccionados. Puedes crear esta clase de estructura para tu sitio web utilizando HTML y JavaScript.

Paso 1

Abre tu página web y revisa su código. Si utilizas un editor de textos, simplemente abre tu página en dicho editor y selecciona la línea donde quieres añadir el menú desplegable. Si utilizas un editor visual (por ejemplo Adobe Dreamweaver o Microsoft Expression Web) abre tu página o haz clic en la ubicación que deseas para el menú desplegable. Una vez hecho esto, cambia de vista gráfica a vista de código. Esto te mostrará el código HTML que determina el contenido y apariencia de tu página.

Paso 2

Presiona "Enter" para crear una línea en blanco.

Paso 3

Copia y pega el siguiente código en la línea que dejaste en blanco:

Paso 4

Actualiza los parámetros de los enlaces para que concuerden con tus criterios de diseño. Ingresa el texto por defecto en la parte superior de la lista modificando directamente el valor después de la etiqueta

Paso 5

Guarda tu página web y ábrela en el navegador. Selecciona una opción del menú desplegable y haz clic en el botón adyacente para tener acceso al objeto seleccionado.