Tutorial sul menu pop-up in Javascript

October 20

A seconda del numero totale di link contenuti all'interno del sito web, la quantità di spazio pagina un menu fisso prende può essere piuttosto estesa. Molti siti web contengono più di un semplice tre a cinque pagine e questo si riflette in una barra dei menu ben progettato. Per ridurre lo spazio totale delle pagine prese da un menu molto ampio, utilizzando Javascript per creare un menu pop-up può essere in ordine. Con la creazione di una pagina del menu e un po 'di codifica nelle pagine esistenti, si può avere rapidamente un menu pop-up che è facile da usare e navigare.

istruzione

1 Scrivete un elenco di tutte le pagine web situati all'interno tuo sito web. Avere un elenco degli URL e nomi di pagina farà il resto di questo processo molto più facile.

2 Creare una nuova pagina web sia in un programma di web editing pagina o un blocco note e il nome \ "menu.html. \" All'interno della sezione corpo di questa pagina Web (tra <body> e </ body>), creare collegamenti al vostro vario pagine web utilizzando la seguente riga di codice come un esempio:

<a href=\"javascript:openPUMenu('home.html')\"> casa </a>

È possibile sostituire i nomi di pagina appropriate e titoli per \ "home.html \" e \ "casa \". Aggiungere il maggior numero di collegamenti necessari per garantire tutte le pagine del sito web sono inclusi.

3 Modificare la parte di intestazione di menu.html (tra <head> e </ head>) per includere il seguente codice JavaScript:

<Script language = \ "JavaScript \">
<! -
Funzione openPUMenu (nURL) {

opener.document.location = nURL;

}
// ->
</ Script>

Questa porzione di codifica sarà conforme con collegamenti web collocati all'interno del corpo della pagina precedente.

4 Aprire la pagina web in cui si desidera includere il menu pop-up JavaScript in un programma di editing web. Notepad funziona anche bene per questo scopo. Inserire il seguente codice all'interno dell'intestazione di questa pagina:

<Script language = \ "JavaScript \">
<! -
Funzione openPUNav () {

win = window.open(\&quot;menu.html\&quot;, \&quot;Navigation\&quot;,\&quot;width=200,height=300,scrollbars=no,status=no\&quot;)

ANDARE
}
// ->
</ Script>

Questa codifica Javascript dice semplicemente il browser web per aprire una nuova finestra del browser che è di 200 pixel per 300 pixel di altezza. Inoltre, limita la vista della finestra del browser non permettendo le barre di scorrimento o una barra di stato. Queste opzioni possono essere modificate.

5 Individuare l'area che si desidera includere il link menu a comparsa nella pagina aperta e inserire il codice seguente:

<a href=\"javascript:openPUNav()\"> Menu di navigazione </a>

6 Salvare tutto il vostro lavoro creati e modificati al tuo sito web. Ora è possibile testare il vostro menu a comparsa JavaScript appena creata andando alla pagina web in cui è stato incluso il link del menu. Invece di creare una nuova istanza di un menu ogni volta con nuove pagine web, si può semplicemente aggiungere la nuova pagina alla pagina menu.html. Inoltre, è possibile aggiungere la funzione openPUNav Javascript e corrispondente collegamento menu per qualsiasi pagina in cui si richiede il nuovo menu.