|

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