Actividad 27: Crear un menú con javascript (array de objetos)
- Bootstrap
- CSS
- HTML
- JavaScript
Objetivo
Crear un menú a partir de un objeto JavaScript (array de objetos). Cada objeto dentro de este array representa un elemento de nuestro menú. Cada objeto tiene dos propiedades: texto (lo que se mostrará en el menú) y url (a dónde apuntará el enlace).
Instrucciones
// 1. Define el objeto JavaScript que contiene los datos del menú
const datosMenu = [
{ texto: «Inicio», url: «index.html» },
{ texto: «Acerca de», url: «acerca.html» },
{ texto: «Servicios», url: «servicios.html» },
{ texto: «Contacto», url: «contacto.html» }
];
// 2. Guarda en una variable el contenedor donde se insertará el menú
// 3. Crea el elemento <ul> (lista desordenada) que contendrá los elementos del menú
// 4. Itera sobre el objeto de datos del menú y crea los elementos HTML:
- // Crea un elemento <li> (elemento de lista)
- // Crea un elemento <a> (enlace)
- // Establece el texto del enlace a partir de la propiedad ‘texto’ del objeto
- // Establece el atributo ‘href’ del enlace a partir de la propiedad ‘url’ del objeto
- // Añade el enlace (<a>) dentro del elemento de lista (<li>)
- // Añade el elemento de lista (<li>) dentro de la lista desordenada (<ul>)
// 5. Añade la lista completa (<ul>) al contenedor de navegación en el HTML
// 6. Añade las reglas de estilo necesarias para que se despliegue en pantalla completa, según el ejemplo How TO – Full screen Overlay Navigation
// Intégralo en tu sitio de WordPress