Autor Tema: Poner menu en otras paginas con Web Components utilizando solo HTML no otros (Leído 2217 veces)

SoCu · « **en:** 18 de Febrero 2017, 15:57 »

Hola, para algunos puede ser un pequeño contratiempo, para mi tendría que decir que tengo un gran problema porque ya no se por donde meterle mano.

He buscado en el foro y no he visto nada sobre Web Components ni HTML Import, así que antes de nada, mi pregunta es si alguien sabe como con HTML Impor puedo poner un menu en todas las paginas web.

He probado de todo lo que he leido y videos que he visto y ya no se que mas intentar, tengo muchas paginas que son para visualizarlas en local, no van a ningún servidor, y que no tienen menú, quiero poner un menú que esta en una pagina HTML en todas las paginas "no puedo utilizar ningún otro como PHP", así si tengo que poner nuevas opciones al menú, no tenga que modificar pagina por pagina, solo lo cambiaría en la pagina que esta el menú y los cambios se mostrarían en el resto de paginas.

Eso parece que con HTML Import de Web Components se hace sin problemas y fácilmente, pero claro como se suele decir, sera para los entendidos en materia, en mi caso me esta costando encontrar la solución.

Hay alguien que me pueda ayudar a poner ese menú en el resto de paginas?

Gracias anticipadas.

SoCu · « **Respuesta #1 en:** 19 de Febrero 2017, 17:54 »

Bueno como parece que nadie ha tocado los Web components, si se puede hacer de otra forma tambien agradecería su ayuda.

He comentado el sistema de Web components porque los comentarios que he visto dicen que es mejor hacerlo así.

Para no pegar el código que estoy utilizando para el menú, si alguien quiere le puedo subir los archivos con los que estoy realizando las pruebas, y así poder tener todas las paginas sin tener que crearlas.

Un saludo.

pedro,, · « **Respuesta #2 en:** 20 de Febrero 2017, 09:26 »

Hola Socu.

La verdad que sobre importar html no tengo conocimiento, pero siempre puedes probar con iframe, te dejo un ejemplo para que puedas ver el funcionamiento:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
		<style>
			#cabecera{
				text-align: center;
			}
			#pulsadorIzq{
				float: left;
			}
			#contenedorFrames{
				width: 100%;
			}
			.pulsador{
				padding:10px;
				width: auto; 
				display: inline-block;
				margin: 10px; 
				cursor: pointer; color: yellow;
				border-radius: 40px;
				background: purple;
			}
			iframe{
				margin:20px; 
				padding:20px;
				width: 80%; 
				height: 600px;
			}
			.limpiador{
				clear:both;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				iframe = document.getElementsByTagName( "iframe" );
				for (var i = 0; i < iframe.length; i++) {iframe[i].style.background = 'yellow';}
			}
			function ejemplo(destino){
				iframe = document.getElementsByTagName('iframe');
				switch (destino){
					case 1:
						iframe[0].src = 'https://www.aprenderaprogramar.com';
						break;
					case 2:
						iframe[0].src = 'https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=28&Itemid=73';
						break;
					case 3:
						iframe[0].src = 'http://www.discoverychannel.es';
						break;
					case 4:
						iframe[0].src = 'http://www.efe.com';
						break;
					case 5:
						iframe[0].src = 'https://www.aprenderaprogramar.com/foros/index.php';
						break;
					case 6:
						iframe[0].src = 'https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86';
						break;
				}
			}
		</script>
	</head>
	<body>
		<div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>
		<div class="pulsador" onclick="ejemplo(1)">www.aprenderaprogramar.com</div>
		<div class="pulsador" onclick="ejemplo(2)">Quiero aprender a programar</div>
		<div class="pulsador" onclick="ejemplo(3)">www.discoverychannel.es</div>
		<div class="pulsador" onclick="ejemplo(4)">www.efe.com</div>
		<div class="pulsador" onclick="ejemplo(5)">Foros aprenderaprogramar.com</div>
		<div class="pulsador" onclick="ejemplo(6)">Cursos aprenderaprogramar.com</div>
		<div class="limpiador" id = "contenedorFrames">
			<iframe name="aprende1">
				<p>Tu navegador no admite iframes.</p>
			</iframe>
		</div>
	</body>
</html>

Saludos.

SoCu · « **Respuesta #3 en:** 20 de Febrero 2017, 22:03 »

Hola Pedro, aunque ya te pase el archivo con el codigo, para responderte por aqui, y por si alguien mas quiere saber por lo que pregunto y su código, lo pego aqui.

Esta pagina es la que tiene el menu.html, y seria poner el menu en el pagina index.html y en las demas paginas que no lo tienen.
De esa forma sin hay que editar el menú, se editaría solo en el menu.html, y esa modificaciones aparecería en las demas paginas, sin tener que ir editando pagina por pagina.

Pagina MENU.HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head> 
	<meta charset="UTF-8">
	<title>Menu</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="estilos.css">
	<link rel="stylesheet" href="fontello.css">
	<script src="jquery-latest.js"></script>
	<script src="main.js"></script>
</head>

<body>

	<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="pagina1.html"><span class="icon-briefcase"></span>Pagina 1</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="pagina1.html"><span class="icon-globe"></span>Pagina 2</a></li>
				<li><a href="pagina1.html"><span class="icon-mail"></span>Pagina 3</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Poner menu en otras paginas con Web Components utilizando solo HTML no otros (Leído 2217 veces)

SoCu

Poner menu en otras paginas con Web Components utilizando solo HTML no otros

SoCu

Re:Poner menu en otras paginas con Web Components, alguien sabe ?

pedro,,

Re:Poner menu en otras paginas con Web Components, alguien sabe ?

SoCu

Re:Poner menu en otras paginas con Web Components, alguien sabe ?

Preguntas y respuestas