McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

How to create and update a left navigation bar

The left navigation bar (or left menu) is a vertical list of hyperlinks contained in the left_nav.lbi library file and located on the left side of the McMaster Dreamweaver templates under the McMaster heading and the top menu bar. The left_nav.lbi library file is included in the mcmaster.dwt template.

  • Automated left navigation bar
  • CSS-controled left navigation bar (deprecated)

The automated left navigation bar is surrounded by a container with a <div id="left_nav"> tag. Inside the container are nested unordered lists (<ul>) with up to as many levels as required. (It is recommened to use as few levels as possible and no more than three levels.) The top unordered list tag must be given an ID. For example,

<ul id="submenu">

After the closing tag for the container (</div), a javascript function is called with the ID of the unordered list that automates the dropdown and highlighting for the left navigation bar. The ID argument in the function call must match the ID of the top unordered list tag.

<script type="text/javascript">initializeNavTree("submenu");</script>

This javascript function parses the nested unordered list as a tree. It matches the page that the visitor is currently viewing with its file name value in the links within the unordered list. It highlights the page being viewed and any pages above in the nested unordered lists. It also opens the drop down above that page.

When drop down is required under an item in the list, create an unordered list <ul> ... </ul> in between the starting <li> tag and closing </li> tag of the item.

The exact pattern of code must be followed precisely. The following illustration describes how the coding must be done.

McMaster left navigation bar

Topics

The left menu uses nested division (<div>) tags with nested unordered lists (<ul>). The exact pattern of code must be followed precisely. The highest level menu is contained inside the <div id="left_nav"> tag. An unordered list inside of the left_nav contains links to pages in the menu. If a second level drop-down menu is required, a <div class="left_nav2"> is placed before the closing </li> of its upper level menu item. If a third level is required, the same pattern is followed with a <div class="left_nav3"> tag. The following illustration describes how the coding must be done.

FHS Fast Facts page image

Left Menu library file examples

To view the full code of a left menu, click on one of the following links:


Supplemental left menus may be placed in the left_nav_content editable region box on each page and are contained in separate library files. The supplemental menu is contained in a <div class="left_nav_custom"> tag at the top level instead of a <div id="left_nav"> tag. An example of a supplemental left menu is on the left side of this page. The help supplemental library file has been added to each of the help files. If you have multiple levels in a supplemental left menu file, it works the same way as the primary left menu file.

To view the full code for a supplemental left menu file, click on one of the following links:


After you create the left menu library file, you then control drop downs with CSS contained in each page: