Cómo crear un menú desplegable con HTML y CSS

Descargar el PDF
Coescrito por Personal de wikiHow

Descargar el PDF

Este wikiHow te enseñará cómo crear un menú desplegable para tu sitio web utilizando código HTML y CSS. Este menú desplegable aparecerá cuando alguien pase el cursor sobre el botón. Una vez que aparezca el menú desplegable, el usuario podrá hacer clic en una de las opciones para acceder a la página web correspondiente a esa opción.

Pasos

Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/3234689-1.jpg\/v4-460px-3234689-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/3234689-1.jpg\/v4-728px-3234689-1.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Puedes utilizar un editor de texto básico, como el Bloc de notas o TextEdit, o uno más avanzado como Notepad++ .
    • Si decides utilizar Notepad++, asegúrate de seleccionar HTML en la sección "H" del menú Lenguaje en la parte superior de la ventana antes de continuar.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/3234689-2.jpg\/v4-460px-3234689-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/3234689-2.jpg\/v4-728px-3234689-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Esta parte del código determinará el tipo de código que se utilizará en el resto del documento: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 >
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c6\/3234689-3.jpg\/v4-460px-3234689-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c6\/3234689-3.jpg\/v4-728px-3234689-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe el siguiente código para establecer el tamaño y color del menú desplegable, asegurándote de reemplazar "#" por el número que quieras usar (mientras más grande sea el número, más grade será el menú desplegable). También puedes reemplazar los valores de "background-color" (color de fondo) y "color" por el color (o código de color HTML) que más te guste: [1] 
     . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 #px 
 ; 
 font-size 
 : 
 #px 
 ; 
 border 
 : 
 none 
 ; 
 }
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/3234689-4.jpg\/v4-460px-3234689-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/3234689-4.jpg\/v4-728px-3234689-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Como más adelante vas a agregarle enlaces al menú desplegable, utiliza el siguiente código para poner enlaces dentro de él: 
     . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 }
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c2\/3234689-5.jpg\/v4-460px-3234689-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/3234689-5.jpg\/v4-728px-3234689-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El siguiente código sirve para determinar el tamaño, el color y la posición del menú desplegable cuando hay otros elementos dentro de la página web. Asegúrate de reemplazar el "#" de la sección "min-width" (ancho mínimo) por el número que quieras (por ejemplo, 250) y cambiar el encabezado "background-color" por el color (o código de color HTML) que más te guste: 
     . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 #px 
 ; 
 z-index 
 : 
 1 
 ; 
 }
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/db\/3234689-6.jpg\/v4-460px-3234689-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/db\/3234689-6.jpg\/v4-728px-3234689-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El siguiente código sirve para modificar el color del texto y el tamaño del botón del menú desplegable. Asegúrate de reemplazar "#" por la cantidad de píxeles que quieras para determinar el tamaño del botón: 
     . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 #px 
 #px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 }
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/3234689-7.jpg\/v4-460px-3234689-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/3234689-7.jpg\/v4-728px-3234689-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Sería bueno que al pasar el cursor sobre el botón del menú desplegable cambien algunos colores. La primera línea de "background-color" sirve para cambiar color que aparece al seleccionar un elemento del menú desplegable, mientras que la segunda línea "background-color" sirve para cambiar color del botón del menú desplegable. La idea es que ambos colores se vean más claros que los colores del menú cuando este no está seleccionado: 
     . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;}
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/15\/3234689-8.jpg\/v4-460px-3234689-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/15\/3234689-8.jpg\/v4-728px-3234689-8.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":542,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ingresa el siguiente código para indicar que has terminado con la parte de CSS del documento: 
     </ 
 style 
 > 
 </ 
 head 
 >
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/3234689-9.jpg\/v4-460px-3234689-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/3234689-9.jpg\/v4-728px-3234689-9.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ingresa el siguiente código pero reemplazando "Nombre" por el nombre que quieras ponerle al botón (por ejemplo, Menú ): 
     < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Nombre </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 >
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/3234689-10.jpg\/v4-460px-3234689-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/3234689-10.jpg\/v4-728px-3234689-10.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Cada uno de los elementos del menú desplegable deberá vincularse con algo, ya sea una página de tu propio sitio web o de un sitio externo. Ingresa el siguiente código para agregar elementos al menú desplegable, asegurándote de reemplazar https://www.sitioweb.com por la dirección del enlace (sin quitar las comillas) y "Nombre" por el nombre del enlace: 
     < 
 a 
 href 
 = 
 "https://www.sitioweb.com" 
 > 
Nombre </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.sitioweb.com" 
 > 
Nombre </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.sitioweb.com" 
 > 
Nombre </ 
 a 
 >
  11. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/3234689-11.jpg\/v4-460px-3234689-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/3234689-11.jpg\/v4-728px-3234689-11.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ingresa las siguientes etiquetas para cerrar el documento e indicar que ahí termina el código del menú desplegable: 
     </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/3234689-12.jpg\/v4-460px-3234689-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/3234689-12.jpg\/v4-728px-3234689-12.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tu código deberá quedar similar al siguiente: [2] 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
 . 
 dropbtn 
 { 
 background-color 
 : 
 black 
 ; 
 color 
 : 
 white 
 ; 
 padding 
 : 
 16 
 px 
 ; 
 font-size 
 : 
 16 
 px 
 ; 
 border 
 : 
 none 
 ; 
 } 
 . 
 dropdown 
 { 
 position 
 : 
 relative 
 ; 
 display 
 : 
 inline-block 
 ; 
 } 
 . 
 dropdown-content 
 { 
 display 
 : 
 none 
 ; 
 position 
 : 
 absolute 
 ; 
 background-color 
 : 
 lightgrey 
 ; 
 min-width 
 : 
 200 
 px 
 ; 
 z-index 
 : 
 1 
 ; 
 } 
 . 
 dropdown-content 
 a 
 { 
 color 
 : 
 black 
 ; 
 padding 
 : 
 12 
 px 
 16 
 px 
 ; 
 text-decoration 
 : 
 none 
 ; 
 display 
 : 
 block 
 ; 
 } 
 . 
 dropdown-content 
 a 
 : 
 hover 
 { 
 background-color 
 : 
 white 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropdown-content 
 { 
 display 
 : 
 block 
 ;} 
 . 
 dropdown 
 : 
 hover 
 . 
 dropbtn 
 { 
 background-color 
 : 
 grey 
 ;} 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 div 
 class 
 = 
 "dropdown" 
 > 
 < 
 button 
 class 
 = 
 "dropbtn" 
 > 
Redes sociales </ 
 button 
 > 
 < 
 div 
 class 
 = 
 "dropdown-content" 
 > 
 < 
 a 
 href 
 = 
 "https://www.google.com" 
 > 
Google </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.facebook.com" 
 > 
Facebook </ 
 a 
 > 
 < 
 a 
 href 
 = 
 "https://www.youtube.com" 
 > 
YouTube </ 
 a 
 > 
 </ 
 div 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Anuncio

Consejos

  • Prueba el código antes de publicarlo en tu sitio web.
  • Las instrucciones anteriores sirven para crear un menú desplegable que se active al pasar el cursor del ratón sobre el botón de dicho menú. Si quieres crear un menú desplegable que solo aparezca al hacer clic, deberás utilizar JavaScript. [3]
Anuncio

Advertencias

Anuncio

wikiHows relacionados

Cómo
crear una simple página web usando el Bloc de Notas
Cómo
copiar una página web
Cómo
hacer que un archivo se pueda descargar desde tu página web
Cómo
editar archivos XML
Anuncio

Referencias

  1. ↑ https://www.w3schools.com/howto/howto_css_dropdown.asp
  2. ↑ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
  3. ↑ https://www.w3schools.com/howto/howto_js_dropdown.asp

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 156 651 visitas.

¿Te ayudó este artículo?

Anuncio