Cómo crear una lista desplegable con vínculos

Escrito por craig witt | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear una lista desplegable con vínculos
Create a drop-down list with links using HTML and JavaScript. (laptop image by Ewe Degiampietro from Fotolia.com)

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.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 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.

  2. 2

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

  3. 3

    Copia y pega el siguiente código en la línea que dejaste en blanco: <form name="link"> <select name="menu"> <option selected>Select your link</option> <option value="http://www.sample.com/">Sample website 1</option> <option value="http://www.sample.com/">Sample website 2</option> <option value="http://www.sample.com/">Sample website 3</option> </select> <input type="button" onClick="location=document.link.menu.options[document.link.menu.selectedIndex].value;" value="Go"> </form>

  4. 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 <option selected> cambia la URL de cada opción subsecuente ajustándola al parámetro correspondiente y reemplaza el texto "Sample Website" con el texto que desees para tu enlace. También puedes cambiar el texto del parámetro value de la etiqueta <input> para actualizar el texto que aparece en el botón "Submit".

  5. 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.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles