BU Core Design
Frequently Asked Questions Contact
Overview Components Design Elements Menus and Forms

Content Navigation

Content Navigation example

The BU Core Design uses a Content Navigation menu that is almost entirely based on Cascading Style Sheets. Only the heading ("Components" in the example at right) is graphical -- all other elements use CSS. This approach offers several benefits over old-style navigation menus based entirely on graphics: pages load faster, menus are vastly easier to edit, nested HTML tables are kept to a minimum, and the navigation menu is far more user-friendly for alternative Web access devices such as handheld computers and Web-enabled cellular phones.

The Content Navigation menu uses a combination of a specialized CSS file and a simple Javascript file to determine the active page (the SmartNav System). Two graphics are used to display the active-page indicator and the active-page indicator on mouseover. These graphics are not loaded on the page, but rather are accessed by the CSS file when needed.

Creating and maintaining this navigation is very basic HTML. The entire Content Navigation menu is a header graphic followed by a simple HTML list. Advanced CSS techniques are used to create a link area that includes not only the text itself but also the "block" around the text. This makes the navigation menu behave like a graphic-based menu without all the additional graphic elements to download and the hassle in creating complex, nested tables.

But this new menu technique doesn't stop there -- more advanced CSS techniques are used to easily create child menus under main topics. When a child menu is required under a specific item, creating a nested list within the main list automatically indents the child menu. Need child menus 3 or 4 levels deep? Just nest more lists within the main list, and the nested menus are automatically indented.

Components

 

 

download files

  This Site   BU   Directory  

NIS  |  OIT  |   August 22, 2006

Core Design
BU Core Design home page Boston University home page Boston University home page