Menu Test

This is an attempt at a cross browser navigation system that functions quickly and is not incredibly unplesant to look at. Please use the checkboxes below to modify te behavior of the navigation on the left.

Fluid Transition

Keep only one sibling open at a time

Functional Description

Visual Discription

The menu should have a gray background that extends from the top to the bottom of the page. The top-level items should be in blue text and the sub-level items should be gray text and smaller than the top-level items. Each top-level item should have a faint grey line above it. Every item on the navigation should have a bullet or an arrow to the left side of the text. The selected item should have a darkened background and the font should be bolded.

Initial State

The menu should start with all nodes collapsed except Animals, Felines, and Wild. Bobcat should be selected.


When you hover over an item, the entire width of the navigation should darken. When hovering over a selected item (Bobcat in this case) the left side of the navigation should darken, up to just under the down arrow next to Wild. The arrows should point right for an unexpanded item and down when the item is expanded. Items that do not expand should have a bullet instead of an arrow. All leaf items under Animals should link to when clicked. All other leaf items should do nothing when clicked.