Paso 2: El HTML Mark-Up
Nuestro marcado para el menú es bastante sencillo. Vamos a crear un div contenedor que contendrá una lista desordenada de nuestro menú principal. Debajo de eso, vamos a hacer otro contenedor div y dentro de ella, pondremos las listas sin ordenar para cada submenú.Como tal:
[nav] [main menu] [sub-nav] [sub-nav menus] [/sub-nav][/nav]
Así que vamos a construir la marca en marcha...
La cabeza del documento (donde importamos nuestro JavaScript y 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 etiqueta body, donde inicializamos el menú (importante):
<body onload="navMenu()">
Los menús se (estructurada como se ilustra arriba):
<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>
Cerrar el cuerpo y el resto de la página así:
</body></html>
