Using CSS
by Vivienne Trulock
Menu System
You can create a simple menu system using the Vertical Sub-Navigation styles and the Invisible class styles.
Set up Services and Products pages
Create Services and Products pages, and insert the Vertical Sub-Navigation list into both pages.
Next insert a class style into the body tag of each page. This is so we can differentiate between the two pages, and therefore control which subnav displays.
On the Services page, modify the body tag so that it has a 'services' class.
The HTML code should look like this:
<html>
<body class="services">
On the Products page, modify the body tag so that it has a 'products' class.
The HTML code should look like this:
<html>
<body class="products">
We also need to be able to identify each subnav list, so we'll give them class also. Add a productssubnav class to the Products Subnav, and a servicessubnav class to the Services Subnav.
The HTML code for the lists should look like this:
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="products.htm">Products</a>
<ul class="productsubnav">
<li><a href="widgets.htm">Widgets</a></li>
<li><a href="bobbles.htm">Bobbles</a></li>
<li><a href="gringos.htm">Gringos</a></li>
</ul>
</li>
<li><a href="services.htm">Services</a>
<ul class="servicesubnav">
<li><a href="installation.htm">Installation</a></li>
<li><a href="maintenance.htm">Maintenance</a></li>
<li><a href="repairs.htm">Repairs</a></li>
</ul>
</li>
<li><a href="contact.htm">Contact</a></li>
</ul>
Now to create the CSS code to control the subnavs. On products page we want the products subnav to display, but not the services subnav. On the services page we want the services subnav to display but not the products subnav.
Using the 'Display' invisible style we can turn off the subnavs, but in order to control when they are turned off, we need to use the class style on the body tag.
This is the code to turn off the productssubnav on the services page.
body.services .productssubnav{
display:none;
}
We also want to turn off the servicessubnav on the products page, so we can add that to the style also.
body.services .productssubnav, body.products .servicessubnav{
display:none;
}
Set up Services and Products Sub Section pages
To create the entire site, next create the Products & Services Sub Section pages: Widgets, Bobbles, Gringos, Installation, Maintenance & Repairs, all with the navigation system inside.
Put class="services" into the body tag of all the services sub section pages to keep the services subnav open and the products subnav closed on these pages.
Similarly, put class="products" into the body tag of all the products sub section pages to keep the products subnav open and the services subnav closed on these pages.
Set up index, about and contact pages
One final addition is needed to complete the process. Create the remaining pages: index, about and contact, with the navigation system inside. At the moment, the index, about and contact pages will display both subnavs. These should not be visible until the user selects either Services or Products, so we need to turn these off on pages with no sub sections.
Adding a default class to the body tag on the index, about and contact pages will allow us to control these pages. The HTML code should look like this:
<html>
<body class="default">
The CSS needs to be modified also. Add the body default class with both subnavs to the display:none style.
body.services .productssubnav, body.products .servicessubnav, body.default .productssubnav, body.default .servicessubnav{
display:none;
}
Example
The finished pages should look like the example site. I have also used the two column layout to position the navigation.
