Spry Menu Bar

The Spry Menu Bar is a versatile multi-level navigation control; the front page of this website uses a customized vertical menu bar. A horizontal layout is also offered for the same control, and when you first insert the Menu Bar you will asked which layout you want to use. The Menu Bar is then inserted into the page at the current cursor position.

Configuring the Menu Bar

The Menu Bar below is the default configuration for a horizontal layout. Move the mouse over the various menu elements to see them activate. Notice that some items have submenus (ensure you have JavaScript turned on to allow the menu to work):

 

 

Items are added and removed, and their functions configured through the Properties for the widget. When the Menu Bar is selected, the Properties window will look like this:

Menu Bar

This example shows the Properties for the default Menu Bar insterted on this page. The left-most column shows the top level of the menu, and the middle column shows the contents of the submenu for the item selected in the first column. If the selected item in that submenu had a further submenu, this would be shown in the third column.

Are added and removed from a menu using the + and - icons, and are repositioned, moved up and down, using the up and down arrow icons. The text for each menu item is set in the Text box and if a link is set for the item, then clicking on that item in the live menu will open the file linked to.

Customizing the Menu Bar

The appearance of the Menu Bar is customized by editing its CSS rules. It is very simple to change the basic colours and fonts used to display the menu by altering the background-color, color and other properties for just two CSS rules.

Rule Properties Value
ul.MenuBarHorizontal a background-colour #AAFFAA
color #000000
font-family Georgia
ul.MenuBarHorizontal a.MenuBarItemHover
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-colour #009900
color #FFFF99
font-family Georgia
font-weight bold

Once you have instered your basic Menu Bar, open CSS window and select the All button in the CSS Styles tab. Then find the rule that you want to edit - it will be listed in the SpryMenuBarHorizontal group (for a reminder of how to work with style rules, click here).

So, firstly, for the rule that defines the properties of the "a" element of the ul.MenuBarHorizontal component, the properties for the background colour, the font family and the font's foreground colour are modified. Secondly, the single rule that controls the properties for three different Menu Bar states is modified with a deeper background colour, a contrasting foreground colour, the same font family and the weight is made bold.

Click here to see a version of the basic menu bar customized with these settings.

As you can see from the Menu Bar on the front page, it is possible to make striking visual changes with CSS rules.

Centreing the Menu

Centre a MenubarThe most common question I'm asked by students is "how do I centre a horizontal menu bar?" The answer is not completely straightforward, but you can find a description of the process here.

Further Reading

There is an excellent in depth article about customizing a Spry Menu Bar on the following web site: