Adobe Dreamweaver Spry Menu Tutorials

What is Spry Menu?

A tool that is used to create menus and sub-menus in Dreamweaver CS6 is called “Spry Menu Bar“. It’s very easy to create. Adobe Dreamweaver includes a powerful and easy navigation-building tool—the Spry menu bar. With it, you can put all your site’s most important links into a compact horizontal or vertical menu.

What is Spry Menu?

Add Spry Menu Bar

To add the Spry menu bar to your website, Go to Menu Insert > Layout Objects > Spry Menu Bar

Add Spry Menu Bar

Then a dialog box opens with two options, Horizontal and Vertical. Select an option and press Ok. Here we have selected the Horizontal menu bar.

Horizontal and Vertical

After clicking Ok, the Horizontal menu bar appears as below with default names like item 1, item 2, item 3, etc.

Edit Spry Menu Bar

To edit the item names either double-click on the menu tab or use the Property inspector.

You can add menu or submenu items by selecting any item, listed in the Property Inspector and then by clicking on the plus (+) sign at the top of the corresponding menu field. To delete a menu item, select the item and click the minus (-) sign.

Now I am going to rename the main menu items with my own menu names.

On the right side of the property window, you can find a field named “Text”, there you can type the menu item’s name like Home, About Us, etc… The changes will appear immediately.

spry7

Hence after renaming the main menu items, the Menu bar will be similar to below.

Now we need to edit the submenu items. The submenu already has some default names like item 1.1, item 1.2, etc.

spry9

Add or Delete Menu Bar

You can add or delete menus and submenus by clicking the symbols “+” and “-” which are present above the submenu column or second column. We can create an “n” number of menus & submenus.

Edit Spry Menu Bar

Rename the submenu items with your own submenu names using the similar method which you have done for the main menu. Submenu items can also have submenus. In the Property Inspector, select the name of the main menu item to which you want to add the submenu. Then click the plus button above the second column to create a new submenu item.

spry11

Finally, we have created the spry menu bar using Dreamweaver. While saving the file it will automatically create a SpryAssets folder with javascript and CSS.

spry12
spry13

This Spry Menu Bar has a default rollover color option. You can also customize or restyle it by changing the text, colors, fonts, and other options using SpryAssets.

spry menu14

Spry Menu Task 1

Spry Menu Task 1

Spry Menu Task 2

Spry Menu Task 2

Spry Menu Task 3

Spry Menu Task 3

Take Your Free Live Demo Class Now

We Will Call Back You Shortly

Enter Your DETAILS BELOW

We Will Send You the Course Fees Details In Below Number

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

We Will Call Back You Shortly

Enter Your DETAILS BELOW

Enter Your DETAILS BELOW TO take

free demo class