JavaScript/CSS flikmenyn med sub-navigation (2 / 4 steg)
Steg 2: HTML-pålägg
Vår markup för menyn är ganska självförklarande. Vi ska skapa en behållaren div som kommer att hålla en oordnad lista som innehåller våra viktigaste menyalternativ. Under dessa, gör vi en annan behållaren div och inom den, vi kommer att sätta onumrerad lista för varje undermeny.Som så:
[nav] [huvudmenyn] [sub-nav] [sub-nav menyer] [/ sub-nav] [/nav]
Så låt oss bygga pålägg...
Våra dokument huvud (där vi importerar våra JavaScript och CSS):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd" >< html >< huvud >< titel > Javascript och CSS flikmenyn med sub-Navigation < / title >< stil typ = "text/css" > "css/menu.css"; < / stil >< script type = "text/javascript" src="js/menu.js" >< / script >< / capita >
Body-taggen, vari vi initiera menyn (viktigt):
< body onload="navMenu()" >
Menyerna själva (strukturerad som illustreras ovan):
< div id = "nav" >< ul-id = "tabBar" >< li >< en href="/index.html" > Hem/< a >< /li >< li >< en href="/about.html" rel = "menutrigger" namn = "om" > om < /a >< /li >< li >< en href="/work.html" rel = "menutrigger" namn = "arbeta" > vår arbeta < /a >< /li >< li >< en href="/contact.html" > kontakt/< a >< /li >< / UL >< div id = "subNav" >< ul-id = "aboutNav" >< li >< en href="/staff.html" > vår personal < /a >< /li >< li >< en href="/facilities.html" > faciliteter < /a >< /li >< li >< en href="/certifications.html" > certifieringar < /a >< /li >< /ul >< ul-id = "workNav" >< li >< en href="/programs.html" > program < /a >< /li >< li >< en href="/events.html" > händelser < /a >< /li >< /ul >< / div >< / div >
Nära kroppen och resten av sidan också:
< / body >< / html >