The Spry Menu Bar is a widget that creates a navigation menu using nested lists.
The widget structure is as follows:
<widget container UL>
<li menu branch><a menu item>
<li menu branch><a menu item>
<ul sub-branch>
<li submenu branch><a menu item>
</widget container UL>
The Menu Bar can have any level of menus and sub menus.
The markup and the CSS looks for ULs and LIs specifically. The actual menu items are the <a> elements on the <li>s. Any content or styling should happen to or within the <a>.
Using the provided files, the default mark up is:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.
<script type="text/javascript">
var Menubar1 = new Spry.Widget.MenuBar("MenuBar1");
</script>
A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.
<script type="text/javascript"> var widgetname = new Spry.Widget.MenuBar("id of widget container"); </script>
Constructor options allow users to specify certain attributes of the widget.
Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).
<script type="text/javascript">
var widgetname = new Spry.Widget.MenuBar("id of widget container",{option1:value, option2:value, option3:"value"});
</script>
| Option | Values | Default | Description |
|---|---|---|---|
| imgDown | path to image | null | Preloads an image used to denote a submenu, down arrrows for instance. |
| imgRight | path to image | Preloads an image used to denote a vertical submenu, right arrrows for instance. | |
| enableKeyboardNavigation | true or false | true | By default, the arrow keys will allow you to navigate through the elements in the . Setting this option to false will disable that ability. |
| upKeyCode | numeric - key code | 38 (Up arrow) | This option allows the user to assign a specific key to move the focus on the upper element then the current selected entry in the menu. Keyboard code numbers are described here. The value of the option is the keyboard code number. |
| downKeyCode | numeric - key code | 40 (Down Arrow) | This option allows the user to assign a specific key to move the focus on the lower element then the current selected entry in the menu. Keyboard code numbers are described here. The value of the option is the keyboard code number. |
| leftKeyCode | numeric - key code | 37 (Left Arrow) | This option allows the user to assign a specific key to move the focus on the left element then the current selected entry in the menu. Keyboard code numbers are described here. The value of the option is the keyboard code number. |
| rightKeyCode | numeric - key code | 39 (Right Arrow) | This option allows the user to assign a specific key to move the focus on the right element then the current selected entry in the menu. Keyboard code numbers are described here. The value of the option is the keyboard code number. |
<script type="text/javascript">
var ac1 = new Spry.Widget.Menubar("MenuBar1",{imgDown:"../downArrow.gif"});
</script>
Recall that javascript is case sensitive.
Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.