Web site handbook > Style guide > Navigation system
Navigation system
Overview
The MCL website navigation system is comprised of
These components work together to provide users with an intuitive and broadly functional means of browsing the Web site.
It is very important that hyperlinks in the navigation system use the full path to the website root. This ensures navigation menus can be safely used in a document regardless of that documents location relative to linked resources.
Global navigation
Do NOT edit the global navigation. If you have any questions, contact the webmaster.
All XHTML documents contain the global navigation system. It is contained in <div id="globalnav">. Refer to XHTML document structure for details.
CSS is used the create the dark brown background on global navigation links. See cascading stylesheets for instructions.
/* global navigation link */
#gnreaders {background-color:#433625;color:#ffffff;}
Document title
Document and section titles (inluding navigation links) use sentence case unless proper nouns. They must agree with their corresponding links in the navigation system.
Incorrect
- Games, Email, Wifi And More
- Black Resource Center Featured Works
Correct
- Games, email, wifi and more
- Black Resource Center featured works
Title and heading 1 elements
Document titles appear in the title <title> and heading 1 <h1> elements. There is only one <h1> per page.
Page titles should be descriptive of page content. Title <title> elements should begin with the same text as the <h1> element followed by " - Multnomah County Library". The <title> element may differ from <h1> element if it is logical to do so.
Example 1: Director biography
<title>Director biography - Multnomah County Library</title>
<h1>Director biography</h1>
Title elements may contain additional useful information about the document such as the documents location in the site hierarchy. The heading 1 should only contain the document title.
Example 2: Harry Potter wand making workshop
<title>Harry Potter wand making workshop - Events & classes - Homework topics - Multnomah County Library</title>
<h1>Harry Potter wand making workshop</h1>
Sub-navigation
Sub-navigation is used on documents that are part of a cohesive subset of Web pages. Sub-navigation systems have two XHTML components and several CSS components.
Locator string
The locator string indicates a document's relative position in the information hierarchy. It is a paragraph <p class="locator"> placed between the opening <div id="content"> and the heading 1 <h1> (see also document title).
Sub-navigation menu
The sub-navigation menu is contained in <div id="subnav"> and consists of a heading 2 <h2> and one unordered list <ul>. The heading and list items are text links to various related documents. The subnav menu is on all related documents.
Example source code
<div id="subnav">
<h2><a href="/agcy/cen.html" id="central">Central Library</a></h2>
<ul>
<li><a href="/agcy/cenflrpln.html" id="cenflrpln">Floor plans</a></li>
<li><a href="/events/collins/index.html" id="collins">Collins Gallery</a>
<ul id="sncollins">
<li><a href="/events/collins/policy.html" id="policy">Policy</a></li>
<li><a href="/events/collins/collins-app.html" id="collins-app">Application</a></li>
</ul>
</li>
<li><a href="/about/mcl-wilson.html" id="wilson">John Wilson Room</a>
<ul id="snwilson">
<li><a href="/about/mcl-wilsonfw.html" id="mcl-wilsonfw">Featured works</a></li>
</ul>
</li>
<li><a href="/about/mcl-sterling.html" id="sterling">Sterling Room for Writers</a></li>
</ul>
</div>
The anchor <a> tags have an id attribute equal to the target href filename (or directory name in the case of index.html) minus the file extension.
Sub-navigation image
CSS is used to display the image at the top of the sub-navigation menu. Because it is a background image, it does not require alternative text.
/* subnav background */
#subnav {background-image:url(/central/images/sub-central.jpg)}
Sub-navigation active link
CSS is used to change the display properties (bold, not underlined on mouse over) of the link corresponding to the active document.
/* subnav active link */
a#central {font-weight:bold;text-decoration:none;}
Nested sub-navigation menus
Nested unordered lists may be used as sub-navigation menus within the main sub-navigation <ul>. These nested lists only appear on those pages within that document's topic area.
All documents in the sub-navigation menu contain CSS to either hide or display these nested menus according to the document's position in the menu. For example, this is an outline of the Central Library section of the Web site:
Central Library
- Floor plans
- Collins Gallery
- Policy
- Application
- John Wilson Room
- Featured Works
- Sterling Room for Writers
- Application
When a user is viewing a document that is not related to "Collins Gallery" or one of its sub-topics, the "Collins Gallery" sub-topics are hidden from view. It is only when the user is viewing a "Collins Gallery" topic that its sub-topics are visible. Therefore, any document in the "Collins Gallery" topic has this CSS:
/* subnav menus */
#sncollins{display:none;}
#snwilson{display:block;}
#snsterling{display:block;}
Document-level navigation
Large documents may contain a table of contents with "jump links" to content on the page. Use unordered lists unless there is a logical reason (i.e. a series of steps) for using an ordered list.
Examples of document level navigation jump-links
Links to other Web pages
Lists of links to other websites use unordered lists with the class "nodot".
Footer
All Web pages contain the div with id "footer." Do not edit the footer.
