Retutilizar menus

ferakugregor · #1 (**permalink**) 15/05/2015, 10:30

Hola a todos
Tengo preparada una especie de plantilla donde en la parte superior aparecen cuatro botones a modo de pestaña y la idea es que al pulsar cada uno de ellos te lleven a una pagina distinta pero que en todas esas páginas se siga viendo la barra de botones.

No quiero tener que repetir esta barra de menú en cada una de las cuatro páginas ya que si tuviese que cambiar algo en la misma tendría que repetir el mismo trabajo 4 veces.

No puedo utilizar php asi que necesitaría hacerlo con jquery o similar.

¿Alguien me puede echar una mano? Gracias

Alexis88 · #2 (**permalink**) 15/05/2015, 10:47

Podrías tener el menú en un archivo HTML y luego solo tendrías que insertarlo en cualquier otro mediante Ajax.

Saludos

ferakugregor · #3 (**permalink**) 16/05/2015, 03:45

Cita:

Iniciado por Alexis88

Podrías tener el menú en un archivo HTML y luego solo tendrías que insertarlo en cualquier otro mediante [URL="http://www.nociondigital.com/webmasters/ajax-tutorial-carga-del-contenido-de-una-pagina-html-con-ajax-detalle-304.html"]Ajax[/URL].

Saludos

Gracias Alexis por tu respuesta pero en principio quiero evitar Ajax por que me queda muy muy grande.
He hecho pruebas sencillas con jquery y lo consigo pero cuando esto lo llevo a mi proyecto deja de funcionar, os adjunto el codigo por si sois tan amables de echarle un vistazo

https://www.dropbox.com/s/jxtl3xqggh732zw/Includes.rar?dl=0

Gracias

Off-topic: lo que pretendo es crear una pequeña aplicación web para que un amigo se copie la carpeta en su tablet y pueda acceder a la información de la misma sin necesidad de conectarse a internet, en una pestaña irá un mapa (esto ya lo tengo resuelto) y en el resto de pestañas información auxiliar. Por lo tanto el header y el footer sera igual siempre igual y solo me cambiará el body por lo que quiero utilizar includers

Alexis88 · #4 (**permalink**) 16/05/2015, 09:24

El código que tengas, por favor, muéstralo acá usando el highlight respectivo que para eso está.

ferakugregor · #5 (**permalink**) 16/05/2015, 12:40

Gracias Alexis intento escribirlo bien,
Me he dado cuenta de que en firefox funciona perfectamente pero en chrome por muchas vueltas que le doy no funciona
Este seria mi index.html

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>PRUEBA</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
    <script> 
        function loadContent() 
        { 
           $("#headerMain").load("header.html"); 
        } 
    </script> 
</head> 
 
<body> 
    <div id="headerMain"></div>
    <div id="main"></div>
    <div id="footer"></div>    
    <script>loadContent()</script> 
</body> 
</html>

Y esto mi header.html (el archivo que le hago includer):

Código HTML:

Ver original<header>
  <nav role='navigation' class="main-nav" id="main-nav">
    <ul id="main-nav-list">
    <li>
      <a href="#">
        <div>
          Home
          <span>is where the heart is</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          About
          <span>to blow this popcicle stand</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          Clients
          <span>are beautiful people</span>
        </div>
      </a>
    </li>
    <li>
      <a href="#">
        <div>
          Contact
          <span>your mom she misses you</span>
        </div>
      </a>
    </li>
    </ul>
  </nav>
</header>

Alexis88 · #6 (**permalink**) 16/05/2015, 12:45

Revisa en la consola si se está generando algún mensaje de advertencia o error. En Chrome, pulsa la tecla F12 y del panel que se desplegará en la parte inferior de la ventana, selecciona 'Console'.

Por cierto, el método load de jQuery, genera una petición asíncrona, de manera que ya estás haciendo uso de Ajax.

ferakugregor · #7 (**permalink**) 18/05/2015, 03:46

Gracias Alexis
Me sale el siguiente mensaje :

"XMLHttpRequest cannot load "