Virginia Tech
ABCD001: Non-Credit Knowledge Unit

Sample Course

Instructor: Ima Teacher

Lessons Skip Lesson Menu



Download Accessible Dynamic Navigation System Script


This JavaScript creates breadcrumb trails (see green bar on top) and previous and next links (on the left at the top and bottom of the page) based on a series of unordered nested lists within a page (on the left of the page). The nested lists update on the fly to show where you are in the hierarchy of pages.

Use Instructions

You must first include links to the needed JavaScript and CSS files from your page, as follows:

<script src="../navigation.js" language="JavaScript" type="text/JavaScript"></script>
<style type="text/css">
@import url(../style.css);

Next, there must be an unordered list in the page with the id, "menu" surrounded by a div tag with an id of "cloneDiv" as folows:

<div id="cloneDiv">
<ul id="menu">


This unordered list may have as many levels of nested unordered lists as you require, but you must use valid markup for the lists or the script will not work.

Somewhere on the page there must also appear the leaf, plus, and minus images, with the appropriate names. The width and height of these images should be set to 1 to almost hide them from browsers that don't have CSS enabled. To hide them from CSS-enabled browsers surround the images with a div tag with its class set to "notthere" as follows:

<div class="notthere">
<img src="images/leaf.gif" width="1" height="1" id="leaf" alt="" />
<img src="images/minus.gif" width="1" height="1" id="minus" alt="" />
<img src="images/plus.gif" width="1" height="1" id="plus" alt="" />

This hides the images from display, but they need to be there for script.

Next there must be a div with the id "breadcrumb" as follows:

<div id="breadcrumb">&nbsp;</div>

This is where the breadcrumb trail will be placed.

For the first Prev and Next links, you will need to have span tags with the ids "prev" and "next", respectively, as follows:

<span id="prev">&nbsp;</span> &nbsp;| <span id="next">&nbsp;</span>

If you want another set of Prev and Next links (say you wanted one at the top of the page and one at the bottom), you will need to have span tags with the ids "prev2" and "next2", respectively, as follows:

<span id="prev2">&nbsp;</span> &nbsp;| <span id="next2">&nbsp;</span>