SSU Web Standards - How the Left Navigation Works

This site is still in development. Some content is not yet posted, some may be changed at a later date.

Assistance Available

The Left Navigation structure and styles may be a little complex for first-time SSU web editors. The Web Team and Web Office is available to provide assistance to build or edit department navigation files.

Server Side Include

The left navigation is a separate file called "navigation.html." It's stored in the /ssi subdirectory, and inserted into the page as a Server Side Include. It contains the navigation section heading and an unordered list of navigational items. The same navigation.html file is included on every page of the site, so updating site navigation requires changing only a single file.

Expanding and Collapsing Navigation Sections

SSU's navigation styles support a second level of navigation that expands and collapses depending on the section of the site a user is visiting. For example when viewing this page, the navigation section "How the Templates Work" expands to reveal the relevant pages in this section, and the navigational sections for Web Standards, Content Styles and Page Types collapses.

The expanding/collapsing style is controlled by the University's style sheets.

Note: a third level of nested navigation is not allowed.

Example: Left navigation file for this Web Standards site.

Sample Navigation Code 

<h2>Navigation</h2>
<ul id="menu">
	<li id="nav-1"><a href="#" id="link-1">Some Section</a>
		<ul id="subnav-1">
			<li class="page1"><a href="#">Some Link</a></li>
			<li class="page2"><a href="#">Some Link</a></li>
		</ul>
	</li>
	<li id="nav-2"><a href="#" id="link-2">Some Section</a>
		<ul id="subnav-2">
			<li class="page1"><a href="#">Some Link</a></li>
			<li class="page2"><a href="#">Some Link</a></li>
			<li class="page3"><a href="#">Some Link</a></li>
		</ul>
	</li>
	<li id="nav-3"><a href="#" id="link-3">Some Section</a>
		<ul id="subnav-3">
			<li class="page1"><a href="#">Some Link</a></li>
			<li class="page2"><a href="#">Some Link</a></li>
			<li class="page3"><a href="#">Some Link</a></li>
		</ul>
	</li>
	<li id="nav-4"><a href="#" id="link-4">Some Section</a>
		<ul id="subnav-4">
			<li class="page1"><a href="#">Some Link</a></li>
			<li class="page2"><a href="#">Some Link</a></li>
			<li class="page3"><a href="#">Some Link</a></li>
		</ul>
	</li>
</ul>

IDs and Classes used in navigation.html

Each <ul> and <li>, and some <a> tags, in the navigation list is assigned an ID and/or Class.

<ul id="menu">
This identifies the navigation list as "menu" for the #menu styles.
<li id="nav-1">, <li id="nav-2">, <li id="nav-3">, etc.
The ID "nav-n" is used on each list item in the #menu, but not on sublist items.
<ul id="subnav-1>, <ul id="subnav-2", <ul id="subnav-3">, etc.
The ID "subnav-n" is used on nested unordered lists. The number assigned to subnav must match the number assigned to nav. So, subnav-3 cannot be a child of nav-4.
<li class="page1">, <li class="page2">, <li class="page3">, etc.
The class "pagen" is used on each nested list item.
<a id="link-1">, <a id="link-2">, <a id="link-3">, etc.
The ID "link-n" is used on every link in the main #menu list, but not on subnav links. This ID helps to identify and style the active section. The number assigned to link must match the number assigned to nav. So, link-3 cannot be a child of nav-4.

Designating Active Sections and Pages

By applying styles to the left navigation, visitors can more easily understand where they are in the site. For example, on this page:

  • "How the Templates Work" is in a bold font-face to show which section of the site this page is part of.
  • The How the Templates Work section of the navigation is expanded, and all others are collapsed.
  • The page link text "Left Navigation" is in a bold font-face and has a pale yellow background color.

To apply the Active Section and Page styles to a page, you'll need to make a small change to the HTML of each page. If you're using Dreamweaver, you'll need to look in the Split or Code View. If you're using Code view, the code to change should be somewhere near line 20.

Dreamweaver Split View

  1. In the design side of the Split view, click in the navigation area of the page. In the Tag Selector area of the document window, look for <div#navigation> and click it. Now look at the code side of the Split view. The code for <div id="navigation"> will be selected.

    Screenshot of step 1.
  2. Insert your cursor between the closing quote and closing bracket. Type: class="
  3. Select or type the approptiate link-section-n class, where n matches the number of the section's subnav.
    Screenshot of steps 2 and 3.
  4. Directly after the link-section-n and before the closing quotation type a space, then type or select the appropriate page-link-n class, where n matches the number of the list item's pagen class.
    Screenshot of step 4.

Navigation Links - Server Absolute

Is my link Server Absolute?

If it starts with a forward slash, yes!

  • /myfolder/mypage.html

If it starts with an http://, https://, ../ or filename, no!

  • http://www.sonoma.edu/myfolder/mypage.html
  • https://www.sonoma.edu/myfolder/mypage.html
  • ../mypage.html
  • mypage.html

Assuming all the pages in your SSU site are on the same web server, it is best to use server absolute URLs for links to the site pages. This is because the left navigation is inserted into the page as a server side include. If the links were relative to the navigation file, the links would only work on some pages, and be broken on others.

Server absolute URLs are similar to full URLs with a couple of exeptions.

  • The server name and domain are not included.
  • They begin with a slash, and use the full directory path and file name of the page.
  • Exception: when linking to an index page (a file named index.html) the file name may be omitted.

Examples

The full URL of the IT Web Office FAQ is: http://www.sonoma.edu/it/web/faq.html

The server absolute URL is: /it/web/faq.html

Here's a snippet from the navigation for this section of the Web Standards site showing server absolute URLs in use. 

<li id="nav-5"><a href="/university-templates/how-to/" id="link-5">How the Templates Work</a>
  <ul id="subnav-5">
    <li class="page1"><a href="/web-standards/how-to/header.html">Header</a></li>
    <li class="page2"><a href="/web-standards/how-to/navigation.html">Left Navigation</a></li>
    <li class="page3"><a href="/web-standards/how-to/footer.html">Footer</a></li>
    <li class="page4"><a href="/web-standards/how-to/css.html">Cascading Style Sheets</a></li>
    <li class="page5"><a href="/web-standards/how-to/scripts.html">Scripts</a></li>
    <li class="page6"><a href="/web-standards/how-to/other.html">Other Elements</a></li>
  </ul>
</li>

Navigation Heading

The heading on the navigation uses <h2>.

The text of the navigation heading may be changed. The heading text must make sense as a navigational header. Acceptable variations include:

  • Navigation
  • Explore
  • Explore Department Name
  • Department Name

If the heading text is the name of your department, it may be appropriate to link the heading to your department homepage, espcially if your site does not use a customized header.

Example: Information Technology pages

Related Links

On some pages it may be appropriate to add a Related Links section. Each page (except Blank and Landing) has a placeholder div for Related links. If you look at the code view, it is near line 22, just after the server side include for the navigation file.

The templates include sample code for a Related Links section. This can be copied and pasted into a single page, or if the same Related Links navigation is needed on mulitple pages, you can insert it as a server side include.

<br />
<h2>Related Links</h2>
<ul id="relate-links">
  <li><a href="">Related Link 1</a></li>
  <li><a href="">Related Link 2</a></li>
  <li><a href="">Related Link 3</a></li>
</ul>