Meny Design i Javascript

March 12

Javascript er en web-språk er innebygd i alle de store nettlesere som du kan bruke til å lage dine websider gjøre mye kult triks. Å designe et nettsted navigasjonsmeny er en av de vanligste tingene du kan bruke Javascript for å gjøre, og siden det er relativt enkelt å gjøre, det er en vanlig måte for nybegynnere å lære språket. Hvis du allerede er kjent med HTML og CSS, vil du finne at det er lett å sette inn Javascript-kode og lage rene, standarder-kompatible sider.

Stiftelsen av Javascript Menu Design

Javascript menyen design bruker to enkle verktøy: \ "onmouseover, \" som utløser en hendelse skal skje når du beveger musen over noe, og \ "onmouseout, \" som utløser en hendelse skal skje når musen går andre steder.

La oss si at vi har en navigasjonsmeny på toppen av vår side med to elementer, \ "Om \" og \ "Topics. \" Når noen svever enten element i listen, ønsker vi en undermeny til å dukke opp under notering flere alternativer. Så vi trenger for å lage to funksjoner: en som gjør en meny for å vises under hvert element ved hjelp av \ "onmouseover, \" og en som lar menyen til å forsvinne ved hjelp av \ "onmouseout \".

For å gjøre dette, må vi legge til følgende Javascript-kode i <head> -delen av siden:

<Script type = \ "text / javascript \">
// <! [CDATA [

funksjon skjul (meny) {
Var menuStyle = document.getElementById (meny) .style
GÅ
menuStyle.display = \ "none \"
GÅ
}

funksjon showet (meny) {
Var menuStyle = document.getElementById (meny) .style
GÅ
menuStyle.display = \ "block \"
GÅ
}

//]]>
</ Script>

De to første linjene og de to siste linjene bare erklære at den delen av dokumentet i mellom skal bruke Javascript. Koden i mellom skaper to funksjoner kalt \ "hide \" og \ "show. \" Hver funksjon skaper først en variabel kalt \ "menuStyle, \" som gjenkjenner en meny av sin ID, og deretter endrer stilen til denne menyen ved å sette den til å vise = \ "none \" eller display = \ det er OK hvis det er ikke helt klart ennå "block \."; når du ser det i aksjon, vil du være i stand til å forstå det bedre.

Du må også legge til en annen bit av Javascript på slutten av sidene dine, før den avsluttende </ body>, som hindrer undermenyene vises på siden som standard:

Dette bruker \ "hide \" funksjonen du nettopp opprettet for å skjule hver undermeny. I dette eksempelet \ "undermeny-en \" og \ "undermeny-2 \" er ID-ene for hver undermeny.

Implementering av den i HTML

Nå som Javascript fundament det er på plass, du faktisk nødt til å aktivere den inni HTML. Først oppretter HTML menysystemet. Den reneste måten å gjøre dette på er med sorterte linker innebygd i hverandre slik:

<Ul>
<Li> Om
<Ul>
<Li> <a href=\"#\"> Bio </a> </ li>
<Li> <a href=\"#\"> Kontakt </a> </ li>
</ Li>
</ Ul>

Nå kan du legge til \ "onmouseover \" og \ "onmouseout \" attributter til øverste nivå <li> tags:

<Ul>
<Li onmouseover = \ "javascript: Vis ( 'undermeny-1') \" onmouseout = \ "javascript: hide ( 'undermeny-1') \"> Om
<Ul>
<Li> <a href=\"#\"> Bio </a> </ li>
<Li> <a href=\"#\"> Kontakt </a> </ li>
</ Li>
</ Ul>

Alt dette betyr er at når noen svever over \ "Om, \" din \ "show \" -funksjonen vil føre til undermenyen under den skal vises. Når musen beveger seg bort fra \ "Om, \" din \ "hide \" -funksjonen vil føre til undermenyen for å forsvinne.

Sette alt sammen

Nå som du har design på plass, må du feste den i en hel dokument og gran opp design med noen CSS så det alle skjermene riktig. Følgende eksempel er en hel side som fungerer som gyldig XHTML Strict kode og bruker noen grunnleggende CSS styling. Lim den inn i et tekstredigeringsprogram, lagre det som en HTML-fil, og åpne den i en nettleser for å se resultatene. Gjør endringer i CSS som du ser passer, og prøve å legge et annet menyvalg og undermenyen.

<! DOCTYPE html PUBLIC \ "- // W3C // DTD XHTML 1.0 Strict // EN \" \ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<Html xmlns = \ "http://www.w3.org/1999/xhtml\" dir = \" ltr \ "lang = \" en-US \ ">

<Head>
<Meta http-equiv = \ "Content-Type \" content = \ "text / html; charset = UTF-8 \" />
<Title> Prøvejavascript Menu </ title>

kropp {
font-family: Georgia, sans-serif
GÅ
}

et {
color: # FF3A00
GÅ
text-decoration: none
GÅ
}

a: hover {
text-decoration: underline
GÅ
}

ul {
list-style-type: none
GÅ
margin: 0
GÅ
padding: 10px
GÅ
}

li {
float: left
GÅ
padding: 10px
GÅ
border: 1px solid #ddd
GÅ
margin-left: -1px
GÅ
}

li ul {
position: absolute
GÅ
margin: 10px -11px
GÅ
border: 1px solid #ddd
GÅ
}

li li {
float: ingen
GÅ
margin: 5px 0
GÅ
klar: begge
GÅ
border: 0
GÅ
}

</ Style>

<Script type = \ "text / javascript \">
// <! [CDATA [

funksjon skjul (meny) {
Var menuStyle = document.getElementById (meny) .style
GÅ
menuStyle.display = \ "none \"
GÅ
}

funksjon showet (meny) {
Var menuStyle = document.getElementById (meny) .style
GÅ
menuStyle.display = \ "block \"
GÅ
}

//]]>
</ Script>

</ Head>

<Body>

<Ul>

<Li onmouseover = \ "javascript: Vis ( 'undermeny-1') \" onmouseout = \ "javascript: hide ( 'undermeny-1') \">
Handle om
<Ul id = \ "undermeny-en \">
<Li> <a href=\"#\"> Bio </a> </ li>
<Li> <a href=\"#\"> Kontakt </a> </ li>
</ Ul>
</ Li>

<Li onmouseover = \ "javascript: Vis ( 'undermeny-2') \" onmouseout = \ "javascript: hide ( 'undermeny-2') \">
temaer
<Ul id = \ "undermeny-2 \">
<Li> <a href=\"#\"> Filmer </a> </ li>
<Li> <a href=\"#\"> TV </a> </ li>
<Li> <a href=\"#\"> Musikk </a> </ li>
<Li> <a href=\"#\"> Theater </a> </ li>
</ Ul>
</ Li>

</ Ul>

</ Body>

</ Html>