Editing the Global Menu and Dropdowns
Dropdown Menu Styles
Navigator creates CSS nested unordered lists for the global menu, with the dropdowns as unordered lists of pages contained within the list items for the sections:
<ul> global menu container
<li> site section (“tab”)
<ul> container for list of pages within section
<li> a page within the section.
The elements of the unordered list are given classes to facilitate styling. We are of the belief that more options are better, even if some are unused.
The conditions of a list item in the global menu are default (sectionitem), hover (sectionitem_over), and selected (#sectionitem_selected). The selected state is an ID instead of a class, as there is only one selected section item on any given page.
Each list item contains a link, which has several possible states: sectionlink:link, sectionlink:visited, sectionlink:active and sectionlink:hover. Links in the selected state may be styled by adding #sectionitem_selected to the link definitions.
Functional styles are defined such that when the section item is moused over, the dropdown menu appears. This is handled in sn_dropdown-control.css, which should not be edited if you want your menus to work!
Another little code string is the javascript inside the global menu div element. This calls an external javascript file to handle the quirks of Internet Explorer 6 and 7. This doesn't make it a javascript menu; the js really only renames some elements to be compatible with the "special" way IE handles hover on list items. Please leave this intact for cross-browser compatibility!
Dropdown menus are lists of pages within a section. They’re given a class of pageitem and if selected, an id of #pageitem_selected.
Page links have a global style of a.pagelink, plus the other standard states for links (default, visited, active, and hover).
The default condition in Navigator’s menu CSS is to apply background images, background colors, padding and borders to the list items. Link colors, hovers and backgrounds may work with the list item styles to create your menu look.
The relationships between list item styles and link styles can become complex. For the most part, you should be able to edit just the colors and background images to give your own look to the menus. If you have trouble, draw a diagram of the containers with their correct classes and ids, and see if this helps you visualize how the menu elements should be styled.
