Tutorial for en Cascading Meny i Java Script

January 2

Web side menyer er utformet slik at de besøkende å navigere omfatter nettside med letthet. Med mindre nettsteder, standard HTML kodet menyer fungerer bra. Når nettsteder ekspandere utover en enkel fem til syv-side dybde, mer kreative løsninger for å presentere en omfattende meny på en behagelig måte. En måte å løse et overfylt meny, og samtidig opprettholde et syn som er ren og lesbar, er å innlemme overlappende menyer inn på nettsiden. Cascading menyer kan lages enkelt uten å måtte "finne opp hjulet" som mange Javascript overlappende menyen skript er lett tilgjengelig på internett.

Bruksanvisning

1 Last ned og lagre HMenu.js og HMenu.css sider (se Ressurser) til webserveren din plass. Disse filene skal ligge i samme mappe og på samme sted som websidene dine. Den HMenu.js skriptet inneholder alle nødvendige Javascript-funksjoner som kreves av alle skapte overlappende menyen. Den HMenu.css filen er en gjennomgripende stilark som inneholder alle de stilelementer som trengs for gjennomgripende menyer.

2 Åpne noen av dine websider i en HTML-redigering program eller Notepad. Innenfor overskriften på denne filen, plasserer du følgende kode for å inkludere de nødvendige script og CSS-filer:

Denne koden skal plasseres etter <head> -taggen og før </ head> tag.

3 Lag hovedmenyen container, i hovedmenyen, og sub-menyelementer med følgende HTML-kode i den åpne nettsiden:

<Div id = "subMenu1_1" class = "menyvalget"> <a href="submenu1.htm"> Undermeny 1 </a> </ div>
<Div id = "menu1_1" class = "meny">
<Div id = "menuItem_1_1" class = "menyvalget"> <a href="submenu1item1.htm"> Sub menu1 - Sak 1 </a> </ div>
<Div id = "menuItem_1_2" class = "menyvalget"> <a href="submenu1item2.htm"> Sub menu1 - Sak 2 </a> </ div>
<Div id = "menuItem_1_3" class = "menyvalget"> <a href="submenu1item3.htm"> Sub menu1 - Sak 3 </a> </ div>
</ Div>

<Div id = "subMenu1_2" class = "menyvalget"> <a href="submenu2.htm"> Undermeny 2 </a> </ div>
<Div id = "menu1_2" class = "meny">
<Div id = "menuItem_2_1" class = "menyvalget"> <a href="submenu2item1.htm"> Sub menu2 - Sak 1 </a> </ div>
<Div id = "menuItem_2_2" class = "menyvalget"> <a href="submenu2item2.htm"> Sub menu2 - Sak 2 </a> </ div>
<Div id = "menuItem_2_3" class = "menyvalget"> <a href="submenu2item3.htm"> Sub menu3 - Sak 3 </a> </ div>
</ Div>

</ Div>
</ Div>

Sørg for denne koden er plassert i <body> og </ body> -kodene; helst hvor du vil plassere din standard menylinjen.

Hoved div - "menuContainer" - omfatter hele menyen delen. Den "menu1" div viser at det er en meny i denne beholderen. Hver undermeny er gitt en div id identitet som samsvarer med de viktigste "menu1" div og fortsetter numerisk. I sin tur, er hvert menyelement oppført i undermenyene navngitt og nummerert på samme måte.

4 Endre foregående kode for å arbeide med websiden din lenker og titler. Husk at hver ny meny div, undermeny div og menyvalget div må være riktig nummerert. For eksempel vil den neste undermeny div innen dette være "subMenu1_3" og påfølgende menyelementer skulle begynne med "menuItem_3_1" og gå videre.