Étape 2: The HTML Mark-Up
Notre balisage pour le menu est assez simple. Nous allons créer un conteneur div qui contiendra une liste à puces contenant nos éléments de menu principal. Ci-dessous, nous allons faire un autre conteneur div et qu’il contient, nous allons mettre les listes à puces pour chaque sous-menu.Comme suit:
[nav] [main menu] [sub-nav] [sub-nav menus] [/sub-nav][/nav]
Nous allons donc construire le supplément...
Notre chef de document (où nous importons notre JavaScript et CSS) :
<!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>
La balise body, dans lequel on Initialise le menu (IMPORTANT) :
<body onload="navMenu()">
Les menus eux-mêmes (structuré comme illustré ci-dessus) :
<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>
Fermer le corps et le reste de la page ainsi :
</body></html>
