Want to create interactive content? It’s easy in Genially!

Get started free

MENU DESPLEGABLE HTML

gabriel valencia

Created on May 1, 2023

ejemplo de la presentación en línea

Start designing with a free template

Discover more than 1500 professional designs like these:

Audio tutorial

Pechakucha Presentation

Desktop Workspace

Decades Presentation

Psychology Presentation

Medical Dna Presentation

Geometric Project Presentation

Transcript

menu desplegableen html

en html y jsp

Desarrollo de Aplicaciones Web

Se dara a conocer el tema de menu desplegable en html, que son, para que se utilizan, su sintaxys y un ejemplo practico

menu desplegable en html

01

¿que son?

Definicion

01. ¿que son?

Un menú desplegable es una lista de opciones que solamente se revela cuando un usuario interactúa con él, ya sea al hacer clic sobre la opción correspondiente o al desplazarse sobre ella con el cursor. Estas opciones generalmente se despliegan hacia abajo de forma vertical y desaparecen una vez que el usuario deja de interactuar con ellas.

02

usos

en que momento utilizarlos

02. usos

Gracias a que los menús desplegables permiten integrar un mayor volumen de contenido y enlaces en una página sin saturarla, estos recursos se utilizan comúnmente en sitios y aplicaciones web para ocultar información que podría ser poco interesante para todos los usuarios, pero a la que probablemente algunos de ellos quieran acceder.

usos mas comunes

  • En menús de navegación que contienen enlaces a otras páginas del sitio.
  • En formularios (incluyendo algunos formularios móviles como el de Bootstrap) para listar opciones de entre las cuales el usuario debe elegir.
  • En buscadores de sitios para listar o filtrar opciones de búsqueda.
  • Como alternativas a los botones de opciones para ahorrar espacio en el sitio.

04

sintaxis

sintaxis general en html

04. sintaxis

Para entender cómo funcionan los menús desplegables en HTML necesitarás dominar el uso de dos elementos la selección (<select>) y las opciones (<option>):

<SELECT>

<option>

El elemento <select> sirve para crear el menú desplegable

<select> generalmente contiene uno o más elementos <option> en su interior. Cada <option> representa una de las alternativas del menú..

atributos

Las etiquetas deben incluir el valor del atributo; de este modo se puede especificar el valor correspondiente a cada opción del menú cuando se selecciona.

dautofocus: son seleccionadas por el navegador disabled: deshabilita el menu multiple: permite seleccionar varias opciones required: es necesario seleccionar una opcion

05

crear un menu

con htmll

05. crear un menu

Crear un menú desplegable es realmente sencillo al utilizar el elemento <select>. Veamos paso a paso cómo hacerlo.

06

paso 1

06. METODOLOGÍA

crear un elemento <select>

En él, agrega un atributo name En name debes definir los valores que identificarán a tu menú.

Se debe añadir un elemento <select>

06. METODOLOGÍA

apertura

cierre

07

paso 2

07. paso 2

debes añadir algunos elementos <option> entre la apertura y el cierre del elemento <select>. Añade todas las opciones que desees que aparezcan en tu menú. Posteriormente, debes añadir un valor de atributo para cada <option> y establecer un nombre para cada una de las opciones.

Crea uno o más elementos <option> y colócalos dentro de tu elemento <select>

08

valor definido

es el valor definido automaticamente

08. Valor predeterminado para desplegables en HTML

primer elemento

Al crear un menú desplegable con este método la primera opción listada en tu HTML será el valor por defecto del desplegable

08. Valor predeterminado para desplegables en HTML

Para cambiar este valor predeterminado puedes usar el elemento booleano selected. Simplemente deberás añadir al inicio de tu elemento <option> aquel valor que quieras mostrar después del atributo value.

Gracias por su atención