Come implementare i menu di navigazione HTML riutilizzabili?

Question

Sono certo che questo argomento si presenta sempre, ma non posso sembrare una risposta concisa. Ho una barra dei menu verticale che voglio riutilizzare nelle nostre pagine web (> 20) per il sito.
La barra dei menu è codificata in html (UL, LI, A), utilizza tag Div e CSS per ottenere gli effetti desiderati.

Vogliamo trovare l'approccio più semplice per riutilizzare la barra dei menu in tutte le pagine Web pur essendo in grado di mantenere e scalare secondo necessità, quindi non dobbiamo modificare tutte le pagine ogni volta che aggiungiamo una pagina. Preferiamo evitare un approccio di codifica se possibile, il che significa che potremmo vivere con un solo file master che modifichiamo come necessario. Sine stiamo usando CSS e DIV I frame non hink sono la risposta. qualche idea?

Answer 1

Se si utilizza PHP, tutto ciò che si deve fare è usare il comando include, senza codificare oltre questo comando.
Inoltre, controlla server side includes

Answer 2

Per fare ciò, dovrai utilizzare una tecnologia lato server. Per esempio si potrebbe ...

• essi includono in php

• metterli nella pagina master in .net

• mettere questo in un una pagina di layout in rotaie

parziale o

qualche lettura:

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

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

Un'altra soluzione potrebbe essere quella di creare tutto questo utilizzando Javascript, ma per favore non farlo in quel modo :)

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 er side include sono la strada da percorrere se non si desidera utilizzare un linguaggio di programmazione.

Essi prendono questa forma:

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

e verrà inserito nella pagina dovunque si trovino quel tag nel codice HTML. Richiede l'analisi del lato server, pertanto il server Web deve disporre di accessi lato server abilitati. Puoi provarlo e, se non funziona, contatta l'host del tuo server per vedere se puoi attivarli. Se è Apache, c'è anche un file method of enabling them tramite .htaccess.

Answer 4

Finora una delle migliori soluzioni che ho trovato è quella di modellare i menu dopo la soluzione XHTML/CSS Son of Suckerfish che è abbastanza ben documentata su Internet ora combinata con qualche logica sul server per rendere l'elenco non ordinato. Usando liste non ordinate hai un paio di opzioni diverse su come esportare i risultati, ma finché il menu ha una gerarchia di base puoi generarlo. Quindi per la pagina effettiva tutto ciò che devi fare è includere un riferimento alla funzione di generazione del menu.

Answer 5

Ho fatto questo in due modi separati: uno che utilizza il lato server (PHP) e uno che utilizza JavaScript include (per le demo che devono essere in grado di funzionare senza alcuna connessione Internet o funzionalità del server).

Per PHP include le pagine dovranno terminare con .php piuttosto che .htm o .html, e questi sono molto ideale per sostituire l'intestazione, piè di pagina, la navigazione, ecc Tutto ciò che si ripete su più pagine.

Fondamentalmente si dovrebbe creare il proprio codice normale, quindi copiare e incollare il codice che si desidera scomporre - in questo esempio, la navigazione - e salvarlo in un altro file chiamato (ad esempio) inc_navigation.htm (questa pagina può essere chiamata htm).

Poi nelle pagine effettive devi utilizzare il seguente codice:

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

Che sarebbe inserire la navigazione a quel punto, se si ha un cambiamento per fare che saresti al file htm e si propagherebbe a qualsiasi pagina con quella inclusa.

Per javascript include si dovrà includere la seguente riga nella parte superiore di ogni documento in cui si desidera includere la navigazione:

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

Poi si creerà un documento chiamato includes.js.

Nella parte superiore di questo documento si dichiara la variabile di navigazione:

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

poi un po 'modi in tale stesso documento è necessario delineare in realtà il codice di navigazione (i numeri di riga nelle parentesi quadre sono cruciali - tenerli in ordine e iniziare con 0 - non si può avere interruzioni di riga in questo codice in modo che ogni riga di codice deve essere una nuova linea):

// ==================== 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 -->'; 

Poi un po 'modi dopo che avrete in realtà inserisci il javascript che inserirà quel codice nella tua pagina e (in realtà non lo mette lì, ma piuttosto lo rende accessibile nella pagina senza effettivamente alterare il codice della pagina .htm - quindi se si visualizza l'origine vedrete il riferimento al codice e non il codice stesso).

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

Infine - nel documento .htm, diciamo per la pagina index.htm, si sostituisce il codice di navigazione (che si inserisce nel blocco sopra chiamato navigazione) con questo:

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

Dove quel nome dopo SHOW e tra parentesi è il nome della variabile (dichiarato in precedenza).

Ho siti che mostrano entrambi i metodi in uso se desideri vederli semplicemente mandami un messaggio.

Answer 6

Senza script lato server o Javascript è possibile utilizzare tag oggetto o iframe.

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

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

L'unica cosa da tenere presente è quello di indicare target = "padre" nei collegamenti.

Speranza che aiuta

Answer 7

stavo affrontando la stessa cosa. Quindi, ho creato un nuovo file per la memorizzazione dell'html della barra di navigazione.

Ho creato un file navbar.html che aveva tutto il mio codice a barre di navigazione. Quindi, nel file html principale in cui si desidera la barra di navigazione, è sufficiente includere questo file utilizzando jquery.

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

Poi nel luogo in cui si desidera barra di navigazione, è sufficiente aggiungere questa riga:

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

Answer 8

come una risposta moderna ad una vecchia domanda sei anni: Web Components sono componenti HTML specificamente riutilizzabili, e Polymer è forse l'implementazione più popolare al momento. Attualmente praticamente nessun browser ha il supporto nativo per Web Components, quindi per lo meno è richiesto un polyfill Javascript.

Answer 9

Utilizzo di uno 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> 

Consulta anche: http://www.w3schools.com/howto/howto_html_include.asp

e non dimenticate di provare questo codice sul tuo localhost.