Menu desplegable con javascript y css
menú desplegable css click
En CodePen, lo que escribas en el editor HTML es lo que va dentro de las etiquetas <body> en una plantilla básica de HTML5. Así que no tienes acceso a elementos superiores como la etiqueta <html>. Si quieres añadir clases allí que puedan afectar a todo el documento, este es el lugar para hacerlo.
Es una práctica común aplicar CSS a una página que da estilo a los elementos para que sean consistentes en todos los navegadores. Ofrecemos dos de las opciones más populares: normalize.css y un reset. O bien, elija «Ninguno» y no se aplicará nada.
Cualquier URL añadida aquí será añadida como <link>s en orden, y antes del CSS en el editor. Si enlaza a otro Pen, incluirá el CSS de ese Pen. Si el preprocesador coincide, intentará combinarlos antes de procesarlos.
También puede enlazar a otro Pen aquí, y sacaremos el CSS de ese Pen y lo incluiremos. Si utiliza un preprocesador que coincide, combinaremos el código antes del preprocesamiento, por lo que puede utilizar el Pen vinculado como una verdadera dependencia.
lista de menús desplegables html
The ecommerce website Designer Junkie Apparel uses a dropdown menu to display all its product categories, for example. That way, visitors can either shop the whole collection or hover over the menu and click one of the options to narrow down to the products they’re most interested in.
A drop-down menu is a list of options that is only revealed when a user interacts with the menu — either by clicking or hovering over it. The options then descend vertically, or “drop down,” and disappear again once the user disengages with the menu.
Since a dropdown menu allows you to place more content on a page without cluttering it, it’s commonly used in website navigation and forms. Let’s walk through how to create a basic and hoverable dropdown in HTML below.
To start, add a <label> element. In the opening tag, add a for attribute with a shorthand name for the dropdown list. For example, if the dropdown contains a list of dog names, then you could set the attribute equal to “dog-nams.” Here’s what your HTML might look like so far:
selección de la lista desplegable de javascript
Pruébelo ahora Salida Al ejecutar el código anterior, obtendrá la misma respuesta que la captura de pantalla dada. Contendrá un menú desplegable con una lista de sitios de tutoriales. Seleccione un elemento de la lista desplegable haciendo clic en él. Vea en la captura de pantalla siguiente que el elemento seleccionado se ha mostrado en el campo de salida. Una lista desplegable puede ser creada usando algunas otras formas; vea algunos ejemplos más abajo. Lista desplegable usando un botón y una pestaña div En este ejemplo, crearemos una lista desplegable con un botón que tiene una lista de elementos como un menú desplegable. Copiar código
Pruébelo ahora Salida Al hacer clic en este botón desplegable, obtendrá una lista de elementos en la que tiene que seleccionar un elemento de esa lista. Vea la captura de pantalla de abajo: Haga clic en el botón de la lista desplegable y oculte la lista. Ejemplo de lista desplegable múltiple En los ejemplos anteriores, hemos creado una sola lista desplegable. Ahora crearemos un formulario con un menú desplegable múltiple de varias listas de tutoriales técnicos en línea como C, C++, PHP, MySQL y Java, clasificados en varias categorías. Cuando el usuario haga clic en un botón desplegable en particular, se le abrirá su respectiva lista desplegable. Vea el siguiente ejemplo de cómo hacerlo:
lista desplegable html
Esto es básicamente HTML head boilerplate, con la excepción de las etiquetas de enlace que cargan las dos hojas de estilo CSS que usaremos en este tutorial: los estilos de Font Awesome, y el archivo styles.css, donde definiremos los estilos de esta página.
El elemento desplegable es un div que contiene un título y elementos de menú. El primero sólo define qué texto se presentará en el elemento antes de que se seleccione cualquier opción y el segundo definirá las opciones que serán seleccionables por el elemento.
Preste atención a las definiciones de las clases .dropdown. Éstas se utilizan para definir el diseño del componente contenedor del dropdown, así como sus elementos internos, como el .title y sus .option’s.
Me gustaría dejar claro que estamos utilizando funciones de flecha( () => {} ) y la palabra clave const, que son características de ES6. Probablemente estés bien si usas una versión reciente de tu navegador, pero tenlo en cuenta.
Cuando se hace clic en el elemento desplegable, éste se abre (si está cerrado) o se cierra (si está abierto). Esto sucede al vincular toggleMenuDisplay al receptor de eventos de clic en el elemento desplegable. Esta función alterna la visualización de su elemento de menú mediante el uso de las funciones toggleDisplay y toggleClass.