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.
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,
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.
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.
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: