Frontend con Menú y Submenú

byMilton Rodriguez Lopez -

 Usaremos HTML, CSS y JavaScript para crear el menú dinámico que se cargará en todas las ventanas. Estas se comunicarán con el backend para obtener datos según el directorio seleccionado. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menú Avanzado</title>
  <style>
    /* Estilo básico del menú */
    nav {
      background-color: #333;
      color: white;
      padding: 10px;
    }

    nav ul {
      list-style-type: none;
      padding: 0;
    }

    nav ul li {
      display: inline-block;
      position: relative;
      margin-right: 20px;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
    }

    nav ul li ul {
      display: none;
      position: absolute;
      background-color: #444;
      padding: 10px;
      list-style-type: none;
    }

    nav ul li:hover ul {
      display: block;
    }

    nav ul li ul li {
      display: block;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Directorio 1</a>
        <ul>
          <li><a href="#" onclick="loadSubdirectory('subdirectorio1')">Subdirectorio 1</a></li>
          <li><a href="#" onclick="loadSubdirectory('subdirectorio2')">Subdirectorio 2</a></li>
        </ul>
      </li>
      <li><a href="#">Directorio 2</a>
        <ul>
          <li><a href="#" onclick="loadSubdirectory('subdirectorio3')">Subdirectorio 3</a></li>
          <li><a href="#" onclick="loadSubdirectory('subdirectorio4')">Subdirectorio 4</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <iframe id="contentWindow" src="about:blank" width="100%" height="500px" style="border: none;"></iframe>

  <script>
    function loadSubdirectory(subdirectory) {
      const contentWindow = document.getElementById('contentWindow');
      contentWindow.src = `http://localhost:3000/${subdirectory}`;
    }
  </script>
</body>
</html>
HTML

 

Backend con Directorios y Subdirectorios

Actualicemos el backend para manejar rutas dinámicas de directorios y subdirectorios. Cada ruta responderá con contenido relacionado. 

const express = require('express');
const app = express();
const port = 3000;

const cors = require("cors");
app.use(cors());

const directories = {
  subdirectorio1: { mensaje: "Contenido del Subdirectorio 1" },
  subdirectorio2: { mensaje: "Contenido del Subdirectorio 2" },
  subdirectorio3: { mensaje: "Contenido del Subdirectorio 3" },
  subdirectorio4: { mensaje: "Contenido del Subdirectorio 4" },
};

app.get('/:subdirectory', (req, res) => {
  const subdirectory = req.params.subdirectory;

  if (directories[subdirectory]) {
    res.send(`
      <html>
      <head><title>${subdirectory}</title></head>
      <body>
        <h1>${directories[subdirectory].mensaje}</h1>
        <p>Datos adicionales del subdirectorio ${subdirectory}.</p>
        <a href="javascript:history.back()">Volver al menú</a>
      </body>
      </html>
    `);
  } else {
    res.status(404).send("Subdirectorio no encontrado.");
  }
});

app.listen(port, () => {
  console.log(`Servidor escuchando en http://localhost:${port}`);
});
HTML

 

Cómo funciona

  1. Menú y submenús compartidos:
    • El menú con sus submenús está disponible en todas las páginas mediante el marco <iframe>.
    • La navegación entre subdirectorios carga contenido dinámicamente en una ventana diferente (el <iframe>).
  2. Comunicación con el backend:
    • El menú llama a diferentes rutas del backend (/:subdirectory) para cargar información específica de los directorios y subdirectorios.
    • Cada subdirectorio responde con HTML dinámico, que se renderiza en el <iframe>.
  3. Código reutilizable:
    • Todas las ventanas comparten la misma estructura de menú.
    • Las rutas del backend son dinámicas y centralizan la gestión del contenido.

 

Instala  Node.js , Express, cors: 

npm install express cors
HTML

 Ejecuta el backend:

Guarda el código del servidor en un archivo (por ejemplo, server.js). 

Inicia el servidor con:

node server.js
HTML
 

Abre el frontend:

  • Guarda el código HTML en un archivo (por ejemplo, index.html).
  • Ábrelo en un navegador web.

Prueba el menú y submenús:

  • Haz clic en un submenú para cargar el contenido asociado desde el backend.
  • Verás cómo el contenido dinámico aparece en la ventana <iframe>.
 

 

Tags

You might like

Destacado

Frontend con Menú y Submenú

 Usaremos HTML, CSS y JavaScript para crear el menú dinámico que se cargará en todas las ventanas. Estas se comunicarán con el backend ...