Contenido

• Pasos
• Consejo
• Advertencia

Este wikiHow te enseñará cómo crear menús desplegables en tu sitio web usando código HTML y CSS. Aparecerá un menú desplegable cuando el visitante pase el puntero del mouse sobre el botón especificado; A continuación, pueden hacer clic en uno de los elementos para ir al sitio web de esa opción.

Pasos

1. 

   Abra el editor de texto HTML. Puede utilizar un editor de texto simple (Notepad, TextEdit) o ​​más avanzado (Notepad ++).
   • Si decide ir a Notepad ++, debe elegir HTML de la parte "H" del menú Idioma (Idioma) en la parte superior de la ventana antes de continuar.

2. 

   
   
   Ingrese un título para el documento. Aquí está el código que determina el tipo de código que se utilizará para el resto del documento:

3. 

   Crear menú desplegable. Ingrese el siguiente código para especificar el tamaño y color del menú desplegable, recuerde reemplazar el "#" con el parámetro que desea usar (cuanto mayor sea el número, mayor será el menú desplegable). También podemos reemplazar el color de fondo "background-color" y el color "color" con cualquier color (o código de color HTML) que desee:

4. 

   
   
   Especifique que desea reemplazar los enlaces en el menú desplegable. Dado que luego agregará enlaces al menú, puede reemplazarlos en el menú desplegable ingresando el siguiente código:

5. 

   Crea la apariencia del menú desplegable. El siguiente código determina el tamaño y el color del menú desplegable, incluida la posición cuando se combina con otros elementos de la página web. No olvide reemplazar el "#" en la sección "ancho mínimo" con el número que desee (por ejemplo, 250) y cambie el encabezado "background-color" (color de fondo) a un color específico o código HTML:

6. 

   
   
   Agregue detalles al contenido del menú desplegable. El siguiente código especificará el color del texto en el interior y el tamaño del botón del menú desplegable. No olvide reemplazar el "#" con el número de píxeles que define el tamaño del botón de menú:

7. 

   Edita cómo cambia el puntero del mouse cuando se coloca en el menú desplegable. Cuando pasa el puntero del mouse sobre el botón de menú, es necesario cambiar algunos colores. La línea de "color de fondo" reflejará el color cambiado cuando seleccione algo en el menú desplegable, mientras que la segunda línea de "color de fondo" es el color al que cambiará el botón del menú. Idealmente, estos dos colores deberían ser más claros que cuando no estaban seleccionados:

8. 

   Cierra la sección CSS. Ingrese el siguiente código para especificar que ha terminado con la parte CSS del documento:

9. 

   Crea un nombre para el botón de menú. Ingrese el siguiente código, pero recuerde reemplazar "Nombre" con el nombre del botón del menú desplegable (ejemplo: Menú):

10. 

    Agrega enlaces al menú. Cada elemento del menú desplegable se vinculará a algo, ya sea una página del sitio web actual o un sitio web externo. Agregue la selección al menú desplegable ingresando el siguiente código, del cual debe reemplazar https://www.website.com con la dirección del enlace (mantenga los paréntesis) y reemplace "Nombre" con el nombre del enlace.

11. 

    Cerrar documento. Ingrese las siguientes etiquetas para cerrar el documento y especificar el código al final del menú desplegable:

12. 

    El código de revisión especifica el menú desplegable. El fragmento tendrá un aspecto similar a este: Anuncios

Consejo

• Siempre revise el código antes de publicarlo en el sitio web.
• Las instrucciones anteriores son para menús desplegables que funcionarán cuando coloque el puntero del mouse sobre el botón de menú. Si desea crear un menú desplegable en el que solo haga clic cuando haga clic, debe utilizar JavaScript.

Advertencia

• La coloración HTML es bastante limitada cuando usamos etiquetas como "negro" o "verde". Puede consultar el generador de código de color HTML que permite a los usuarios crear y usar colores personalizados aquí.