Twitter Facebook RSS Logo Logo

Create Spry Menu Bar in Adobe Dreamweaver

A tool that is used to create menus and sub menus in Dreamweaver is called “Spry Menu Bar“. It’s very easy to create. Let’s start our tutorial.

Create Spry Menu Bar in Adobe Dreamweaver

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

Spry Menu Bar

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

Spry Menu Bar

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

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.

Spry Menu Bar

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

Spry Menu Bar

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

Spry Menu Bar

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

Spry Menu Bar

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

Spry Menu Bar

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

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 item can also has 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.

Spry Menu Bar

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

Spry Menu Bar

Spry Menu Bar

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

Spry Menu Bar

The features and structures of the Spry Menu Bar has been controlled by CSS which is under SpryAssets folder.

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner