admin
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.
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
Paso 1: crea un elemento de etiqueta.
Para comenzar, agregue un elemento
<label for="dog-names">Choose a dog name:</label>
Paso 2: crea un elemento de selección.
A continuación, agregue un elemento
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.
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
<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…
