wikipediaillustrated

marketing

Cómo crear un menú desplegable HTML [+ Examples]

GettyImages 1321707856 copy 1.jpgkeepProtocol

Al crear páginas web, tiene un espacio limitado para mostrar todo su contenido. Para maximizar el espacio, puede utilizar los menús desplegables.

El sitio web de comercio electrónico Diseñador de ropa para adictos utiliza un menú desplegable para mostrar todas sus categorías de productos, por ejemplo. De esa manera, los visitantes pueden comprar toda la colección o pasar el cursor sobre el menú y hacer clic en una de las opciones para reducir los productos que más les interesan.

En esta publicación, veremos cómo hacer un menú desplegable usando HTML para que pueda incorporarlo en los diseños de su sitio web.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Menú desplegable HTML

Un menú desplegable es una lista de opciones que solo se revela cuando un usuario interactúa con el menú, ya sea haciendo clic o pasando el mouse sobre él. Luego, las opciones descienden verticalmente, o «desplegable», y desaparecen nuevamente una vez que el usuario se desconecta del menú.

Dado que un menú desplegable le permite colocar más contenido en una página sin abarrotarla, se usa comúnmente en la navegación y los formularios del sitio web. Veamos cómo crear un menú desplegable básico y desplazable en HTML a continuación.

Cómo hacer un menú desplegable en HTML

Es fácil crear un menú desplegable básico en HTML con el elemento . En la etiqueta de apertura, agregue un atributo de nombre e ID y configure ambos con el mismo valor que el atributo for en el paso anterior.

Entonces, para este ejemplo, establecería los atributos de nombre e ID en «perros». Aquí está el HTML:

 
<select name="dog-names" id="dog-names"></select>

El atributo de nombre es necesario para enviar cualquier dato del menú desplegable.

El atributo id, por otro lado, es necesario para asociar la lista desplegable con una etiqueta.

Recurso destacado

Una introducción a HTML para especialistas en marketing y desarrolladores

Rellena el formulario para acceder a tu guía gratuita.




Paso 3: cree elementos de opción y colóquelos dentro del elemento seleccionado.

Finalmente, agregará elementos de opción entre las etiquetas de apertura y cierre del elemento seleccionado. Agregue tantas opciones como desee proporcionar en la lista desplegable. Luego, agregue un atributo de valor dentro de cada etiqueta de apertura y configúrelo en el nombre de la opción. Aquí hay cuatro ejemplos:

 
<option value="rigatoni">Rigatoni</option>
<option value="dave">Dave</option>
<option value="pumpernickel">Pumpernickel</option>
<option value="reeses">Reeses</option>

Aquí está el HTML todo junto y el resultado:

ver la pluma Menú desplegable solo HTML de Christina Perricone (@hubspot) en CódigoPen.

Valor predeterminado del menú desplegable HTML

La primera opción aparecerá como el valor predeterminado del menú desplegable, como puede ver en el ejemplo anterior. Sin embargo, para cambiar el valor predeterminado, puede usar el atributo booleano «seleccionado». Simplemente agréguelo a la etiqueta de apertura del elemento de opción que desea mostrar como predeterminado, después de su atributo de valor.

En el siguiente ejemplo, verá un menú desplegable para los planes de membresía. Si bien las opciones incluyen un plan gratuito y bronce, el atributo booleano se usa para establecer el valor predeterminado en plata.

ver la pluma Menú desplegable solo HTML con atributo booleano de Christina Perricone (@hubspot) en CódigoPen.

Cómo hacer un menú desplegable flotante

Si desea que un menú desplegable solo aparezca cuando un usuario se desplaza sobre un elemento, deberá usar HTML y CSS. Veamos el proceso a continuación.

Paso 1: cree y aplique estilo a un div con un nombre de clase «desplegable».

Primero, deberá crear un div y agregar un atributo de clase. Establezca este atributo de clase en «desplegable». Luego, en CSS, configure la visualización de este div en…

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *