Ayuda a poner un menu en todas las paginas

Iniciado por SoCu, Enero 09, 2017, 03:25:31 PM

Tema anterior - Siguiente tema

0 Miembros y 2 Visitantes están viendo este tema.

Enero 09, 2017, 03:25:31 PM Ultima modificación: Enero 11, 2017, 10:00:13 AM por HATI
Hola, antes de nada, personar si este no es su sitio para preguntarlo, no sabía dónde ponerlo.

Os cuento... partiendo de que no se mucho de programación he visto un tutorial para crear un menú adaptable en html, y después de ponerle los links a las páginas web, he visto que ese menú desaparece cuando voy a la nueva página.

He intentado buscar ver soluciones y probarlas, pero una de dos, o no son para lo que quiero hacer, o lo estoy haciendo mal.

En alguna ocasión he podido ver el menú en la página que he puesto, pero lo he visto mal, ya que esa página tiene dos columnas, muestra dos páginas.

He visto también No tienes permitido ver los links. Registrarse o Entrar a mi cuenta sobre esto,

Pero las páginas que yo tengo son html, y también tengo que decir que las páginas web son para reproducirlas en el pc de forma local, no están ni estarán alojadas en un servidor.


Ya no sé qué más probar, si me podéis ayudar os lo agradecería.

No sé qué datos proporcionaros, ahora no estoy en casa, si queréis puedo subir unos archivos con el código en lugar de ponerlo aquí, ya que el menú utiliza también archivo *.js

Pues si quieres hacerlo con html tendrás que copiar el menu en todas las páginas.
También puedes usar php y que la página principal cargue en el centro el resto de las páginas con un include.

Saludos :D
RollthBuen hacker mejor No tienes permitido ver los links. Registrarse o Entrar a mi cuenta/No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Enero 09, 2017, 04:59:07 PM #2 Ultima modificación: Enero 09, 2017, 05:01:43 PM por SoCu
Hola rollth, gracias por responder.

La pagina principal o la que tiene el menú tiene que ser HTML, porque estas paginas las voy a utilizar en otra aplicación, pero de momento este tema lo dejamos, no lo he querido comentar para no liarlo, aunque ésto lo tendría que preguntar por si ponen una nueva opción en esa aplicación.

Lo de copiar ese menú al resto de paginas, no se muy bien que código, si es todo o parte y donde tendría que copiarlo, aunque seria una tarea odiosa porque hay cientos de paginas.

He visto comentarios que dicen que copiando en el resto de paginas este código, el menú aparecería

Código: php

<body>
<!--#include virtual="index.html"-->
</body>


en este caso aunque tendría que abrir pagina por pagina para pegarlo, lo veo mas sencillo porque solo seria una linea, pero no consigo que me funcione.

Tambien con este otro,
Código: php

<body>
<iframe src="index.html" width=90% height=100% align="center" scrolling="no" frameborder="no" ></iframe>
</body>


o bien dentro de un DIV

Código: php

<body>
<div>
<iframe src="index.html" width=90% height=100% align="center" scrolling="no" frameborder="no" ></iframe>
</div>
</body>


Pero se ve que soy un manazas porque tampoco no consigo nada


No se como adjuntar archivos al post, dejo un link con el codigo de lo que estoy haciendo, el menu cuando las paginas se utilizan por ejemplo una tablet, cambia para adaptase y esta escondigo y se muestra vertical.

Código: php

https://drive.google.com/file/d/0B03vYREnP81iVUlocFZreHc4LWs/view?usp=sharing



P.D. donde esta en tu post el boton de dar las gracias que no lo veo.

Salu2.

Si pones terminación .php y añades esto al inicio de cada una te debería de salir el menú, aunque ya te digo que la otra forma de hacerlo en el index la veo mucho más simple, no entiendo el problema de usar .php en una aplicación.

Código: php
<?php

include('index.html');

?>


Saludos, ya me comentarás que tal.
RollthBuen hacker mejor No tienes permitido ver los links. Registrarse o Entrar a mi cuenta/No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Si esa es otra opción que he visto, pero tu dices de poner menos al index.html a todas las demas paginas cambiarlas de extensión por PHP y poner ese codigo, si es así, tendria que cambiar tambien luego todos los link internos que llevan las paginas por php, y eso si que es una gran tarea, cosa que no podría hacer porque cuando cambie algo en las paginas y vuelva a crearlas, se vuelven a crear con html, y los link que llevan dentro también se cambiarían.

Como es la forma mas fácil de hacerlo, copiar el código del index.html en las demás paginas ?

Has visto link con las paginas que he subido ?


Te respondo también a lo de usar .php en una aplicación, como ten digo no quería mezclar temas y alargarme mucho en la explicación, pero veras, cuando consiga poner ese menu para que se muestre siempre en todas las paginas, voy a intentar crear una aplicación para android mediante esas paginas web, y la aplicación va a buscar o bien un index.html o index.htm, por eso lo de tener las paginas en html


Salu2.


@No tienes permitido ver los links. Registrarse o Entrar a mi cuenta lo que tu buscas es trabajar con frames, con los frames == en castellano creas un marco para que me comprendas estático si pulsas en los menus cambias uno de los frames pero los frames encabezados.menus, barras navegación, todo esto se queda inmutable.

Pero el problema que tenemos es la distancia si fueras mi vecino con gusto te ayudaba explicarte como hacerlo por este medio es bastante complicado y arduo

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

@No tienes permitido ver los links. Registrarse o Entrar a mi cuenta si te bajas el archivo con el ejemplo de las paginas web que he puesto mas arriba, y le pones los frame que comentas, podrias repasar el codigo para ver que es lo que has puesto y donde, a ver si así puedo ver lo que tengo que hacer.

Lo que si he visto es algunos comentarios de gente que dice que es mejor usar iframe en lugar de frame, no se si es del todo cierto, no se si es por problemas con algunos navegadores.


Salu2.

Que tal :) !! , espero poder explicarte de la mejor forma posible :) !
lo que tendras que hacer es crear un nuevo documento Html que sera tu index y aparte el documento html para tu menu y otro para el resto de la pagina :) !
entonses supongamos que tenemos:
index.html
menu.html
cuerpo.html
en index.html tendras lo siguiente:
Código: php

<html>
<head>
  <Title>Inicio</Title>
</head>
  <Frameset rows="30%,*" Frameborder="0" border="0">
   <Frame name="opciones" src="menu.html" norsize>
   <Frame name="principal" src="cuerpo.html" norsize>
  </Frameset>
</html>

el atributo rows indica que la division sera en filas, y su valor es el porcentaje de la ventana que ocupara, los atributos frameborder y border con sus respectivos valores sirven para que no se vea la barra con la cual te guias  cuando mueves la rueda del mouse  no sea visible pues es poco estetica. ;)
los frame indican los datos del las divisiones , por eso colocamos primero el menu pues sera el que ocupara solo el 30 % del espacio le asignas un nombre y el archivo .htmlque mostrara la division en este caso el menu.html y posteriormente el resto de la pagina que ocupara el porcentaje restante, de la misma forma le asignas un nombre y el archivo que mostrara :) !
listo :) ! espero te sirva si tienes alguna duda dime :)! , saludos  :) :) ;)

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Que tal :) !! , espero poder explicarte de la mejor forma posible :) !
lo que tendras que hacer es crear un nuevo documento Html que sera tu index y aparte el documento html para tu menu y otro para el resto de la pagina :) !
entonses supongamos que tenemos:
index.html
menu.html
cuerpo.html
en index.html tendras lo siguiente:
Código: php

<html>
<head>
  <Title>Inicio</Title>
</head>
  <Frameset rows="30%,*" Frameborder="0" border="0">
   <Frame name="opciones" src="menu.html" norsize>
   <Frame name="principal" src="cuerpo.html" norsize>
  </Frameset>
</html>

el atributo rows indica que la division sera en filas, y su valor es el porcentaje de la ventana que ocupara, los atributos frameborder y border con sus respectivos valores sirven para que no se vea la barra con la cual te guias  cuando mueves la rueda del mouse  no sea visible pues es poco estetica. ;)
los frame indican los datos del las divisiones , por eso colocamos primero el menu pues sera el que ocupara solo el 30 % del espacio le asignas un nombre y el archivo .htmlque mostrara la division en este caso el menu.html y posteriormente el resto de la pagina que ocupara el porcentaje restante, de la misma forma le asignas un nombre y el archivo que mostrara :) !
listo :) ! espero te sirva si tienes alguna duda dime :)! , saludos  :) :) ;)

De +10 
No lo hubiera podido hacer mejor esto es lo que le expliqué.
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Que tal :) !! , espero poder explicarte de la mejor forma posible :) !
lo que tendras que hacer es crear un nuevo documento Html que sera tu index y aparte el documento html para tu menu y otro para el resto de la pagina :) !
entonses supongamos que tenemos:
index.html
menu.html
cuerpo.html
en index.html tendras lo siguiente:
Código: php

<html>
<head>
  <Title>Inicio</Title>
</head>
  <Frameset rows="30%,*" Frameborder="0" border="0">
   <Frame name="opciones" src="menu.html" norsize>
   <Frame name="principal" src="cuerpo.html" norsize>
  </Frameset>
</html>

el atributo rows indica que la division sera en filas, y su valor es el porcentaje de la ventana que ocupara, los atributos frameborder y border con sus respectivos valores sirven para que no se vea la barra con la cual te guias  cuando mueves la rueda del mouse  no sea visible pues es poco estetica. ;)
los frame indican los datos del las divisiones , por eso colocamos primero el menu pues sera el que ocupara solo el 30 % del espacio le asignas un nombre y el archivo .htmlque mostrara la division en este caso el menu.html y posteriormente el resto de la pagina que ocupara el porcentaje restante, de la misma forma le asignas un nombre y el archivo que mostrara :) !
listo :) ! espero te sirva si tienes alguna duda dime :)! , saludos  :) :) ;)

De +10 
No lo hubiera podido hacer mejor esto es lo que le expliqué.

Creo que esto es suficiente para dar como solucionado.
Si sigues teniedo dudas puedes continuar en este hilo.

Saludos.
RollthBuen hacker mejor No tienes permitido ver los links. Registrarse o Entrar a mi cuenta/No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Que tal :) !! , espero poder explicarte de la mejor forma posible :) !
lo que tendras que hacer es crear un nuevo documento Html que sera tu index y aparte el documento html para tu menu y otro para el resto de la pagina :) !
entonses supongamos que tenemos:
index.html
menu.html
cuerpo.html
en index.html tendras lo siguiente:
Código: php

<html>
<head>
  <Title>Inicio</Title>
</head>
  <Frameset rows="30%,*" Frameborder="0" border="0">
   <Frame name="opciones" src="menu.html" norsize>
   <Frame name="principal" src="cuerpo.html" norsize>
  </Frameset>
</html>

el atributo rows indica que la division sera en filas, y su valor es el porcentaje de la ventana que ocupara, los atributos frameborder y border con sus respectivos valores sirven para que no se vea la barra con la cual te guias  cuando mueves la rueda del mouse  no sea visible pues es poco estetica. ;)
los frame indican los datos del las divisiones , por eso colocamos primero el menu pues sera el que ocupara solo el 30 % del espacio le asignas un nombre y el archivo .htmlque mostrara la division en este caso el menu.html y posteriormente el resto de la pagina que ocupara el porcentaje restante, de la misma forma le asignas un nombre y el archivo que mostrara :) !
listo :) ! espero te sirva si tienes alguna duda dime :)! , saludos  :) :) ;)

Hola @Slenderhack,

Me parece muy buena la solución. Pero porque usar frame y no include() en PHP?
De esa forma podrías tener el menu.html y desde el index.php con la función include, incluyes el menú.

Saludos!
ANTRAX


Enero 10, 2017, 05:32:59 AM #11 Ultima modificación: Enero 10, 2017, 05:42:44 AM por SoCu
Hola, solo quería daros nuevamente las gracias, porque ahora no puedo probarlo, voy a copiar la pagina y esta tarde en el curro lo pruebo porque ahí no tengo Internet.

Pero veo que tiene el mismo código que lleva una de las paginas que pongo en el ejemplo "rcf.html", que divide la pagina en dos columnas, he puesto esas paginas porque al tener dos columnas es donde mas problemas tengo para colocar el menu en la parte de arriba, esas paginas las lleva porque se trata de un manual con su menu independiente del principal, pero normalmente solo tiene una pagina donde tengo que colocar unas tablas, vamos que solo lleva lo que seria el cuerpo sin menu en el lado izquierdo.

El menú que pongo en el ejemplo se muestra en la parte superior, es el que se tiene que ver siempre, y cuando el navegador/pantalla cambie de tamaño por debajo de los 800px el menú se esconde y al pulsar en la parte superior se muestra por el lado izquierdo.

Si probáis ese ejemplo y poder visualizar el menú en forma de móvil puedes cambiar el tamaño horizontal de la ventana de tu navegador o en firefox presiona Ctrl + Shift + M, esto te abrirá el modo de visualización para diferentes pantallas y hay podrás jugar con el ancho de la ventana.


Salu2.

compañeros he querido hacer una prueba antes de marcharme, y la verdad que tenia ganas de ver si era esto lo que intento hacer, y asi liarme a modificar las paginas esta tarde, y por otro lado responderos desde casa porque odio escribir desde el movil.

Y creo que hay que quitar la etiqueta de [solucionado], como he comentado en el post anterior no es asi como tiene que trabajar el menú, por favor si miráis el archivo con las paginas que he puesto para no tener que escribir el codigo se puede ver como trabaja el ese menu.

Tengo un link de la pagina donde esta puesto tambien una demo, pero no lo he puesto por si meto la pata y pongo spam.



Salu2.


uffff oye oye, sé que los frames son (eran realmente) algo de utilidad, a estas alturas, no lo recomendaría usar... mejor como dice antrax usar include o require, en caso de no poder hacer uso de PHP siempre puedes trabajarlo con javascript. Por ejemplo con el load de jQuery, o así:

Código: javascript
document.getElementById("div_del_menu").innerHTML='<object type="text/html" data="menu.html" ></object>';


Saludos

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Acepta con humildad y aprecio que en la vida la muerte es inevitable y amarás ésta, adorando la muerte

Hola, estoy buscando información de como poner los menús con el javascript, y creo que cada vez estoy destrozando mas la pagina  :-[

en el index.html tengo este código

Código: php

.
.
.
<body>
<div id="menu">
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span>Menú</a>
</div>

<nav>
<ul>
<li><a href="index.html"><span class="icon-home"></span>Inicio</a></li>
<li><a href="RCF.html" ><span class="icon-briefcase"></span>RCF</a></li>
<li class="submenu">
<a href="#"><span class="icon-rocket"></span>Proyectos<span class="caret icon-down-open"></span></a>
<ul class="children">
<li><a href="#">SubElemento #1 <span class="icon-dot"></span></a></li>
<li><a href="#">SubElemento #2 <span class="icon-dot"></span></a></li>
<li><a href="#">SubElemento #3 <span class="icon-dot"></span></a></li>
</ul>
</li>
<li><a href="#"><span class="icon-globe"></span>Anagramas</a></li>
<li><a href="#"><span class="icon-mail"></span>Disposiciones</a></li>
</ul>
</nav>
</header>
</div>
</body>
.
.
.


Y en la pagina rcf.html
Código: php

.
.
<head>
<title>RCF</title>
<script type="text/javascript" language="JavaScript">
funtion menu_alto() {
document.getElementById("menu").innerHTML='<object type="text/html" data="index.html" ></object>';
}
</script>

</head>

<script>
menu_alto()
</script>
.
.
.


y cuando en el index pulso en el botón RCF se muestra la otra pagina pero sin el menu, seguro que estoy haciendo algo mal



Salu2.

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Que tal :) !! , espero poder explicarte de la mejor forma posible :) !
lo que tendras que hacer es crear un nuevo documento Html que sera tu index y aparte el documento html para tu menu y otro para el resto de la pagina :) !
entonses supongamos que tenemos:
index.html
menu.html
cuerpo.html
en index.html tendras lo siguiente:
Código: php

<html>
<head>
  <Title>Inicio</Title>
</head>
  <Frameset rows="30%,*" Frameborder="0" border="0">
   <Frame name="opciones" src="menu.html" norsize>
   <Frame name="principal" src="cuerpo.html" norsize>
  </Frameset>
</html>

el atributo rows indica que la division sera en filas, y su valor es el porcentaje de la ventana que ocupara, los atributos frameborder y border con sus respectivos valores sirven para que no se vea la barra con la cual te guias  cuando mueves la rueda del mouse  no sea visible pues es poco estetica. ;)
los frame indican los datos del las divisiones , por eso colocamos primero el menu pues sera el que ocupara solo el 30 % del espacio le asignas un nombre y el archivo .htmlque mostrara la division en este caso el menu.html y posteriormente el resto de la pagina que ocupara el porcentaje restante, de la misma forma le asignas un nombre y el archivo que mostrara :) !
listo :) ! espero te sirva si tienes alguna duda dime :)! , saludos  :) :) ;)

Hola @Slenderhack,

Me parece muy buena la solución. Pero porque usar frame y no include() en PHP?
De esa forma podrías tener el menu.html y desde el index.php con la función include, incluyes el menú.

Saludos!
ANTRAX
Hola @ANTRAX , realmente yo no veo razon para no usar PHP, simplemente el compañero no queria utilizar PHP por eso opine por los frames  ;) !
Saludos  :)  ;D

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
Hola, estoy buscando información de como poner los menús con el javascript, y creo que cada vez estoy destrozando mas la pagina  :-[

en el index.html tengo este código

tendría que de igual forma agregar el script a cada pag, no tienes un script general?, por ejemplo un main o algo así? si no es así, lo que puedes hacer es lo que hiciste del javascript, situarlo en un  archivo aparte y a cada html solo le pondrías:

antes de que cierra la etiqueta </body>

Código: html
...
<script type="text/javascript" src="miscript.js"></script>
</body>


Saludos.

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Acepta con humildad y aprecio que en la vida la muerte es inevitable y amarás ésta, adorando la muerte

Enero 10, 2017, 08:53:03 PM #17 Ultima modificación: Enero 10, 2017, 08:57:28 PM por SoCu
@No tienes permitido ver los links. Registrarse o Entrar a mi cuenta no es que quiera utilizar php, que posiblemente sea mejor solución, lo que pasa que como ya he comentado estas paginas las voy a utilizar para cargarlas en otra aplicación que se va a encargar de crear un apk, y esa aplicación solo admite el index.html o index.htm, ya lo he comentado al creador de esa aplicación a ver si se pueden poner index.php para una proxima actualización, pero mientras, y por si acaso no se pueda utilizar el index.php tendre que hacerlo si el.

@No tienes permitido ver los links. Registrarse o Entrar a mi cuenta, el index.html tengo uno puesto en las etiquetas <head>

Código: php

<head>
<script src="main.js"></script>
</head>


con este código:

Código: php

[code=javascript]$(document).ready(main);

var contador = 1;

function main () {
$('.menu_bar').click(function(){
if (contador == 1) {
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});

// Mostramos y ocultamos submenus
$('.submenu').click(function(){
$(this).children('.children').slideToggle();
});
}




Y seria agregarle el siguiente codigo, no?

funtion menu_alto() {
document.getElementById("menu").innerHTML='<object type="text/html" data="index.html" ></object>';
}


Si es así, donde tengo mi duda es si esta bien puesto el texto menu en document.getElementById("menu") porque el menu no tenia ningun DIV y se lo puse yo, igual puede dar problemas.


No se si se paso por alto el link que puse mas arriba del archivos que contiene las paginas con el ejemplo, como veo que nadie ha comentado nada para hacer las pruebas, lo dejo aqui por si alguien quiere ver el ejemplo

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta



Salu2.

Hola @No tienes permitido ver los links. Registrarse o Entrar a mi cuenta  ya te dije que por este medio es bastante compilicado ayudarte yo mi granito de arena lo voy a poner en hacerte comprender una cosa, que espero te sirva.

Tú tienes un div  o un input en el html asi por ejemplo:

<div name="container"  id="menu1"></div>
<input name="entrada" id="entrada" type="text" value="" placeholder="Rellene este campo"/>

Como puedes apreciar el div y el elemento input tienen cad uno un id  ===  identificador


Pues cuando con javascript haces esto

var  hu3c0=document.getElementById('entrada');

var  hu3c0=document.getElementById('menu1');

Su traducción al lenguaje humano sería mete en la variable hu3co el elemento  obtenido con el id  el que sea.

Con esto estás creando un objeto de div o input para después trabajarlo

Ahora   digo  hu3c0.innerHtml()='<object type="text/html" data="index.html" ></object>';

Te traduzco al lenguaje humano en el espacio inerte html del objeto menu1 o entrada colocamé este objeto html
que te paso.


Después de esta breve explicación espero que comprendas a lo que preguntas que para que te funcione tu código

MENU tiene que ser un identificativo de tu html si no javascript no podrá encontrarlo.

@Saludos


No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Hola Hu3c0 entiendo que la ayuda presencial es mucho más efectiva porque estás viendo los cambios que puede ir haciendo, y tanto a ti como a los demás, os agradezco vuestra ayuda, pero en mi caso a no ser posible como a todos nos gustaría, como parece que no puede ser de otra forma, la única manera que veo es ésta.

Y lo que me explicas dentro de mis posibilidades más o menos puedo entenderlo, teniendo en cuenta de que programación como ya he comentado no sé, por eso para crear páginas web compre la aplicación website x5, que sin saber programar alguna cosa puedo hacer. Y claro cuando ya me sacan de ahí me encuentro perdido, y tengo que preguntar, y dentro de mis posibilidades entenderlo, por lo que tendré que leer varias veces lo que me dices, cosa que para ti puede ser lo más fácil del mundo.

Y como bien dices la distancia es un problema, por eso deje ese archivo por si querías modificarlo, y aunque no fuese presencial, pero por lo menos podía ver esos cambios en el código y ver cómo funciona, y si no entiendo nada preguntar, porque ya lo hice en la web de donde obtuve este código, pero hace dos años desde la última pregunta que hicieron y parece que no están por la labor de responder a lo que preguntan.


Salu2.