Schritt 2: Das HTML-Markup
Unsere Markup für das Menü ist recht unkompliziert. Wir wollen eine Div Container erstellen, die eine ungeordnete Liste enthält unsere wichtigsten Menüpunkte halten wird. Unten, wir machen ein weiteres Container Div, und darin, wir ungeordnete Listen für jedes Untermenü.Etwa so:
[nav] [main menu] [sub-nav] [sub-nav menus] [/sub-nav][/nav]
Bauen wir also das Mark-Up...
Unser Dokument-Kopf (wo wir unsere JavaScript und CSS-import):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <title>Javascript & CSS Tab Menu with Sub-navigation</title> <style type="text/css"> "css/menu.css"; </style> <script type="text/javascript" src="js/menu.js"></script></head>
Das Body-Tag, wobei wir das Menü (wichtig) zu initialisieren:
<body onload="navMenu()">
Die Menüs selbst (strukturiert wie oben abgebildet):
<div id="nav"> <ul id="tabBar"> <li><a href="/index.html">Home</a></li> <li><a href="/about.html" rel="menutrigger" name="about">About</a></li> <li><a href="/work.html" rel="menutrigger" name="work">Our Work</a></li> <li><a href="/contact.html">Contact</a></li> </ul> <div id="subNav"> <ul id="aboutNav"> <li><a href="/staff.html">Our Staff</a></li> <li><a href="/facilities.html">Facilities</a></li> <li><a href="/certifications.html">Certifications</a></li> </ul> <ul id="workNav"> <li><a href="/programs.html">Programs</a></li> <li><a href="/events.html">Events</a></li> </ul> </div></div>
Schließen Sie den Körper und den Rest der Seite sowie:
</body></html>