What is the Spry Framework?

The Spry Framework are a number of objects that are based on CSS, JavaScript and Ajax.
The only thing you need to know is the layout of these adjustments.
We find this in the “Insert” toolbar under the “Layout” tab or under the “Spry” tab.

Spry menu bar

The first example that I’ll discuss is adding a Spry menu bar.
Just for your information: if you have downloaded the files, you have an example of all Spry elements I’m going to discuss.

The first thing you do is place the cursor in your document where you want the menu bar.
Click the “Spry menu bar” button.

In the first dialog, we can choose between a horizontal or vertical menu.
In this example I choose “Horizontal”.

Click the OK button.

This will add the menu bar to your page.
Before we make changes to the layout of the newly inserted menu, we store our first page.

This will display a warning dialog that tells us that the files needed for this object (the bar) will be created and copied to the sitemap.
One of these files is in the CSS file format which we can adapt for our menu.

Click the OK button.

As you see in the image below, the CSS style is added in the CSS Styles panel.
To set the different styles to suit, first select the style in the upper pane and then you change the properties in the lower part of the panel.
In the beginning it might be a bit of searching to see which line does what, but when you spend a little time, I am sure you will know how it will work.

What all I can say, the seventh line, “ul.MenuBarHorizontal ul ul” is the position of the menu items and subitems.
The tenth rule “ul.MenuBarHorizontal a” determines the background color and text color of the menu item.
And the twelfth rule determines the background color and text color of the menu item when the mouse pointer is over it.

To make changes to the menu, such as text, adding or removing menu items or submenu items and adding links, we must first select the menu bar.
Move the mouse pointer above the menu bar and when the top left of a blue box appears, click it.

This opens the properties window of the menu bar.
The Properties window consists of three sections. The first box is for the menu items, the second box is for the sub-menu items, and the third box is for the sub-sub-menu items.

To change the text of the various menu items, first select the menu item or submenu item in the appropriate box and change the name in the “Text” in the properties window.

To associate a link to a menu item, you select this first and then type or browse in the “LINK” to the link you want to add.
If you want to open the link in the same browser window, leave the “Target” box blank, if you wish to open this link in a new browser window, type _blank in this box.

In the “Title”, you can give the name that appears when your mouse pointer moves over the menu item.

To remove a menu item, select the item in the box in the properties window and click the Delete button at the top of the box.
To add menu items, click the plus sign at the top of the box.
To change the position of a menu item, select the menu item in the box and click the arrows to raise or lower.

Clicking on the “Turn Styles off” button at the bottom left in the properties window, will display the menu in a “text version”. Also we can delete items here by selecting them and clicking the Delete key on our keyboards.
If you want to switch back to “normal view”, click the “Enable Styles” button in the properties window.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats