Como poner un menu en el resto de paginas

SoCu · #1 (**permalink**) 16/01/2017, 12:01

Hola,
Tengo bastantes archivos/paginas html en el PC que he ido creando con diferente tipos de información personal para usarla en el trabajo, por lo que no sera para utilizarla en un servidor web.

Me gustaría tener las paginas con un menú, así que me puse a buscar tutoriales y entre uno que explica como crear un menú adaptable, que me viene bien por si visualiza en el movil o tablet.

Pero el poner un enlace a una de las paginas, la pagina se muestra pero el menú desaparece.

Como no estoy muy puesto en programación, he intentado buscar soluciones pero no he tenido el resultado esperado.

El menú esta creado en el index.html, y lo he intentado poner en las demas paginas mediante

Código:

<object width="100%" data="menu.html"></object> 

<script type="text/javascript" src="main.js"></script>

<iframe............

Cuando se ha llegado a mostrar, como tiene también submenus, pues la pagina se queda dividida en dos ocultando parte del submenu

Si me podéis decir como puedo mostrar ese menú en el resto de paginas, os lo agradecería, porque ya no se que mas intentar.

Un saludo.

Rafael · #2 (**permalink**) 16/01/2017, 23:29

Héchale un ojo a esto: http://www.forosdelweb.com/f91/hable...munes-1048430/ Algún día completaré el tema, pero te da una idea.

Lo mejor es usar includes.

JESUMINISTROSYMAS · #3 (**permalink**) 30/01/2017, 18:40

Saludos, si no colocaras esos archivos en un servidor no podrás utilizar includes, tendrás que hacer una plantilla con iframe si trabajaras con HTML que es la opción mas viable. Si implementaras algo mas de codigo avanzado puedes combinar JS pero creo en mi humilde opinion lo mas sencillo y como no va a subirse a un server los iframes son una muy buena opcion.

Rafael · #4 (**permalink**) 31/01/2017, 10:34

No, no. Iframes es muy mala opción para un menú, muy mala, cero, no.

De plano el siguiente paso es usar un servidor o de plano copy paste en html, pero no iframes.

SoCu · #5 (**permalink**) 04/02/2017, 16:57

Hola, perdonar por no responder antes, pensé que nadie comentaba nada porque no me llegan los correos de notificación.

He visto una opción que he estado probando, pero me temo que no lo estoy haciendo bien porque no consigo nada, he buscado algún ejemplo para ver el código que hay que poner pero nada.

Es sobre Web components hay un codigo para poner una pagina dentro de otra, o código de una pagina en otra, con la opción HTML IMPORT

He puesto el solo el menu en una pagina "menu.html", para meter esta pagina con HTML IMPORT en el resto de paginas, pero nada

Código HTML:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
  <link id="template-file" href="MENU.html" rel="import" />  
  </head>

y en <body> </body> el script para mostrar el menu, y no lo muestra porque me temo que este paso no pongo el código correcto para que muestre el menu.

Alguien me puede decir algo sobre esto ?

Creo que de poderse hacer seria la mejor opción ya que si cambio algo del menu en el MENU.HTML automáticamente se actualizaría en todas las paginas.

Salu2.

Rafael · #6 (**permalink**) 05/02/2017, 17:36

Eso en un futuro. Todavía no se implementan en la mayoría de los navegadores: http://caniuse.com/#feat=custom-elements

Lo mejor es includes. Véte echando un clavado al tema, te va a solucionar muchas cosas.

SoCu · #7 (**permalink**) 06/02/2017, 03:44

Yo he visto otra grafica donde dice que por ejemplo Firefox es compatible, no te paso el link porque despues de buscar y buscar no se donde la vi.

He visto una pagina creado con este sistema y funciona sin problemas, y para hacerlo compatible con todos los navegadores hay que utilizar los polymer, y estoy viendo como se hace para que funcione entodos los navegadores.

De todas forma para ver si funciona lo estoy probando en el Chrome.

Alguien sabe como descargar la libreria Polymer ??

Aqui encontre otra comparativa
http://jonrimmer.github.io/are-we-componentized-yet/

P.D. no se que pasa pero sigo sin recibir correos de notificacion.

Salu2.

Rafael · #8 (**permalink**) 06/02/2017, 14:05

Tengo dos dudas.

1) ¿Ya viste el post con las alternativas?

2) Me puedes comentar por qué no quieres usar los includes, que te van a abrir la puerta a desarrollar webs más "poderosas". Si necesitas más información se te puede dar.

---

Digo, está super bien estar pendiente de los components, pero por ahora los components no solo son para navegadores de escritorio, debes tomar en cuenta moviles también.

SoCu · #9 (**permalink**) 08/02/2017, 10:27

Hola Rafael, si el post que comentas es [URL="http://www.forosdelweb.com/f91/hablemos-menus-comunes-1048430/"]este[/URL], si que lo he visto un par de veces y entiendo que es mejor no utilizar Frames, iframes, ni Flash, pero esta la opción de poner los menus es usando JavaScript, y la verdad que estoy bastante perdido por ahí, bueno.... yo diría que por lo anterior también porque no he conseguido que funcionar correctamente.

Así que cuando vi el tema del HTML Import, pensé que podía ser la solución, así cuando tenga que modificar o añadir nuevas opciones al menu, se añaden al archivo que contiene el menu, y se actualizar en todas las demás páginas.

Pero estoy viendo videos y videos y videos, y paginas web, pero todo muy técnico para mi, y muy generalizado, lo que comentan es para gente que ya esta puesta en materia, por lo que me sirven de poco, dicen como se poner el "Import" pero no he visto ningún código completo donde muestren como activarlo y presentar el menú.

Así que ya no se por donde tirar; te voy a pasar una pagina por mp porque no esta creada por mi, para que le eches un vistazo, si puedes los mp porque te envie uno para preguntarte una cosa y veo que no te ha llegado.

Y por lo que veo, los "includes" igual cuando estuve probando no los utilice bien, porque no llegue a mostrar los menús.

No he querido comentar antes nada porque pensaba que no sería importante, y posiblemente liaría mas la cosa, el menú que tengo creado está adaptado para ser utilizado en móviles y tablet, y como ya he comentado no es para alojar las paginas en un servidor, es para uso personal, por lo que el destino final es crear una aplicación para android con estas páginas, y así poder llevar la documentación en el móvil o tablet.

Donde puedo ver cómo utilizar los “Includes” para incorporar los menus al resto de paginas ?

Salu2.

mpozo · #10 (**permalink**) 08/02/2017, 10:55

Una alternativa a aplicar html imports http://www.w3schools.com/howto/howto_html_include.asp

SoCu · #11 (**permalink**) 08/02/2017, 16:35

Hola mpozo, la verdad que ha sido raro el resultado, no me ha mostrado bien el resultado porque para mi que faltan algunos script de web components y polymer para que muestra bien el menu.

Lo curioso es que lo ha mostrado en firefox aunque mal y teniendo que seleccionar la opción del menú para que lo muestre, digo que curioso porque en Chrome esta vez no muestra nada.

Salu2l

Rafael · #12 (**permalink**) 08/02/2017, 17:34

Estoy editando una respuesta acá: http://www.forosdelweb.com/f91/hable...0/#post4417091 dentro del mismo post que te mandé. Deja lo completo, ya que ciertamente hay que hacer varias cosas antes de poder usarlos.

SoCu · #13 (**permalink**) 09/02/2017, 00:46

Hola Rafael, un par de preguntas, estoy utilizando como servidor XAMPP https://www.apachefriends.org/es/index.html, me imagino que con este tambien me servira, no?

Y para el tema del Include, veo que el archivo index.html tiene que ser index.php para poder utilizar el include, lo malo es que en este caso no puedo utilizar PHP :(

No se podria utilizar para paginas HTML por ejemplo si el menu esta en el index.html 

Lo he probado pero se ve que no esta bien porque cuando pongo el codigo  en el editor Sublime se queda en gris, como si no fuese correcto.

Salu2.

mpozo · #14 (**permalink**) 09/02/2017, 14:57

Cita:

Iniciado por SoCu

Hola mpozo, la verdad que ha sido raro el resultado, no me ha mostrado bien el resultado porque para mi que faltan algunos script de web components y polymer para que muestra bien el menu.

Lo curioso es que lo ha mostrado en firefox aunque mal y teniendo que seleccionar la opción del menú para que lo muestre, digo que curioso porque en Chrome esta vez no muestra nada.

Salu2l

Este tema ya toma un cariz absurdo. Sube los dos archivos a tu servidor y pruebalos

prueba.html

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <script src="http://www.w3schools.com/lib/w3data.js"></script>
    </head>
    <body>
 
        <div w3-include-html="menu.html"></div>
 
 
        <script>
            w3IncludeHTML();
        </script>
 
    </body>
</html>

menu.html

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
    </head>
    <body>
 
 
<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>
 
        
 
 
    </body>
</html>

SoCu · #15 (**permalink**) 10/02/2017, 04:59

No se que pasa pero si no creo primero el post con un texto y luego lo edito, no puedo postear en el foro.

http://www.forosdelweb.com/f4/como-poner-menu-resto-paginas-1156912/#post4812420

Gracias mpozo, igual para ti es absurdo, pero creo que debes comprender que los que intentamos aprender nos cuente un poco mas comprender esas instrucciones o códigos que los entendidos en la materia explica y va dirigida para los mas expertos.

Con el codigo que has puesto, como ya he comentado mas arriba no me esta dando el mismo resultado; y sigo sin entender porque, y como Rafael ha comentado lo del servidor, he instalado Xampp y estoy probando la pagina en él, el menú lo muestra en la pagina del index.html, pero cuando paso a atro pagina del menú, el menú desaparece.
En cambio si la pagina la pruebo desde el navegador "fuera del Xampp", el menu se muestra bien en las dos paginas; y no se porque, no se tendria que mostrar mejor en el servidor Xampp ?

Y donde no consigo que el menu aparezca, tanto si utilizo el servidor como si no, es esta pagina pagina, dejo el codigo por si me podecir dar alguna solución

Código HTML:

<!DOCTYPE html>
<html lang="es">

<head>
<title>RCF</title>
<script type="text/javascript" language="JavaScript">
    function DoOnLoad()
    {
    }
    function DoOnMainLoad()
    {
      var param = location.hash;
      if (param.length != 0)
        window.document.getElementById("right").src = param.substring(1);
    }
</script>
    
</head>

  <frameset cols="25%,*" framespacing="1">
    <frame name="left" id="left" src="toc.html" frameborder="0">
    <frame name="right" id="right" src="mnk_21_2.htm" frameborder="0" onload="DoOnLoad()">
    <noframes>
      Su navegador no maneja marcos! Esta característica es necesaria para ver este manual.
    </noframes>
  </frameset>

</body>
</html>

Esta pagina muestra dos paginas mas mediante frameset, y no contiene la etiqueta <body>, he probado colocando la etiqueta, y si pongo el menu dentro de ella, o bien aparece el contenido de esas dos paginas, o bien aparece el menu, pero no los dos juntos.

SoCu · #16 (**permalink**) 10/02/2017, 05:32

Lo siento pero no puedo editar el post anteior para quitar el link que aparece a este mismo post.

Cando me muestra esa pagina para confirmar lo del robot, cuando la confirmo se queda la pagina en blanco y no puedo hacer nada.

Turdo · #17 (**permalink**) 10/02/2017, 14:02

SoCu volviendo al tema original, y disculpa si está a destiempo. Veo muy malas practicas en todo lo que te han comentado y llevándote a complicar las cosas.

Olvidemonos de XAMPP, includes y objetos ademas de la recomendación de no usar iframes ya que es creo que es la mejor alternativa.

A hora me explico; nadie te ha hablado del atributotargetde la famosa etiqueta <a> y el atributo name de casi todos los elementos HTML.

Aquí te dejo un ejemplo de como se estructuraría la pagina:

index.html (donde va el menú y el iframe)
organizas tu menu con <a>

Código HTML:

Ver original<a href="pagina1.html" target="eliframe">pagina1</a>
<a href="pagina2.html" target="eliframe">pagina2</a>
...
<a href="paginaN.html" target="eliframe">paginaN</a>
 
<iframe allowtransparency="allowtransparency" name="eliframe" scrolling="no" frameborder="0"></iframe>

Te explico: al darle un nombre al iframe con la propiedad name podemos manipularlo y tener mas capacidades como por ejemplo cargar una pagina o sitio entero dentro de el. Regularmente el atributo name se utiliza para hacer anclas dentro del documento.

Así mismo el atributo target como su nombre lo sugiere es a puntar a algo en este caso a el iframe por medio de su nombre el cual le pusimos "eliframe". Entonces cuando le des clic a una enlace este cargara dentro del iframe y el menú seguirá donde mismo.

Ya es de ti maquillar y darle altura y ancho a cada parte. Saludos!

SoCu · #18 (**permalink**) 11/02/2017, 02:55

Hola Turdo, y gracias, voy a probar con el target y name, pero me temo que no va a funcionar bien, cuando estuve probando el iframe los contenidos de las paginas dejaban un margen entre el menu el contenido, y como el menu a su vez lleva submenus, cuando se desplegaba aparecía una barra de desplazamiento lateral.

P.D. no se si voy a poder posrtear esto, si me extiendo la pagina se bloquea.

Voy editar el post a ver si me deja poner esta duda.

Turdo la forma de crear el menu que comentas, seria la de copiar todo el codigo del menu a todas las paginas, no?

Salu2.

Rafael · #19 (**permalink**) 11/02/2017, 16:06

1) Usar un Iframe es lo que es mala práctica. La realidad es de que siento ese comentario completamente absurdo.

---

2) La opción de mpozo es la de usar una librería Javascript que importa el otro documento dentro del html.

La librería es esta: http://www.w3schools.com/lib/w3data.js

Y entonces jala el contenido de menu.html usando el atributo gnenerado: w3-include-html.

Esta opción no necesita estar en un servidor. Aunque la realidad es de que casi nadie va a desactivar el JavaScript, depende de él.

---

Me regreso a la pregunta del servidor.

Normalmente un servidor lo puedes configurar para que también "interprete y procese" los archivos con extensión html, pero nativamente si tienen extensión php es cómo los procesa. Lo puedes cambiar después, pero tal vez en el servidor final donde subes tus archivos, no puedas hacer el mismo ajuste.

Proceso para XAMPP:

1) El programa se instala en c:/xampp

2) Y los archivos que tú vas a ver están en c:/xampp/htdocs

En esa carpeta ya tienes algunas cosas dentro. Puedes hacer una nueva carpeta y aventar todo lo de ahí en esa carpeta nueva.

c:/xampp/htdocs/EstaCarpetaEsLoQueVenia

Al iniciar el xampp y escribir en tu navegador 127.0.0.1 vas a ver esa carpeta.

3) Haz ahora dos archivos sumamente simples:

a) menu.htm

Código HTML:

Ver original<h2>Este Texto está siendo "incluido"</h2>

b) y otro Prueba.php con:

Código HTML:

Ver original<h1>Texto Normalito</h1>
 
<?php include "menu.htm" ?>
 
<h1>Texto Normalito</h1>

Pon los dos en esa carpeta.

4) Ahora, actualiza tu navegador y pícale a Prueba.php.

SoCu · #20 (**permalink**) 11/02/2017, 17:08

Hola Rafale, ya he comentado que PHP no puedo utilizarlo.

Salu2.

Turdo · #21 (**permalink**) 11/02/2017, 17:26

Cita:

Turdo la forma de crear el menu que comentas, seria la de copiar todo el codigo del menu a todas las paginas, no?

Salu2.

Hola SoCu. No solo en el index. Ya que el index nuca cambia no se vuelve a cargar a menos que actualices la toda la pagina.

dardosmania · #22 (**permalink**) 12/02/2017, 12:45

Buenas

Me he leído por encima el tema y me parece que se esta intentando reinventar la rueda, si se quiere hacer sin usar JS no hay otra que usar un iframe y manejarlo con los links del menu pero si ya nos ponemos a usar JS para eso están las SPA, se que eso conlleva aprender una librería pero hay algunas que con 1 - 2 días hubieses conseguido hacer lo que te propones.

SoCu · #23 (**permalink**) 13/02/2017, 08:12

Hola dardosmania, el menu utiliza jquery-latest.js mas otra creada para configura el menu main.js, no se si a eso te refieres con aprender una liberia.

Salui2.

dardosmania · #24 (**permalink**) 14/02/2017, 15:19

Yo me referia mas a una libreria js que te permita generar una SPA, ya que lo que se quiere realizar es el flujo normal de una SPA. Librerias como Knockout (facil de aprender) o ya si quieres un rendimiento increible React.js, esta es un poco mas compleja de aprender pero se hace muy rapido y es increiblemente rapida.

Rafael · #25 (**permalink**) 17/02/2017, 14:57

A ver, me encontré una cosa interesante.

Poner menús en JavaScript es no lo óptimo, pero tal vez para este caso, para un uso muy local sí sea una fácil opción.

Una complicación es que en general no se puede poner varias líneas dentro del JavaScript, pero hay un tipo de variable que sí permite poner varias líneas.

Puedes generar un archivo menu.js con esto dentro:

Código Javascript:

Ver originalvar menu = `
  <div>
    <h1>Este texto está contenido en el JavaScript.</h1>
    <p>También dentro del JavaScript.</p>
  </div>
`;

Tiene una comilla especial que permite multilínea.

Y en cada página agrega un par de líneas:

En el head:

Código HTML:

Ver original<script src="menu.js"></script>

Y donde quieras que vaya el menú

Código HTML:

Ver original<div id="demo"></div>
<script>
document.getElementById("demo").innerHTML = menu;
</script>

Así podrás actualizar fácilmente el menú en un sólo archivo. Te cuidado con el uso de comillas.

Y bueno, releyendo, si sólo es para tí, y no para un sitio web en forma, tal vez la opción de Torudo no está "tan" mal.

caricatos · #26 (**permalink**) 17/02/2017, 16:56

Hola:

Siendo moderador del foro javascripit, me siento obligado a avisar de que javascript se puede desactivar en los navegadores... y según los contenidos, yo mismo suelo desactivarlo (mi ejemplo favorito es el script de la "mosca cojonera")... es más, una buena página con javascript debería complementarse con etiquetas noscript.

Saludos

SoCu · #27 (**permalink**) 18/02/2017, 05:52

Gracias, luego miro lo que comentas, estoy viendo el menú de Turdo, pero se ha quedado un poco parada la cosa, a ver si se resuelve un pequeño contratiempo y se puede seguir viendo esa opción.

Salu2.

mpozo · #28 (**permalink**) 18/02/2017, 07:52

Cita:

Iniciado por Rafael

A ver, me encontré una cosa interesante.

Poner menús en JavaScript es no lo óptimo, pero tal vez para este caso, para un uso muy local sí sea una fácil opción.

Sí, es otra manera, horrorosa, pero es otra manera. Lo mismo pero con un archivo .txt
http://www.forosdelweb.com/f13/leer-...0/#post4809777

Cita:

Iniciado por Rafael

Una complicación es que en general no se puede poner varias líneas dentro del JavaScript, pero hay un tipo de variable que sí permite poner varias líneas.

[...]

Tiene una comilla especial que permite multilínea.

Se puede concatenar

Código Javascript:

Ver originalvar menu = '<div>' + 
    '<h1>Este texto está contenido en el JavaScript.</h1>' +
    '<p>También dentro del JavaScript.</p>' +
  '</div>';

mpozo · #29 (**permalink**) 28/02/2017, 05:51

Otra manera de hacerlo es con pushState https://developer.mozilla.org/es/doc..._del_navegador