¿Cómo implementar menús de navegación HTML reutilizables?

Question

Estoy seguro de que este tema aparece todo el tiempo, pero parece que no puedo encontrar una respuesta concisa. Tengo una barra de menú vertical que quiero reutilizar en nuestras páginas web (> 20) para el sitio.
La barra de menú está codificada en html (UL, LI, A), usa etiquetas Div y CSS para lograr los efectos deseados.

Queremos encontrar el enfoque más simple para reutilizar la barra de menú en todas las páginas web mientras podemos mantener y escalar según sea necesario, para no tener que modificar todas las páginas cada vez que agreguemos una página. Preferimos evitar un enfoque de codificación si es posible, lo que significa que podríamos vivir con solo un archivo maestro que editamos según sea necesario. Sine estamos usando CSS y DIV. No creo que los fotogramas sean la respuesta. ¿Alguna idea?

Answer 1

Si usa PHP, todo lo que tiene que hacer es usar el comando include, sin codificación más allá de este comando.
También, mira server side includes

Answer 2

Para hacer esto, tendrás que usar alguna tecnología del lado del servidor. Por ejemplo, podría ...

• ellos incluyen en php

• los pusieron en la página maestra en .net

• poner esto en una una página de diseño en los carriles

parcial o

un poco de lectura:

http://us.php.net/manual/en/function.include.php

http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

Otra solución sería la creación de todo esto usando Javascript, pero por favor no hacerlo así :)

html:

<script type="text/javascript" src="hack.js"></script> 
<div id="mymenu"> 
</div> 

hack.js:

function createMenu(){ 
    $("#mymenu").html("all the html of your menu"); 
} 

Answer 3

Serv El lado izquierdo incluye son el camino a seguir si no quiere usar un lenguaje de programación.

toman esta forma:

<!--#include virtual="menu.html" --> 

y se insertará en la página donde se pone esa etiqueta en el código HTML. Requiere un análisis del lado del servidor, por lo que su servidor web debe tener habilitado el lado del servidor. Puede probarlo, y si no funciona, póngase en contacto con su servidor host para ver si puede habilitarlos. Si es Apache, también hay un method of enabling them a través de archivos .htaccess.

Answer 4

Hasta ahora, una de las mejores soluciones que he encontrado es modelar los menús después de la solución XHTML/CSS Son of Suckerfish que está bastante bien documentada en Internet ahora combinada con cierta lógica en el servidor para representar la lista desordenada. Al usar listas desordenadas, tiene un par de opciones diferentes sobre cómo generar los resultados, pero siempre que el menú tenga una jerarquía básica, puede generarlo. Luego, para la página actual todo lo que necesita hacer es incluir una referencia a la función de generación de menú.

Answer 5

He hecho esto de dos maneras distintas: una usando el lado del servidor (PHP) y otra usando Javascript (para demos que deben poder ejecutarse sin conexión a Internet o sin las capacidades del servidor).

Para PHP, sus páginas tendrán que terminar en .php en lugar de .htm o .html, y son ideales para reemplazar el encabezado, pie de página, navegación, etc. Todo lo que se repite en varias páginas.

Básicamente, crearía su código normal, luego copie y pegue el código que desea separar, en este ejemplo, su navegación, y guárdelo en otro archivo llamado (por ejemplo) inc_navigation.htm (esta página se puede llamar .htm).

Luego, en sus páginas reales que tendría que utilizar el siguiente código:

<?php include('inc_navigation.htm') ?> 

que insertaría su navegación en ese momento, si había un cambio para hacer que serías en el archivo .htm y se propagaría a cualquier página con eso incluido.

JavaScript incluye tendrá que incluir la siguiente línea en la parte superior de cada documento en el que desea incluir su navegación:

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

A continuación, vamos a crear un documento llamado includes.js.

En la parte superior de este documento se le declara la variable de navegación:

var navigation = new Array(); // This is for the navigation. 

A continuación, un poco retirado en ese mismo documento que necesita para delinear realidad su código de navegación (los números de línea en los corchetes son cruciales - mantenerlos en orden y comenzar con 0 - no se puede tener saltos de línea en este código para cada línea de código tiene que ser una nueva línea):

// ==================== Navigation ==================== // 
navigation[0] = '<div id="tab_navigation">'; 
navigation[1] = '<ul id="dropline">'; 
navigation[2] = '<li><a href="index.htm"><b>Home</b></a></li>'; 
navigation[3] = '<li><a href="about_us.htm"><b>About Us</b></a></li>'; 
navigation[4] = '</ul>'; 
navigation[5] = '</div><!-- Close TAB NAVIGATION -->'; 

a continuación, un poco retirado después de que en verdad inserta el javascript que pondrá ese código en tu pag e (en realidad no lo coloca allí, sino que lo hace accesible en la página sin alterar realmente el código de la página .htm, de modo que si ve la fuente, verá la referencia al código, no el código en sí).

function show(i) 
{ 
    for (x in i) 
    { 
    document.write(i[x]+'\n') 
    } 
} 

Por último - en el documento .htm, por ejemplo para su página index.htm, se le sustituye su código de navegación (que se pone en el bloque por encima de navegación llamada) con esto:

<script type="text/javascript">show(navigation);</script> 

Donde ese nombre después de SHOW y en paréntesis es el nombre de su variable (declarado anteriormente).

Tengo sitios que muestran los dos métodos en uso si desea verlos simplemente envíeme un mensaje.

Answer 6

Sin ninguna secuencia de comandos del lado del servidor o Javascript, puede utilizar etiquetas de objeto o iframe.

http://www.w3schools.com/tags/tag_object.asp

http://www.w3schools.com/tags/tag_iframe.asp

Lo único que importa es indicar target = "padre" de enlaces.

Espero que ayude

Answer 7

Me enfrenté a lo mismo. Luego, creé un nuevo archivo para almacenar el html de la barra de navegación.

Creé un archivo navbar.html que tenía todo mi código de barras de navegación. Luego, en su archivo html principal donde desea la barra de navegación, simplemente incluya este archivo usando jquery.

$(document).ready(function() { 
    $('#navigation').load('navbar.html'); 
}); 

A continuación, en el lugar donde desea barra de navegación, sólo tiene que añadir esta línea:

<div id="navigation"></div> 

Answer 8

Como respuesta moderna a una vieja PREGUNTA Seis Año: Web Components son componentes HTML específicamente reutilizables, y Polymer es posiblemente la implementación más popular de la misma en este momento. Actualmente, prácticamente ningún navegador tiene soporte nativo para los componentes web, por lo que, como mínimo, se requiere un relleno policial de Javascript.

Answer 9

El uso de un script W3 ..

index.html

<!DOCTYPE html> 
<html> 
<script src="http://www.w3schools.com/lib/w3data.js"></script> 

<body> 

<div w3-include-html="header.html"></div> 
<div w3-include-html="nav.html"></div> 

<script> 
w3IncludeHTML(); 
</script> 

</body> 
</html> 

header.html

<h1>Title</h1> 

nav.html

<h2>Your nav</h2> 

Consulte también: http://www.w3schools.com/howto/howto_html_include.asp

y no se olvide de probar este código en su servidor local.