Cómo diseñar el menú de navegación de la página web que ajusta el contenido en una sección separada de la página

Me gustaría crear una página web simple con un diseño de 2 columnas, usando una combinación de HTML / CSS / Javascript / jQuery, en la que una columna contiene un menú de navegación con varios enlaces, y al hacer clic en los enlaces se cambia el contenido del otro columna. ¿Cuál es la mejor manera de hacer esto hoy en día?

Hace mucho tiempo, aprendí a hacer esto con marcos, con el menú en un marco y el contenido en otro, y los elementos del menú rodeados por tags de anclaje de la forma . ¿Supongo que de esta manera todavía es posible?

Algunas personas recomiendan hacer que el menú y las áreas de contenido sean divs en lugar de marcos, y luego colocar un iframe dentro del div de contenido. Los enlaces del elemento del menú se realizan de la misma manera que se acaba de describir.

Sin embargo, otras personas recomiendan usar solo divs, sin marcos ni iframes, y usar Javascript para cambiar el contenido en el área de contenido, es decir, las tags de anclaje toman una forma como donde el func cambia dinámicamente el contenido en el área de contenido.

Finalmente, algunas personas recomiendan usar solo divs y usar botones en lugar de tags de anclaje en el menú, y una vez más, usar Javascript adjunto a los botones para ajustar el contenido del área de contenido.

Supongo que hay más opciones que me he perdido. ¿Existe una mejor práctica moderna generalmente aceptada, si es así es una de las que he enumerado, cuál y por qué? Si no hay una mejor práctica, ¿cuáles son las situaciones o razones para usar cada una de las opciones alternativas “buenas”?

Hay varias maneras de hacer esto:

  1. Marcos
  2. Páginas separadas, cada una de las cuales incluye un segmento de navegación común
  3. Una sola página con múltiples páginas virtuales en ella

Las opciones 1 y 2 son autoexplicativas. La ventaja de 2 sobre 1 es que los marcadores y el historial del navegador son agradables y simples. Mucha gente está virando hacia 3 ahora.

Aquí hay un JSFiddle simple que armé como un ejemplo de la opción 3. Es feo, sí, no me molesté en diseñar nada.

http://jsfiddle.net/sJ6Bj/4/

Aquí está el HTML:

   Two-pane navigation   

Page 1

This is all the lovely content on page 1.

Let's add a bunch of stuff to make it scroll.

.
.
.
.
.
.

This is at the bottom of the page.

Page 2

This is all the lovely content on page 2.

JavaScript (supone que JQuery está cargado):

 $(document).ready(function() { $(".page-link").on("click", function(e) { $(".page").fadeOut(250); setTimeout(function() { $($(e.currentTarget).attr("href")).fadeIn(250); }, 250); }); }); 

CSS:

 #navigation { position: fixed; width: 250px; height: 100%; border-right: 1px solid black; } #pages { margin-left: 270px; /* 250px + 20px of actual margin */ } .page { position: relative; display: none; overflow: scroll; } 

Como dijo @RobG anteriormente, el navegador considera que actualmente se trata de una página. Sin embargo, con algo como JQuery BBQ , se puede agregar sin mucho esfuerzo (por ejemplo, mira aquí ).

¿Por qué elegir uno divs sobre marcos? Hay varias razones.

  1. Los marcos no se pueden marcar (ver la advertencia anterior).
  2. El soporte de transición y animación con marcos es muy limitado, y con páginas completas separadas no existe. Hice un simple fundido de entrada / salida en el violín anterior para demostrar lo que es posible con los divs.
  3. No es necesario volver a cargar nada cuando el usuario cambia la “página” (aunque a la inversa, es posible que deba cargarse mucho más desde el principio).