The left-hand navigation strip, which appears on every page, makes it easy to see at-a-glance where you are in the site hierarchy.
Navigation
The left navigation for each site is managed using include files—separate .htm files. By managing these files separately it is easier to make global updates to your site structure.
The design for the left navigation supports multiple layers of content hierarchy. The left navigation is specific to each subsite and can support level-2, level-3, and level-4 links. The image at the right shows an example of a left navigation where a user is on a level-4 page.
To provide links to a site that resides outside the hierarchy of your site, but which is closely related to your site, use the Related Site option at the bottom of the left navigation.
About the Left Navigation
- The left navigation for each page tells the user where they are within the hierarchy of your site.
- These files are built using include files and are maintained by the Web Support Group.
- They live inside a folder called includes/
- They begin with the characters ln_
- They use the file extension .htm to indicate that they are not full web pages; full web pages should have the extension .html
- The left navigation begins with your level-2 pages and goes as far as a level-4 page.
For a tutorial on include files, watch the multimedia presentation entitled Add Links to Left Navigation provided by the Stanford Medical School.
Code Guidelines for Dreamweaver Authors
The Web Support Group will set up your left navigation include file. This file, like a table of contents, will contain ALL links for your site using a series of nested lists.
For a code example, see www.gsb.stanford.edu/includes/ln_sample.htm. You can use this core file as the source for all other left navigation files for your site by modifying the following elements.
- <ul> Closed vs. Open
Each <ul> contains a class of either open or closed. To achieve the view in the example on the right, the <ul> below About Us and below Events are set to "open." Example:
<ul class="open"> - Active Class
For each page that you are on, add class="active" into the <href> tag so that it will appear in its red on-state. Example:
<a href="/ces/about/conferences.html" class="active"> - Fouron Class
Note that the level-4 links have an additional red dash to distinguish them from the level-3 links. To achieve this, add class="fouron" into the <li> tag. Example:
<li class="fouron"><a href="/ces/about/conferences.html" class="active">Conferences</a></li> - Related Sites
Use the H6 tag and the subsite class to achieve the desired style. Example:
<h6>Related Site</h6>
<ul class="subsite">
<li class="subsite"><a href="/exed/">Executive Education</a></li>
</ul>