Print PDF
Favorite
Email
Step 2The HTML Mark-Up
Our markup for the menu is fairly straightforward. We're going to create a container div that will hold an unordered list containing our main menu items. Below that, we'll make another container div and within it, we'll put unordered lists for each sub-menu.
Like so:
So let's build the mark-up....
Our document head (where we import our JavaScript and CSS):
The body tag, wherein we initialize the menu (IMPORTANT):
The menus themselves (structured as illustrated above):
Close the body and the rest of the page as well:
Like so:
[nav] [main menu] [sub-nav] [sub-nav menus] [/sub-nav][/nav]
So let's build the mark-up....
Our document head (where we import our JavaScript and 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"> @import "css/menu.css"; </style> <script type="text/javascript" src="js/menu.js"></script></head>
The body tag, wherein we initialize the menu (IMPORTANT):
<body onload="navMenu()">
The menus themselves (structured as illustrated above):
<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>
Close the body and the rest of the page as well:
</body></html>
| « Previous Step | Download PDFView All Steps | Next Step » |
 |
Add Comment
|
