Cómo crear una lista desplegable de tres temas usando HTML + Css + Java Script

Para hacer una lista desplegable adecuada, necesita todo lo anterior: HTML para el contenido, CSS para el estilo y estructura del contenido y JS para la funcionalidad.

Aquí, cómo crear un menú desplegable con CSS y JavaScript, lo explican bastante bien en un solo archivo HTML. El CSS está dentro del , el JS está dentro del . El resto del archivo es para el HTML.

Hay 4 clases CSS que son así: .class {parámetro: valor; …}. Los elementos HTML usan estas clases para decorar o diseñar su apariencia. En este caso, es muy importante porque pueden ocultar cosas como el menú desplegable hasta que los usuarios hagan clic en él.

El script tiene una función que se llama por onclick= en el botón en el HTML. Esta función muestra u oculta el menú desplegable al hacer clic. También incluye una función del objeto de window para cerrar cualquier menú desplegable actualmente abierto.

Este puede ser un buen punto de partida, debe intentar experimentar con este código para comprenderlo mejor. el uso de CSS externo se deja como ejercicio.

Cree un menú desplegable, complete con 3 nombres de temas e identificadores. En el cambio desplegable, elimine cualquier nombre de clase css del tema de la etiqueta del cuerpo. Agregue el nombre del tema seleccionado a la etiqueta del cuerpo.

Abra su archivo css y cree diferentes estilos para 5 elementos diferentes para cada tema.

Sus selectores CSS deben ir precedidos de body.theme-name para cualquier estilo que desee aplicar a un específico.

Usualmente uso la lista desplegable de bootstrap precodificada … puedes codificar tu lista y escribir cientos de líneas de código … pero siempre es mejor y más rápido usar frameworks

simplemente visite este enlace y podrá encontrar la mejor solución para eso.