title: JavaScript project, how to insert link to another page
body: <p>I am new to JavaScript and I am creating a project that uses a Facebook similar side menu.</p>
  
  <p>In the project there are following files:</p>
  
  <ul>
  <li>index.html</li>
  <li>menu.html</li>
  <li>option1.html, option2.html, etc.</li>
  </ul>
  
  <p>At index.html there is a button that opens the side menu. Each X option from the menu opens an optionX.html file, and the header bar is the same, including MENU button and logo on it.</p>
  
  <p>What I need to do is to create links and to open other files from optionX.html keeping the header bar..</p>
  
  <p>This are my files:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
          &lt;title&gt;Demo Menu&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="menuprincipal"&gt;
              &lt;div id="wrapperMenu"&gt;
                  &lt;div class="scroller"&gt;
                      &lt;div id="contenidoMenu"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="cuerpo"&gt;
              &lt;div id="header"&gt;&lt;a href="javascript:menu('menu');"&gt;&lt;div class="btn"&gt;MENU&lt;/div&gt;&lt;/a&gt;&lt;img class="logo" src="img/logo.png" /&gt;&lt;/div&gt;
              &lt;div id="wrapper"&gt;
                  &lt;div class="scroller"&gt;
                      &lt;div id="contenidoCuerpo"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/fastclick.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/iscroll.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              app.initialize();
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>// Declaraci—n de variables globales
  var myScroll, myScrollMenu, cuerpo, menuprincipal, wrapper, estado;
  
  // Guardamos en variables elementos para poder rescatarlos despuŽs sin tener que volver a buscarlos
  cuerpo = document.getElementById("cuerpo"),
  menuprincipal = document.getElementById("menuprincipal"),
  wrapper = document.getElementById("wrapper");
  
  var xhReq = new XMLHttpRequest();
  
  var app = {
      // Constructor de la app
      initialize: function() {
          // Estado inicial mostrando capa cuerpo
          estado="cuerpo";
  
          // Creamos el elemento style, lo a–adimos al html y creamos la clase cssClass para aplicarsela al contenedor wrapper
          var heightCuerpo=window.innerHeight-46;
          var style = document.createElement('style');
          style.type = 'text/css';
          style.innerHTML = '.cssClass { position:absolute; z-index:2; left:0; top:46px; width:100%; height: '+heightCuerpo+'px; overflow:auto;}';
          document.getElementsByTagName('head')[0].appendChild(style);
  
          // A–adimos las clases necesarias
          cuerpo.className = 'page center';
          menuprincipal.className = 'page center';
          wrapper.className = 'cssClass';
  
          // Leemos por ajax el archivos opcion1.html de la carpeta opciones
          xhReq.open("GET", "opciones/opcion1.html", false);
          xhReq.send(null);
          document.getElementById("contenidoCuerpo").innerHTML=xhReq.responseText;
  
          // Leemos por ajax el archivos menu.html de la carpeta opciones
          xhReq.open("GET", "opciones/menu.html", false);
          xhReq.send(null);
          document.getElementById("contenidoMenu").innerHTML=xhReq.responseText;
  
          // Creamos los 2 scroll mediante el plugin iscroll, uno para el menœ principal y otro para el cuerpo
          myScroll = new iScroll('wrapper', { hideScrollbar: true });
          myScrollMenu = new iScroll('wrapperMenu', { hideScrollbar: true });
  
          this.bindEvents();
      },
  
      bindEvents: function() {
          document.addEventListener('deviceready', this.onDeviceReady, false);
      },
  
      onDeviceReady: function() {
          // Ejecutamos la funci—n FastClick, que es la que nos elimina esos 300ms de espera al hacer click
          new FastClick(document.body);
      },
  
  };
  
  // Funci—n para a–adir clases css a elementos
  function addClass( classname, element ) {
      var cn = element.className;
      if( cn.indexOf( classname ) != -1 ) {
          return;
      }
      if( cn != '' ) {
          classname = ' '+classname;
      }
      element.className = cn+classname;
  }
  
  // Funci—n para eliminar clases css a elementos
  function removeClass( classname, element ) {
      var cn = element.className;
      var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
      cn = cn.replace( rxp, '' );
      element.className = cn;
  }
  
  function menu(opcion){
  
      // Si pulsamos en el bot—n de "menu" entramos en el if
      if(opcion=="menu"){
          if(estado=="cuerpo"){
              cuerpo.className = 'page transition right';
              estado="menuprincipal";
          }else if(estado=="menuprincipal"){
              cuerpo.className = 'page transition center';
              estado="cuerpo";    
          }
      // Si pulsamos un bot—n del menu principal entramos en el else
      }else{
  
          // A–adimos la clase al li presionado
          addClass('li-menu-activo' , document.getElementById("ulMenu").getElementsByTagName("li")[opcion]);
  
          // Recogemos mediante ajax el contenido del html segœn la opci—n clickeada en el menu
          xhReq.open("GET", "opciones/opcion"+opcion+".html", false);
          xhReq.send(null);
          document.getElementById("contenidoCuerpo").innerHTML=xhReq.responseText;
  
          // Refrescamos el elemento iscroll segœn el contenido ya a–adido mediante ajax, y hacemos que se desplace al top
          myScroll.refresh();
          myScroll.scrollTo(0,0);
  
          // A–adimos las clases necesarias para que la capa cuerpo se mueva al centro de nuestra app y muestre el contenido
          cuerpo.className = 'page transition center';
          estado="cuerpo";
  
          // Quitamos la clase a–adida al li que hemos presionado
          setTimeout(function() {
              removeClass('li-menu-activo' , document.getElementById("ulMenu").getElementsByTagName("li")[opcion]);
          }, 300);
  
       }
  
  }
  </code></pre>
  
  <p>option1.html</p>
  
  <pre><code>&lt;div class="borde-h1 color1"&gt;&lt;/div&gt;
  &lt;h1&gt;Title for Option 1&lt;/h1&gt; 
  &lt;p align="justify"&gt;&lt;strong&gt;Los grandes misterios están más cerca de lo que piensas. &lt;/strong&gt;&lt;br/&gt;&lt;br/&gt;
  </code></pre>
  
  <p>menu.html</p>
  
  <pre><code>&lt;ul id="ulMenu"&gt;
      &lt;li&gt;Menu Principal&lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color1"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('1');"&gt;
              &lt;div class="opcion"&gt;Introducción&lt;/div&gt;
              &lt;div class="descripcion"&gt;Los grandes misterios están más cerca de lo que piensas&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color2"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('2');"&gt;
              &lt;div class="opcion"&gt;Ver enclaves por Comunidad &lt;/div&gt;
              &lt;div class="descripcion"&gt;Lista de las comunidades autónomas para seleccionar sus enclaves&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color3"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('3');"&gt;
              &lt;div class="opcion"&gt;Opcion 3&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color4"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('4');"&gt;
              &lt;div class="opcion"&gt;Opcion 4&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color5"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('5');"&gt;
              &lt;div class="opcion"&gt;Opcion 5&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color6"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('6');"&gt;
              &lt;div class="opcion"&gt;Opcion 6&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color1"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('7');"&gt;
              &lt;div class="opcion"&gt;Opcion 7&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color2"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('8');"&gt;
              &lt;div class="opcion"&gt;Opcion 8&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color3"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('9');"&gt;
              &lt;div class="opcion"&gt;Opcion 9&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="borde-menu color4"&gt;&lt;/div&gt;
          &lt;a href="javascript:menu('10');"&gt;
              &lt;div class="opcion"&gt;Opcion 10&lt;/div&gt;
              &lt;div class="descripcion"&gt;Descripcion opcion&lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to add a link in option1.html that should open a html file but keeping the navigation structure, that means keeping Menu bar with menu button and logo.</p>
  
  <p>I have tried with a normal <code>&lt;a href&gt;</code> tag, but obviously the page doesn't keep the menu bar.</p>