Ayuda, cabecera y menu fijo, contenido variable

sergioneg7 · 12 Mar 2012, 15:39 · Solicitar retirada

Hola, estoy haciendo una web, y en esta ocasión quiero que la cabecera y el menu queden fijos, sean visibles siempre, y unicamente cambie el contenido de la web al pinchar sobre las distintas opciones del menu. He estado leyendo y he visto que hay formas como los Frame, pero que no los aconsejan, con codigo javascrip (pero no consigo ninguno). Yo utilizo lenguaje HTML, con el Dreamweaver y hoja de estilos CSS. ¿Alguien me podria decir como consigo hacer mi cabecera y menu fijos y que unicamente me cargue el contenido web en un <div..> o que forma hay?
Espero haberme explicado correctamente, y me puedan ayudar.

Muchas gracias de antemano.

skaparate · 12 Mar 2012, 17:16 · Solicitar retirada

Hola:

Haz una plantilla con lo que quieres dejar fijo. Después, copia y pega esto dentro del <head></head>: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>. Esto incluirá un framework para javascript llamado jQuery. El framework es una simplificación de todo lo que se puede hacer con Javascript.

Crea el contenido de los archivos que quieres variar. Hay dos formas de hacerlo: crear un archivo .html para cada uno o crear un solo .html e incluir el contenido dependiendo del id. Mejor un ejemplo:

Un html para cada uno

<!-- CONTENIDO QUE NO CAMBIA -->
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Título</title>
    <script type="text/javascript">
      $(document).ready(function() {
        var url = 'http://misitio.algo/';
	$('#navegacion li a').click(function(e) {
		e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
		var href = url + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
		$('#contenido').empty(); // Limpia el div 'contenido'
		$('#contenido').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
	});
      });    
    </script>
  </head>
  <body>
    <div id="cabecera">contenido...</div>
    <div id="navegacion">
      <ul>
        <li><a href='#'>Inicio</a></li>
        <li><a href='pagina1.html'>Pagina1</a></li>
        <li><a href='pagina2.html'>Pagina2</a></li>
      </ul>
    </div>
    <div id="contenido">
    </div>
  </body>
</html>

pagina1.html

<h1>Este es el contenido de la página 1</h1> <!-- como ves, no necesita estar envuelto en el resto de las etiquetas, pues estarán en el contenido fijo -->

La otra forma de hacerlo es así:

<!-- CONTENIDO QUE NO CAMBIA -->
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Título</title>
    <script type="text/javascript">
      $(document).ready(function() {
        var url = 'http://misitio.algo/';
	$('#navegacion li a').click(function(e) {
		e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
		var href = url + 'contenido.html ' + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
                // La línea anterior quedaría así si se clickea en inicio:
                // href = http://misitio.algo/contenido.html #inicio
                // Lo que cargará el contenido del div inicio dentro del contenido.
                console.log(href);
		$('#contenido').empty(); // Limpia el div 'contenido'
		$('#contenido').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
	});
      });    
    </script>
  </head>
  <body>
    <div id="cabecera">contenido...</div>
    <div id="navegacion">
      <ul>
        <li><a href='#inicio'>Inicio</a></li>
        <li><a href='#pagina1'>Pagina1</a></li>
        <li><a href='#pagina2'>Pagina2</a></li>
      </ul>
    </div>
    <div id="contenido">
    </div>
  </body>
</html>

contenido.html

<div id="inicio"><h1>Contenido página principal</h1></div>
<div id="pagina1"><h1>Este es el contenido de la página 1</h1></div>
<div id="pagina2"><h1>Este sería el contenido de la página 2</h1></div>

Espero que te sirva. Si tienes más preguntas, ya sabes donde preguntar XD.

Saludos.

sergioneg7 · 13 Mar 2012, 11:50 · Solicitar retirada

Hola, antes de nada muchas gracias por su respuesta.

Me surgen un par de preguntas:

1º ¿El contenido fijo, que es la cabecera con el logo y el menu, lo escribo dentro del <body> </body>?. Muestro mi codigo html:
<body>
<div id="header">
<div id="logo1"></div>
<div id="menu"></div>
</div>
{Esta parte quiero que se muestra fija en la parte superior y centrada}

<div id="mainContent"></div>
{Este es el div donde van los contenidos modificables segun el apartado del menu.}

<div id="footer"></div>
{El pie de página que también va fijo.}
</body>

2º.En la archivo .html con cada contenido, por ejemplo: "materias.html" ; ¿únicamente habría que escribir el codigo para el div id="mainContent"? ¿sin escribir nada sobre la cabecera ni menu ni nada?

3º. Pongo en rojo las partes a modificar del codigo java para ver si son las correctas:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Título</title>
<script type="text/javascript">
$(document).ready(function() {
var url = '¿LA URL DE MI WEB?';
$('#navegacion li a').click(function(e) {
e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
var href = url + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado. Aqui no se que hay que poner.
$('#mainContent').empty(); // Limpia el div 'contenido'
$('#mainContent').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
});
});
</script>

Si me puedes ayudar con esta nueva consulta, te estaría muy muy agradecido. En resumen es: tengo bien escrito el codigo html fijo dentro del body. En los nuevos archivos ".html" solo hay que escribir el div en cuestión y ¿las partes en rojo del codigo script son las que hay que modificar?

Saludos y gracias ¡¡¡

skaparate · 13 Mar 2012, 16:00 · Solicitar retirada

Ok, vamos a ver...

1º ¿El contenido fijo, que es la cabecera con el logo y el menu, lo escribo dentro del <body> </body>?. Muestro mi codigo html:

El código HTML está bien. En el fondo, la estructura del archivo principal (donde se cargará el resto del contenido) debe ser igual a la que te dejé yo, cambiando los nombres de los divs y/o agregando contenido si quieres:

<!-- CONTENIDO QUE NO CAMBIA -->
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Título</title>
    <script type="text/javascript">
      $(document).ready(function() {

        var url = 'http://misitio.algo/';

	$('#menu a').click(function(e) { // Al hace click sobre un enlace dentro del menú
		e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
		var href = url + 'contenido.html ' + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
                // La línea anterior quedaría así si se clickea en inicio:
                // href = http://misitio.algo/contenido.html #inicio
                // Lo que cargará el contenido del div inicio dentro del contenido.
                console.log(href);
		$('#main-content').empty(); // Limpia el div 'contenido'
		$('#main-content').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
	});
      });    
    </script>
  </head>
  <body>
    <div id="header"></div>
    <div id="menu">
      <ul>
        <li><a href='#inicio'>Inicio</a></li>
        <li><a href='#pagina1'>Pagina1</a></li>
        <li><a href='#pagina2'>Pagina2</a></li>
      </ul>
    </div>
    <div id="main-content">
      <!-- AQUÍ SE CARGARÍA EL CONTENIDO -->
    </div>
    <div id="footer"></div>
  </body>
</html>

2º.En la archivo .html con cada contenido, por ejemplo: "materias.html" ; ¿únicamente habría que escribir el codigo para el div id="mainContent"? ¿sin escribir nada sobre la cabecera ni menu ni nada?

Exactamente :D.

3º. Pongo en rojo las partes a modificar del codigo java para ver si son las correctas:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>Título</title>
<script type="text/javascript">
$(document).ready(function() {
var url = '¿LA URL DE MI WEB?';
$('#navegacion li a').click(function(e) {
e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
var href = url + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado. Aqui no se que hay que poner.
$('#mainContent').empty(); // Limpia el div 'contenido'
$('#mainContent').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
});
});
</script>

En la línea var url = ... sí, debes poner la url de tu sitio web. Específicamente, debes poner la ruta a la carpeta donde estarán los archivos con el contenido dinámico. Ejemplo: si tienes el/los archivos en la carpeta public_html (la base de tu sitio), entonces escribes la url http://misitio.com/; pero si tienes el/los archivos dentro de una carpeta llamada, por ejemplo, contenido-dinamico dentro de public_html, entonces la url sería http://misitio.com/contenido-dinamico/.

var href = url + $(this).attr('href'); ese valor no cambia. 'href' es el atributo donde va el enlace de las etiquetas <a>. Si tienes un enlace <a href='http://google.com/'>Google</a> y escribes dentro de <script> esto: $('a').attr('href'); te devolverá el valor http://google.com/ (o lo que sea que haya dentro de href). Si tuvieras un enlace <a href='materias.html'>Materias</a> la línea que estoy explicando devolvería esto: http://misitio.com/materias.html.

$('#mainContent').empty(); debes sustituirlo por el nombre del div que cargará el contenido dinámico. En otras palabras, si utilizas la misma estructura que planteas, el valor mainContent está bien.

Espero que te haya quedado claro :D, si no, pregunta nuevamente.

Saludos.

skaparate · 14 Mar 2012, 17:02 · Solicitar retirada

Lo que pasa es que no entendiste esta línea de mi primer respuesta:

Crea el contenido de los archivos que quieres variar. Hay dos formas de hacerlo: crear un archivo .html para cada uno o crear un solo .html e incluir el contenido dependiendo del id

Como dice: puedes crear un archivo nombre.html para cada sección (llámese noticias.html, portada.html, etcétera.html) con el contenido que aparecerá dentro del div mainContent o puedes crear un único archivo (de nombre contenid.html, por ejemplo) y ahí incluir varias divs (con un id: <div id="noticias"></div>, <div id="portada"></div>, <div id="etcétera"></div>).

Para no seguir complicándote :P, el script no funcionará si no esta en un servidor (ya te diste cuenta de eso :P), pero sí funcionará. El siguiente código se puede ver en funcionamiento en http://pcpruebas.uphero.com/:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Inicio</title>
    <script type="text/javascript">
      $(document).ready(function() {
        var url = '[COLOR="#FF0000"]http://pcpruebas.uphero.com/contenido.html[/COLOR]'; // Solo cambia lo que esta en rojo por tu url (cuando la tengas)
				
				$('#navegacion li a').click(function(e) {
					e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
					var href = url + " #" + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
					console.log(href);
					$('#contenido').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
				});
				
      });    
    </script>
  </head>
  <body>
    <div id="cabecera">contenido...</div>
    <div id="navegacion"><!-- Puedes cambiar los nombres aquí, pero recuerda cambiarlos en el script (#navegacion) -->
      <ul>
        <li><a href='inicio'>Inicio</a></li>
        <li><a href='noticias'>Noticias</a></li>
        <li><a href='etcetera'>Etc&acute;tera</a></li>
      </ul>
    </div>
    <div id="contenido"></div>
  </body>
</html>

El siguiente es el contenido del archivo contenido.html:

<div id="inicio">
	<h1>INICIO</h1>
	<p>Aqu&iacute; ir&iacute;a el inicio</p>
</div>

<div id="noticias">
	<h1>NOTICIAS</h1>
	<p>Aqu&iacute; ir&iacute;an las noticias</p>
</div>

<div id="etcetera">
	<h1>ETC&Eacute;TERA</h1>
	<p>Aqu&iacute; ir&iacute;a etc&eacute;tera</p>
</div>

Aquí pondrías lo que se te antoje, solo tendrías que actualizar el menú. Si sabes inglés, puedes leer la documentación de la función .load, de lo contrario, búscala aquí. Espero que te quede más claro :P.

chaki78 · 31 Oct 2012, 15:46 · Solicitar retirada

hola... Estoy haciendo una pagina web, he logrado dejar la cabecera y el menu fijo, tal como lo propones con el código, pero mi consulta es que no logro mostrar el archivo.html, para cada caso del menú, al colocar la var url = 'http://localhost/php2/registro/'; ,( esta es mi dirección porque solo la corro en el servidor) efectivamente me muestra bajo la cabecera y el menu, los archivos contenidos en dicha carpeta, donde están los archivos.html. Anexo el código para ver si me pueden ayudar a ver donde esta el error. Gracias

<script type="text/javascript">
$(document).ready(function() {
var url = 'http://localhost/php2/registro/';
$('#menu a').click(function(e) {
e.preventDefault(); // Previene la acción por defecto, que sería enviarte a otra página
var href = url + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado
$('#contenido').empty(); // Limpia el div 'contenido'
$('#contenido').load(href); // Esta línea simplemente carga el contenido dentro del div 'contenido'
});
});
</script>

skaparate · 31 Oct 2012, 19:39 · Solicitar retirada

@chaki78: podrías publicar el código HTML donde aparece el menú? A simple vista es lo que publiqué hace tiempo y sé que funciona, así que tienes que asegurarte de que esta línea

var href = url + $(this).attr('href'); // Esta línea extrae el contenido del atributo href del enlace clickeado

produzca el contenido deseado. Algo así: http://localhost/php2/registro/contenido_href_enlace_menu.algo. Escribe esto luego de la línea anterior para saber si funciona como debe:

alert(href);

Es para que aparezca una ventana mostrando el contenido.

Endika · 1 Nov 2012, 13:00 · Solicitar retirada

yo esto mismo lo hago con php, le pongo un include segun las paginas q tenga.

McMardigan · 19 Jun 2013, 14:10 · Solicitar retirada

Hola buenas, antes de nada decir que esta información me ha sido muy útil, pero tengo un problema.

Seguí los pasos que puso skaparate y todo me fue perfectamente, el problema es que no me reconoce las tildes en las páginas que se cargan en el div contenido, y creo que si debería por que en la cabecera de la parte fija tengo puesto: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">, y según dices los archivos que se cargan el contenido no necesitan cabecera porque utilizan la de la parte fija.

Un saludo y gracias de antemano.

andresmorat · 15 Jun 2016, 01:13 · Solicitar retirada

Hola a todos.

Tengo un sitio en Wordpress y deseo hacer lo mismo propuesto en el tema.

Como puedo implementar esta solución teniendo en cuenta que el arbol de Wordpress es completamente diferente?

Gracias de antemano!!

skaparate · 15 Jun 2016, 05:34 · Solicitar retirada

@andresmorat,

Wordpress ya funciona de esta manera: cabecera y menú fijo, contenido variable. Explica mejor lo que tienes ahora y lo que pretendes lograr :)

Saludos.

andresmorat · 15 Jun 2016, 17:20 · Solicitar retirada

skaparate escribió:@andresmorat,

Wordpress ya funciona de esta manera: cabecera y menú fijo, contenido variable. Explica mejor lo que tienes ahora y lo que pretendes lograr :)

Saludos.

Skaparate, gracias por responder!!

Tengo un tema que ya hace el menu pegajoso o sticky pero te pongo en contexto.

Lo que quiero es que al navegar dentro de la web, clickear noticias, páginas y otros contenidos me mantenga siempre activo el header, ya que allí se encuentra un reproductor de audio y deseo que la reproducción sea constante y no se corte cada vez que cambio de noticia.

El tema es: http://qantumthemes.com/demo/onair/

He visto algunos temas que ya cuentan con un sistema similar al que deseo, un ejemplo de ello es este: http://qantumthemes.com/music-wordpress-theme/slam1/

Ojalá me haga entender!

Mil gracias!

skaparate · 15 Jun 2016, 18:00 · Solicitar retirada

@andresmorat,

Ah! Ahora entiendo mejor. Lo que buscas es un tema SPA (single page application). El tema que hace lo que quieres utiliza JavaScript (junto a algún framework - jQuery, BackboneJs, AngularJs, etc.).

Hay dos formas de hacerlo: JavaScript y la etiqueta iframe (junto a JavaScript - aunque mucho más simplificado (y poco atractivo) que la primera opción). Dependiendo de cuánto sepas de la API de Wordpress, la solución puede o no ser simple, pero no deja de ser un proceso largo. Lo más simple, creo, es utilizar un tema que ya haga lo que quieres y modificarlo para que utilice tu contenido, pues de otra forma tendrías que aprender mucho o pagarle a alguien para que lo haga.

Sin importar la opción que elijas, debes aprender a utilizar la API de Wordpress. Luego, si optas por Javascript, te podría recomendar que aprendas AngularJS (que es la librería/framework que he utilizado). Si optas por el iframe, necesitarías aprender a manipular los atributos del iframe y recargarlo con Javascript para que funcione.

Espero que te sirva,

Saludos.