- Introducing Spry Widgets
- Creating and Formatting Tabbed Panels
- Creating Menu Bars with Spry
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating Menu Bars with Spry
When the mouse pointer hovers over a menu bar, a submenu appears. Menu bars allow for a lot of menu options to be accessed from a clean, uncluttered main menu. The interactivity they provide when a visitor hovers the mouse pointer over a menu option adds a dynamic element to a web page.
Menu bar widgets can be horizontal or vertical:
- Vertical menu bars typically are aligned in frame, table column, or other layout objects (such as a DIV or an AP DIV) on the left side of the page.
- Horizontal menu bars typically are aligned on the top of the page, and can be placed there without being inserted into a layout object.
The Spry widget for inserting menu bar widgets allows you to generate menu bars with two levels of submenus. Therefore, a user can click a menu option, see a submenu with a new set of options, choose one of those options, and pick from a second submenu.
To generate a menu bar widget, follow these steps:
- Save the page into which the widget will be inserted.
- Choose Insert > Spry > Spry Menu Bar. When the Spry Menu Bar dialog box appears, choose horizontal or vertical format.
- After generating a menu bar widget, you can define some basic menu bar
properties in the Property inspector. Select menu items or submenu items on the
left side of the Property inspector; then modify them as you like (see Figure
4):
- In the Text box, enter the text that will appear in the menu.
- In the Link box, enter the link that will open when the item is clicked.
- In the Title box, enter the accessibility text that will appear in the browser window when a user hovers the mouse pointer over a menu option.
- Leave the Target box empty to open the link in the same browser window, or enter _blank to open the link in a new browser window.
- Use the plus (+) and minus (-) buttons above the menu or submenu (or sub-submenu) columns to add or delete new menu items. Use the Move Item Up and Move Item Down buttons as needed to change the order of menu items.
)
Figure 4 Defining levels of menu bar options in the Property inspector.
When you create or select a menu bar widget, a Turn Styles Off button appears in the Property inspector. Turning styles off doesn’t affect how the style is rendered in a browser, but rather turns off formatting in the Document window. You can adjust the formatting of various menu bar properties of a selected menu bar by using the CSS Styles panel.
Every menu bar generates at least a dozen CSS styles. Most of these CSS styles define positioning and size of the menus and submenus that appear when a user hovers the mouse pointer over a menu option. The default positioning of these menus is usually fine and doesn’t need to be adjusted. You can create a customized menu bar by defining your own links and text, and give it a distinctive format by customizing text and background colors.
Some of the CSS style options control relatively inconspicuous elements of the menu bar, but all of them can be edited in the CSS Styles panel. To edit the styles associated with a menu bar widget, expand SpryMenuBarHorizontal to display a list of class styles associated with this style sheet. Selecting one of these class styles in the top part of the CSS Styles panel allows you to edit properties for that style in the bottom half of the CSS Styles panel.
To change the background or text color for the menu bar, select the style ul.MenuBarHorizontal a (for a vertical menu bar, ul.MenuBarVertical a). With the style selected in the CSS Styles panel, use the background-color swatch box in the bottom half of the CSS Styles panel to choose a new background color, and use the color swatch to change font color (see Figure 5).
)
Figure 5 Changing the text color for a menu bar.
Another option is to change the background and text color of a hovered-over horizontal menu option, using these items:
- ul.MenuBarHorizontal a.MenuBarItemHover
- ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a.MenuBarSubmenuVisible
The style for vertical menu bars is similar, but with Vertical in place of Horizontal in the style name.
As you’re beginning to see, Spry menu bars offer many, many customizable elements. For the best results, experiment. Essentially, you edit the content of menu bars either in the Property inspector, or by selecting one of the multitude of generated CSS styles and editing it in the CSS Styles panel.
Okay, you’re on your own now! Have fun with these and other Spry widgets. And remember to stay in touch and let me know how they’re working out on your sites.