How to Do Spry Menus
To add an attractive and dynamic navigation menu to your website, create one using Adobe's Spry features. In his book, "Dreamweaver CS3: The Missing Manual," author David Sawyer McFarland summed up Spry as "a collection of advanced JavaScript programming that lets you add a lot of dynamic effects to your Web pages." (See References) Since Dreamweaver CS3 and CS4 come with Spry features, you can use either version of the Web design software to develop your site and create your navigation menu with relative ease.
Other People Are Reading
Things You'll Need
- Dreamweaver CS3 or CS4
- Computer with Internet access
- Spry menu software
Instructions
-
-
1
Place your cursor where you will insert your Spry menu onto your Dreamweaver HTML page. Make sure this is one of the first things you do when you develop your site; this way, your first page acts like a template, and your menu will carry over to the additional pages.
-
2
Click on "Insert" in the menu bar at the top of your screen. Move your cursor toward the bottom of the drop-down menu, hover over "Spry" then "Spry Menu Bar" in the sub-menu and click.
-
-
3
Select whether you want your menu bar to be horizontal or vertical and click on the appropriate button.
-
4
Change the menu labels from "Item 1" through "Item 4" to the appropriate names such as "Home," "About" and "Contact." You can do this in "Design" view, "Code" view or in the "Properties" section at the bottom of the page. The Properties section allows you to edit your sub-menus and insert hyperlinks for the menu tabs.
-
5
Save your document. Dreamweaver will ask if you want to save the dependent Spry files; these include the JavaScript document that controls the Spry menu's functionality and the CSS file that manages the menu's appearance. Click "OK."
-
6
Continue customizing your menu bar. There are two ways to re-access the Spry editor in the Properties section. When you click in your menu, a blue bar should appear at the top of it: click on it to open the Spry editor below. You can also click on <ul.MenuBarVertical#MenuBar1> or <ul.MenuBarHorizontal#MenuBar1> in the "Status Bar" at the bottom of your HTML document.
-
1
Tips & Warnings
To edit your menu bar's appearance, click on the tab above labeled "SpryMenuBarVertical.css" or "SpryMenuBarHorizontal.css" and switch to "Code" view. You can adjust your color, padding and borders in this file. The CSS file should open automatically since it is dependent on your HTML file. If it doesn't, open the folder where you store your site. In the folder called "Spry Assets," open your CSS file.
Unless you're familiar with JavaScript, it's a good idea to leave the Spry JavaScript (JS) file intact. One glitch in this file could cause your menu to not function the way it was originally intended; it could also impact the usability of your entire site.
