Nwlapcug.com


Tutorial per un Menu a cascata in Java Script

Menu di pagina Web sono progettati per consentire ai visitatori di navigare il sito Web che comprende con facilità. Con più piccoli siti Web, HTML standard codificati menu lavoro bene. Quando siti Web si espande di là di un semplice cinque - sette pagine profondità, soluzioni più creative sono necessari per presentare un ampio menù in maniera piacevole. Un modo per superare un menu affollato, pur mantenendo una vista che è pulito e leggibile, è quello di incorporare i menu a cascata nel sito Web. I menu a cascata possono essere creati facilmente senza dover "reinventare la ruota" come molti script di menu CSS JavaScript sono facilmente reperibili su Internet.

Istruzioni

1

Scaricare e salvare il HMenu.js e le pagine di HMenu.css (Vedi risorse) al vostro spazio di server web. Questi file devono trovarsi nella stessa cartella e nella stessa posizione come pagine web. Lo script HMenu.js contiene tutte le funzioni JavaScript necessarie richieste da qualsiasi menu CSS creato. Il file di HMenu.css è un foglio di stile CSS che contiene tutti gli elementi di stile necessari per i menu a cascata.

2

Aprire qualsiasi delle pagine web in entrambi un HTML modifica programma o blocco note. All'interno dell'intestazione di questo file, inserire il codice seguente per includere i css file e script necessari:

< script language = "JavaScript" href="HMenu.css" >

Questo codice deve essere inserito dopo il tag < head > e prima il < / head > tag.

3

Creare il menu principale contenitore, voci di menu principale e sottomenu con il seguente codice HTML nella pagina web aperta:

< div id = "menuContainer" >
< div id = "menu1" class = "menu" >

< div id = "subMenu1_1" class = "menuItem" >< un href="submenu1.htm" > menu Sub 1 < /a >< / div >
< div id = "menu1_1" class = "menu" >
< div id = "menuItem_1_1" class = "menuItem" >< un href="submenu1item1.htm" > Sub menu1 - 1 elemento < /a >< / div >
< div id = "menuItem_1_2" class = "menuItem" >< un href="submenu1item2.htm" > Sub menu1 - 2 elemento < /a >< / div >
< div id = "menuItem_1_3" class = "menuItem" >< un href="submenu1item3.htm" > Sub menu1 - 3 elemento < /a >< / div >
< / div >

< div id = "subMenu1_2" class = "menuItem" >< un href="submenu2.htm" > menu Sub 2 < /a >< / div >
< div id = "menu1_2" class = "menu" >
< div id = "menuItem_2_1" class = "menuItem" >< un href="submenu2item1.htm" > Sub menu2 - 1 elemento < /a >< / div >
< div id = "menuItem_2_2" class = "menuItem" >< un href="submenu2item2.htm" > Sub menu2 - 2 elemento < /a >< / div >
< div id = "menuItem_2_3" class = "menuItem" >< un href="submenu2item3.htm" > Sub menu3 - 3 elemento < /a >< / div >
< / div >

< / div >
< / div >

Garantire questo codice viene inserito all'interno del corpo < > e < / body > Tag; preferibilmente dove collocare la barra dei menu standard.

Il div principale... "menuContainer"..--comprende la sezione menu intero. Il div "menu1" Mostra c'è un menu all'interno di questo contenitore. Ogni sotto-menu è dato un div id identità sconosciuta che corrisponde con il tag div principale "menu1" e procede numericamente. A sua volta, ogni voce di menu elencati all'interno dei sub-menu sono denominati e numerati nello stesso modo.

4

Modificare il codice precedente per lavorare con i collegamenti della pagina web e titoli. Tenete a mente che ogni nuovo menu div, div sottomenu e menuItem div dovranno essere numerate in modo appropriato. Ad esempio, il prossimo div sottomenu all'interno di questo sarebbe "subMenu1_3" e voci di menu successive sarebbero iniziare con "menuItem_3_1" e andare avanti.