Actividad 27: Crear un menú con javascript (array de objetos)

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