Graphic Identity Program

Web Template: Pre-2014

Using the navigation
JavaScript add-on

The Navigation JavaScript Add-on greatly reduces the work involved in maintaining a site’s navigation. Typically, it was necessary to set the CSS classes for each page in a site. Then each level of navigation needed to be expanded and contracted. This could take a lot of time for most sites.

The Navigation JS Add-on can be used by almost anyone. Each user’s situation is going to be slightly different, but the JS solution should be able to be used in most Web environments. There is no download necessary for the Navigation JS Add-on. Just follow the steps below.

How it works

A separate single file is set up to hold your entire navigation structure. This file provides the navigation links appropriate for the entire site.

The Navigation JS Add-on detects the page currently displayed by examining the page’s address. It then expands the correct section and/or sub-section of the navigation for display.

The Navigation JS Add-on calls the JavaScript function as soon as the navigation portion of the XHTML document loads. If the page currently displayed exists in the navigation, it will get assigned the “navcurrentpage” CSS class.

The Navigation JS Add-on then determines if the link is on the first, second or third level of the navigation. If it is not a first level link, it will apply the “navparentpath” CSS class to each of the parent links.

NOTE: Web visitors that do not have JavaScript turned on or available will see the entire site navigation expanded. All links will function normally. This is the desired behavior to ensure an accessible navigation.

Using the navigation JS add-on

Step 1: Know your environment

Determine how you are going to use the Navigation JS Add-on. To make the Navigation JS Add-on usable, a separate single file must be set up to hold the site’s entire navigation structure. If using Dreamweaver, a Library Item can be used for this file. If using Visual Studio and .NET, then an .ascx file will do the trick. Some developers may want to use an “include file”.

TIP: It is recommended that you do not use JavaScript to create the single navigation document. Visitors without JavaScript enabled will not be able to see the navigation at all.

The remaining instructions are geared to Dreamweaver. The process and concepts are the nearly the same across all environments, so please know your environment.

Step 2: Set up a single navigation file

If Dreamweaver is used, follow these steps.

  1. File->New->Library Item
  2. In the code view portion, paste or type the site navigation tree. Be sure to include the proper XHTML structure for list items.

    You may want to include your featured links and any links that come after your “navdivider” class in this file as well. This will keep your entire navigation in one spot and make it easier to maintain.
  3. Save the file once the list of links is completed. Your page in design view should look something like the image below.

Below is the code structure of a sample navigation file. It is for the Web page you are reading.

<div id="featured">
<ul>
<li><a href="../tips/index.aspx">Tips and Tricks</a></li>
<li><a href="../faqs/index.aspx">FAQ</a></li>
<li><a href="../downloads/index.aspx">Downloads</a></li>
</ul>
</div>

<ul>
<li><a href="../index.aspx">Home</a></li>
<li><a href="http://designer.wsu.edu/template/Default.aspx">Template Designer</a></li>
<li><a href="index.aspx">Guidelines</a>
<ul>
<li><a href="who.aspx">Who Should Use Templates</a></li>
<li><a href="colors.aspx">Colors</a></li>
<li><a href="backgrounds.aspx">Backgrounds</a></li>
<li><a href="wsuid.aspx">WSU Identifier</a></li>
<li><a href="siteid.aspx">Site Identifier</a></li>
<li><a href="navigation.aspx">Navigation</a></li>
<li><a href="primary-content.aspx">Primary Content</a></li>
<li><a href="footer.aspx">Footer</a></li>
<li><a href="academic-content.aspx">Academic Content</a></li>
</ul>
</li>
<li><a href="../downloads/index.aspx">Downloads</a></li>
<li><a href="../examples/index.aspx">Examples</a></li>
<li><a href="../support/index.aspx">Support</a>
<ul>
<li><a href="../faqs/index.aspx">FAQs</a></li>
<li><a href="../tips/index.aspx">Tips and Tricks</a></li>
<li><a href="../training/index.aspx">Training</a></li>
<li><a href="https://webapps.wsu.edu/mcis/forum/forum.aspx">Support Forum</a></li>
<li><a href="../support/email-list.aspx">Designers E-mail List</a></li>
<li><a href="https://ais.wsu.edu/mcis/bugTrackMC/Report.aspx">Report a Bug</a></li>
</ul>
</li>
<li><a href="http://designer.wsu.edu/template/glossary.aspx">Glossary</a></li>
<li><a href="../resources/index.aspx">Resources</a></li>
</ul>

<ul class="navdivider">
<li><a href="http://identity.wsu.edu//" target="_blank">WSU Identity Site</a></li>
</ul>

Step 3: Including the single navigation file into your site

Once you have the navigation file created, you will need to add it to your pages or template.

  • Add the navigation file library item by dragging it from Dreamweaver’s assets window into the navigation region of the Web page.
  • Make sure the library item is in the correct spot. This is easier to do by examining the code.
    • Look for the <div id=”nav"> tag inside the HTML. This should be where the navigation starts. Your library item or single file navigation solution should follow directly after this starting navigation div tag.
    • Your library item should end and be followed by the closing navigation div tag. </div>

Step 4: Including the JavaScript navigation file and calling the function

Before the navigation will work, you will need to make sure it is linking to the JavaScript file and calling the function that collapses the navigation links. Find the closing navigation div tag and add the following code immediately after it:

<div id="nav">
   -- My single file solution --
</div>
<script    language="JavaScript"    src ="http://www.wsu.edu/navigatewsu/gen2/navstyle.js"
   type="text/javascript">
</script>
<script language="JavaScript" type="text/javascript">initNav();
</script>

 

That’s it!

To update your site’s navigation, simply update the single navigation file and enjoy the ease of managed navigation.

If you would like to learn more on how to use Dreamweaver’s library items, check out this tutorial.

Overriding the system

There are cases where it is necessary to specify what page is the current page. Not all pages share a one- to-one relationship with the navigation. If you find that you need to be specific and override the navigations default behavior, you can do that by pasting the code below into your HTML. Past the code into your HTML document in between the <head> and </head> tags. Replace the “mypage.html” with the name of the page that you want to be the current page.

<script language="JavaScript" type="text/javascript">
var navcurrentpage="mypage.html";
</script>

Troubleshooting

The page displayed is not highlighted as the current page.

  • Make sure everything is spelled correctly. If the page name does not match that of the navigation, the JavaScript can not properly label the content.
  • Make sure that you did not skip step 4 above.
  • If using relative links, you may need to make sure that the location of the library item is on the same level as your pages. This can be handled by changing your links or moving the location of the library item.

The page loads all the navigation.

  • This can happen when JavaScript on the client browser is disabled. This is the desired behavior to ensure content is still accessible.
  • This can appear for a brief time before the JavaScript is executed on slow connections and slow computers. This is a known behavior of the system and is being explored further.

 

 

Life is good at WSU.

Marketing and Creative Services, PO Box 641227, Washington State University, Pullman WA 99164-1227, 509-335-7622, Contact Us