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>
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}`);
});
Cómo funciona
-
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>).
-
El menú con sus submenús está disponible en todas las páginas
mediante el marco
-
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>.
-
El menú llama a diferentes rutas del backend
(
-
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 corsEjecuta el backend:
Guarda el código del servidor en un archivo (por ejemplo,
server.js).
Inicia el servidor con:
node server.js 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>.