10

Tengo un menu para mi pagina web, el problema es que si pienso cambiarlo tendre que modificar muchos archivos (alrededor de 40) pense entonces incluir el archivo usando JavaScript con la funcion document.write() pero no se de que manera agregar el HTML

MENU.html

<div id="menu">
      <ul class="nav">
        <li><a href=""><font size="18">Street Level</font></a>
        <li>
          <a href="">Introduccion</a>
          <ul>
            <li><a href="#">Presentacion</a>
            </li>
            <li><a href="#">El evangelio</a>
            </li>
            <li><a href="#">El evangelio del Hip Hop</a>
            </li>
            <li>
              <a href="#">Herramientas</a>
              <ul>
                <li>
                  <a href="#">Motivacionales</a>
                  <ul>
                    <li><a href="#">Retos del dia</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Desenvolvimiento</a>
                  <ul>
                    <li><a href="#">Freestyle</a>
                    </li>
                    <li><a href="#">Batallas</a>
                    </li>
                    <li><a href="#">Gozatelo</a>
                    </li>
                    <li><a href="#">A Oscuras</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Creatividad</a>
                  <ul>
                    <li><a href="#">Cuadrado</a>
                    </li>
                    <li><a href="#">Reloj</a>
                    </li>
                    <li><a href="#">3x3</a>
                    </li>
                    <li><a href="#">8x2</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="">Hip Hop</a>
          <ul>
            <li><a href="#">Historia</a>
            </li>
            <li><a href="#">Dios: El Creador del Hip Hop</a>
            </li>
            <li>
              <a href="#">Los Cinco Elementos</a>
              <ul>
                <li><a href="#">Introduccion</a>
                </li>
                <li><a href="#">Breaking</a>
                </li>
                <li><a href="#">Mcing</a>
                </li>
                <li><a href="#">Djing</a>
                </li>
                <li><a href="#">Graffiti</a>
                </li>
              </ul>
            </li>
          </ul>
        <li>
          <a href="">Breakdance</a>
          <ul>
            <li><a href="#">Historia</a>
            </li>
            <li><a href="#">Filosofia</a>
            </li>
            <li><a href="#">Bboy - Bgirl</a>
            </li>
            <li>
              <a href="#">Breakbeat</a>
              <ul>
                <li><a href="#">"Break" the beat</a>
                </li>
                <li><a href="#">Ritmo</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Batallas</a>
              <ul>
                <li><a href="#">Respeto</a>
                </li>
                <li><a href="#">Señalar</a>
                </li>
                <li><a href="#">Copia-Originalidad</a>
                </li>
              </ul>
            </li>
            </li>
          </ul>
        <li>
          <a href="">Foundation</a>
          <ul>
            <li><a href="#">La casa construida sobre arena</a>
            </li>
            <li><a href="#">El hombre trinario</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">La Persona</a>
          <ul>
            <li><a href="#">Objetivos Personales</a>
            </li>
            <li><a href="#">Breakdance: Estilo de vida</a>
            </li>
            <li><a href="#">Actitud</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">El Cuerpo</a>
          <ul>
            <li><a href="#">A repetir!</a>
            </li>
            <li>
              <a href="#">Movimientos Basicos</a>
              <ul>
                <li><a href="#">Tecnica</a>
                </li>
                <li><a href="#">TopRock</a>
                </li>
                <li><a href="#">UpRock</a>
                </li>
                <li><a href="#">Go Down</a>
                </li>
                <li><a href="#">Footwork</a>
                </li>
                <li><a href="#">Freeze</a>
                </li>
                <li><a href="#">Powermove</a>
                </li>
              </ul>
            </li>
            </li>
            </li>
            <li>
              <a href="#">Preparacion Fisica</a>
              <ul>
                <li><a href="#">Fuerza</a>
                </li>
                <li><a href="#">Velocidad</a>
                </li>
                <li><a href="#">Resistencia</a>
                </li>
                <li><a href="#">Flexibilidad</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">CREARtividad</a>
              <ul>
                <li><a href="#">Combos</a>
                </li>
                <li><a href="#">Velocidad</a>
                </li>
                <li><a href="#">Entrada-Salida</a>
                </li>
                <li>
                  <a href="#">Triangulo Dinamico</a>
                  <ul>
                    <li><a href="#">Niveles</a>
                    </li>
                    <li><a href="#">Velocidad</a>
                    </li>
                    <li><a href="#">Espacio</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">EXPRESSividad</a>
              <ul>
                <li><a href="#">Fluidez</a>
                </li>
                <li><a href="#">Emociones</a>
                </li>
                <li><a href="#">Lenguajes</a>
                </li>
                <li><a href="#">Tonalidades</a>
                </li>
              </ul>
            </li>
          </ul>
        <li>
          <a href="">La Mente</a>
          <ul>
            <li><a href="#">A pensar!</a>
            </li>
            <li><a href="#">Breaking Goal</a>
            </li>
            <li><a href="#">The Magnet Method</a>
            </li>
          </ul>
        <li>
          <a href="#">El Alma</a>
          <ul>
            <li><a href="#">Ya no pienses!</a>
            </li>
            <li><a href="#">Modelos a seguir</a>
            </li>
            <li><a href="#">Estilo Propio</a>
            </li>
            <li><a href="#">Flavor</a>
            </li>
          </ul>
        </li>
      </ul>
      <!-- Lista Menu -->
    </div>
    <!-- Menu -->

Como puedo incluir ese codigo HTML en cada pagina?

6

3 respuestas 3

11

La forma mas sencilla para hacerlo es usando jQuery, el cual debes incluir en tu proyecto, y luego usar la funcion load para colocarlo en algun nodo de tu web, en este caso usé un div con la class "menuContainer" y el menu lo he puesto en un archivo llamado menu.html

Importante: Debes tener un servidor web corriendo en localhost para poder usar dicha funcion ya que si abres el archivo mediante la url "file:///tu_archivo.html" mediante el navegador te dará error de cross-origin, si no tienes un servidor web corriendo puedes montarlo muy facilmente con python3 usando el modulo http.server o en nodejs usando http-server.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="menuContainer"></div>
</body>

  <script>
    $(document).ready(function () {
      $('.menuContainer').load('./menu.html');
    });
  </script>
</html>
2

Me he encontrado con el mismo problema y he buscado varias formas de hacerlo, además de la del método load que ha comentado previamente @pedronalbert

Una forma de hacerlo utilizando solo javascript es con el objeto XMLHttpRequest (yo lo he probado en local utilizando la simulación de servidor del programa xampp, que también sirve para que funcione la respuesta de load que te han dado anteriormente):

Esto consiste en crear la barra de navegación en un archivo a parte:

nav.html

<ul>
    <li><a href="inicio.html">Inici</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Fotos</a></li>
    <li><a href="#">Contacto</a></li>
</ul>

Y después llamar a ese archivo desde los otros archivos:

inicio.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Título de la página</title>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'nav.html');
        xhr.setRequestHeader('Content-Type', 'text/plain');
        xhr.send();
        xhr.onload = function (data) {
            document.querySelector("nav").innerHTML = data.currentTarget.response;
            //para más de una barra de navegación
            /*var navs = document.querySelectorAll("nav");
            for(var i=0; i<navs.length; i++) {
                navs[i].innerHTML = data.currentTarget.response;
            }*/
            
        };
    </script>
</head>
<body>
    <div class="contenedor">
        <header>
            <!-- barra de navegación -->
            <nav></nav>
        </header>
    </div>
</body>
</html>

Y como alternativa al método load de jQuery, también está el método $.ajax (también de jQuery). Por lo que he podido encontrar son más o menos equivalentes, pero $.ajax permite personalizar más el funcionamiento


Otra opción de hacerlo es utilizar la función include de php. No obstante, igual que antes es necesario hacer una simulación de servidor.. porque si no aparece el error que te ha comentado antes @pedronalbert

nav.html

<nav>
    <ul>
        <li><a href="inicio.php">Inici</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Fotos</a></li>
        <li><a href="#">Contacte</a></li>
    </ul>
</nav>

(Considera que al incluir código php en un archivo este tiene que tener la extensión .php, no .html):

inicio.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Título de la página</title>
    </head>
<body>
    <div class="contenedor">
        <header>
            <!-- barra de navegación -->
            <?php include "nav.html"; ?>
        </header>
    </div>
</body>
</html>
4
  • 1
    Buen día. Las de la pregunta son HTML y javascript. Entiendo que la intención es buena, pero no puedes asumir que el AP tiene interés o acceso a PHP u otras plataformas. La idea de SO es responder sobre lo que trata la pregunta, y no con posibles alternativas que están fuera de lo planteado. En todo caso, puedes hacer un comentario, si quieres, para indicar que con X o Y lenguaje se podría resolver. Por favor lee Cómo responder.
    – jachguate
    el 1 sep. 2020 a las 18:46
  • De acuerdo.. es que me he encontrado con el mismo problema y me he puesto a buscar soluciones para conseguirlo, y me ha parecido una buena idea dejar lo que he encontrado aquí. Mi ultima edición utiliza solo javascript, sin apis ni nada. ¿Es necesario que elimine mi respuesta que hace referencia a php o podría considerarse correcta mi respuesta en su conjunto? Gracias
    – itaca9
    el 1 sep. 2020 a las 18:51
  • En todo caso, sugiero mover a la parte superior de la respuesta la parte de javascript y, ya al final, como sugerencia, no veo mal que quede lo de PHP. Ese es mi criterio personal, claro, ya la comunidad dirá con sus votos que le va pareciendo a cada uno.
    – jachguate
    el 1 sep. 2020 a las 18:59
  • Ahora lo edito :)
    – itaca9
    el 1 sep. 2020 a las 19:05
2

Lo mejor que puedes hacer es usar contenido dinámico, como PHP, Python, Perl, etc...

Pero si quieres algo estático, podrías crear una pagina que sea tu menú y en cada página que quieres que aparezca usa la etiqueta iframe....

La etiqueta iframe te permite visualizar una página desde otra.

Ejemplo:

Creas el "index.html" y donde va el menú escribe:

<iframe src="./menú.html"></iframe>

Creas un archivo "menú.html" y en el body añades los links mas el atributo target="_blank":

<a href="otra_pag.html" target="_blank"> Otra Pag </a >

La desventaja de este método es que se abre una pestaña nueva por cada entrada del menú, en este caso es mejor usar contenido dinámico (como el sistema de plantillas de Django en Python, que resuelve muy bien ese problema)...

1
  • Un ejemplo con código ilustraría mucho mejor el punto.
    – Candid Moe
    el 1 sep. 2020 a las 21:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.