Inserire un menu da un file esterno

[Yoda80]

Salve, devo inserire un menu Javascript.

Il problema è che non voglio inserire le voci del menu (fatte con <ul> e[*]) in ogni singola pagina html del sito, ma vorrei impostare il menu in un solo file html e importarlo/caricarlo in ogni pagina tramite un comando, così come si fa con i file Javascript e CSS che si possono caricare da file esterni con un comando, senza doverli includere in ogni pagina.

Qual è questo comando che posso usare in Html per incorporare un file html esterno?
Ho provato con Iframe, ma c'è il problema che occupa tutto lo spazio del menu orizzontale a discesa, cioè se io imposto <iframe height=300> per poter visualizzare l'intero menu, ho 300 pixel occupati in alto nelle pagine. Non ci sarebbe un modo per visualizzare questo Iframe sovrapposto sopra (z-index) il testo della pagina?

Grazie

[SoulStorm892]

Puoi importare un file JS nell'head che al suo interno abbia una funzione del tipo "showMenu".
All'occorrenza chiami la funzioncina showMenu che genererà il menù (html compreso).

Per generare HTML tramite JS ci sono diversi modi. Per esempio:

document.getElementById("menu").innerHTML = "[b]sono il tuo menù!!![/b]" 

Oppure nella pagina index principale puoi inserire il seguente div:

<div id="menu" style="display:none;position:fixed;">codice html del menù</div> 

tramite la proprietà display:none il div non verrà inserito nel flusso e quindi a livello di layout non conterà assolutamente nulla. Quando vorrai chiamarlo basterà eseguire un funzione JS con il seguente codice:

function showMenu()
{
var menu = document.getElementById("menu");
menu.style.left = "0";
menu.style.top = "100px";
menu.style.display = "block";
} 

tramite display block visualizzerai correttamente il menu, dato che la sua position è fixed questo sarà sovrapposto alla tua pagina e precisamente nella posizione left,top (nel nostro caso (0,100).
Nel caso vorrai chiuderlo basterà una funzione del tipo:

function closeMenu()
{
var menu = document.getElementById("menu");
menu.style.display = "none";
} 

Tutto questo senza importare od esportare assolutamente nulla

[carlomarangoni]

Originariamente inviato da SoulStorm892
Puoi importare un file JS nell'head che al suo interno abbia una funzione del tipo "showMenu".
All'occorrenza chiami la funzioncina showMenu che genererà il menù (html compreso).

Per generare HTML tramite JS ci sono diversi modi. Per esempio:

document.getElementById("menu").innerHTML = "[b]sono il tuo menù!!![/b]" 

Oppure nella pagina index principale puoi inserire il seguente div:

<div id="menu" style="display:none;position:fixed;">codice html del menù</div> 

tramite la proprietà display:none il div non verrà inserito nel flusso e quindi a livello di layout non conterà assolutamente nulla. Quando vorrai chiamarlo basterà eseguire un funzione JS con il seguente codice:

function showMenu()
{
var menu = document.getElementById("menu");
menu.style.left = "0";
menu.style.top = "100px";
menu.style.display = "block";
} 

tramite display block visualizzerai correttamente il menu, dato che la sua position è fixed questo sarà sovrapposto alla tua pagina e precisamente nella posizione left,top (nel nostro caso (0,100).
Nel caso vorrai chiuderlo basterà una funzione del tipo:

function closeMenu()
{
var menu = document.getElementById("menu");
menu.style.display = "none";
} 

Tutto questo senza importare od esportare assolutamente nulla

Ma un semplice include non basta?

[Yoda80]

Grazie!
Gentilissimo.
Ho preferito usare document.write perchè il menu deve essere presente in tutte le pagine, ma la tua soluzione è esattamente cosa stavo cercando.

[0-c00l]

Ehm sinceramente è piu' semplice la soluzione dell' include, crei il tuo menu' in una pagina, poi in ogni pagina scrivi

<? include('menu.html') ?>

Ovviamente sostituendo menu.html con la pagina del menu.. E' meno incasinato del javascript non credi?

[SoulStorm892]

Perché scomodare un include quando puoi avere l'intero menù già implementato nella pagina?
Io preferirei lavorare sull'index con i pochi div che compongono la struttura del menù mentre raggruppare in foglio JS esterno tutte le funzioni che lo gestiscono. Lavorare in JS permette di poter aggiungere/aggiornare voci, fare un'effetto "slide" o farlo sparire all'occorrenza...

Se lavori con MASTERPAGE ti conviene caricare una volta sola tutto il foglio JS di gestione nell'<head> anziché richiamare ogni volta tutto il file menu.htm...

Comuqnue questi sono punti di vista, rimando eventuali critiche ai gestori di questo forum che sono decisamente più autorevoli e preparati di me in materia

[carlomarangoni]

Originariamente inviato da SoulStorm892
Perché scomodare un include....

Perchè è semplicemente più comodo, più breve da realizzare e più pulito.

E se l'utente ha JS disabilitato?

Con Js di potrebbe mettere tutto il codice del menu in un .js esterno e richiamarlo nel punto di inserimento della pagina. Ma usare un metodo lato-client è sicuramente più sconsigliato che usare un metodo lato-server

[Vincent.Zeno]

@SoulStorm892

per definizione, un menu, è un elenco di voci (link)

queste voci è bene siano, sotto tutti i punti di vista,
link in chiaro verso le pagine
la marcatura corretta è la lista non ordinata <ul>

un menu in JS potrebbe essere funzionale in un determinato contesto (tipo alcune funzioni all'interno di un'applicativo che gira in una INTRANET) ma non certo su pagine web che devono tener conto di molti fattori (vedi una impossiblità di vedere il link da parte di un motore di ricerca, per esempio) senza ancora non aver considerato che il client con JS disattivato non potrà navigare ( )
per includere un file o una funzione lo sforzo è praticamente lo stesso,
quindi... perché farsi del male?
tra l'altro, il vantaggio dell'inclusione, in questo caso è anche quello di poter fare UNA modifica che vale per tutte le pagine

quindi... perché non usare strumenti seri che ci semplificano la vita e migliorano la produttività?

[studiopolli]

Sono tentato di acqusiatre la licenza d'uso di questo dropdown menu che ritengo molto bello, ma sono un pò restio all'acquisto dato che per ogni pagina del sito dove dovrei utilizzare questo menu http://apycom.com/menus/4-forest-green.html, devo scrivere i tag[*] e <ul>.

Questo significa che per ogni aggiormamento del sito (ad esempio una pagina nuova), dovrei aggiornare magari 50-70 pagine del sito.

Il menu lavora con un file esterno .js con esclsuione però dei tag[*] <ul>, ma leggendo questa discussione mi sembra di aver capito che esiste la possibilità di far leggere un file esterno per questi tag.

Cosi facendo si fa solo una modifica al file esterno e si aggiorna tutto il sito.

Qualcuno mi può dare una mano? saluti