Create a Drop-Down Menu with AJAX using the Spry Features in Dreamweaver CS3
BY JANINE WARNER
One of the most dramatic enhancements to Adobe Dreamweaver CS3 is the Spry framework, a new set of tools you can use to create drop-down menus, collapsible panels, and other advanced interactive features. There are so many Spry features, Adobe added a new Insert bar to the top of the work area to provide easy access to all of the Spry options. Spry makes it easy to create AJAX, a combination of CSS and JavaScript that makes it possible to create elements that can be changed without reloading a page.
The following tutorial shows you how to create a horizontal drop-down menu bar for site navigation. You can also use these steps to create a vertical menu bar by selecting Vertical instead of Horizontal in Step 5.
Follow these steps to create a drop-down menu for your web site:
STEP 1 Plan for Your Navigation Needs
Even before you start creating a navigation menu like the one shown here, take some time to plan how best to organize the links and structure of your site. As a general rule, it’s good practice to limit the number of links in a navigation bar to no more than 6 or 7. As a result, many Web designers divide a site into a few main categories, and then further divide those into subcategories. For example, this site has a section called Talent, which serves as a main category, and then has subcategories for talent with different jumping skills.
Photos by Jasper Johal—www.jasperphoto.com
STEP 2 Set Up Your Site
You can add a Spry menu to a new or existing page, but like most of the features in Dreamweaver, things works better when you’ve first defined your Web site in Dreamweaver. If you’ve already gone through the site setup process, you’re ready for step two. If you’re creating a new site, choose Site > New Site, select the Advanced tab and fill in the fields in the Local Info category. For more detailed instructions, read the online tutorial Defining a Site in Dreamweaver on the Layer’s Web site.
STEP 3 Create a New Page or Open an Existing One
To create a new page, choose File > New and then select a file type. In the New Document Window, you can choose from a variety of file types, including ASP, PHP, and CFM. If you’re creating a new page for a basic, static Web site, choose Blank Page, HTML, and then select a CSS Layout or choose None to create a completely blank page. If you choose one of the CSS Layouts, you can alter the layout to better suit your design by editing the CSS definitions. (You’ll find tips for editing CSS layouts like this one the Dreamweaver tutorial in the last issue of Layers Magazine.)
STEP 4 Insert Spry Navigation Menu
To insert a Spry menu, first open the Spry Insert Bar at the top of the workspace by clicking on the Spry Tab, or choosing Spry from the Insert Bar drop-down list. Place your cursor where you want to create the menu in your Web page, and then click on the Spry Menu Bar icon.
[
STEP 5 Choose Horizontal or Vertical
You can use the Spry Menu Bar option to create a menu that displays horizontally across your page with sub-menu options that drop-down below the menu bar. Or you can create a Vertical Menu Bar with sub-menu options that open to the right of the main menu items. Make your selection by clicking on the corresponding radio button and then click OK to insert a generic menu bar into the page. Once the menu bar is inserted, you can customize it by changing the text, colors, fonts, and other options.
STEP 6 Adjust Alignment
The format of a Spry menu is controlled by CSS. Thus, to alter the appearance, you need to edit the CSS definitions. By default, the horizontal menu aligns to the left of the page, but you can easily align it to the right instead by changing the definition of the corresponding style. To change the alignment, you’ll need to change the Float setting. Start by selecting the style named: ul.MenuBarHorizontal li in the CSS Panel and in the Properties pane below it, click just to the right of the Float field and use the drop-down list to select right instead of left.
STEP 7 Replace Main Text
When a menu bar is inserted, Dreamweaver populates it with placeholder text: Item 1, Item 2, etc. To add your own text, simply click and drag to select the text within each navigation box and then type over it to replace it with the word or words you want to use instead. In this figure, you see that I’ve replaced Item 1 with Agents, and Item 2 with Talent, and I have selected Item 3. You can also edit menu items using the Property inspector as you see in the next step.
STEP 8 Displaying Spry Menu Options in the Property Inspector
To edit the text in the submenus, or to add or remove menu items, you need to first display the Spry menu options in the Property inspector. To make these options visible, click on the blue tab at the top left of the Spry menu that you inserted into the page. In this example, it’s labeled Spry Menu Bar: Menu Bar 1. When you click on the menu tab, the Property inspector displays the corresponding Spry options.
STEP 9 Edit Submenu Text
With the Spry menu options open in the Property inspector at the bottom of the work area, you can edit the submenu text by first selecting the menu item in the left-most menu field, and then selecting the submenu item in the middle menu field. You can edit the text of any selected item in the Text field at the far right of the inspector. As you see in this example, Item 1.1 has been replaced with LA Office, Item 1.2 with NY Office, and Item 1.3 is selected so that the text can be edited in the Text field.
STEP 10 Add or Remove Menus and Submenus
You can add menu or submenu items by selecting any item listed in the Property inspector and then clicking on the plus (+) sign at the top of the corresponding menu field. To remove a menu item, select it and click the minus (-) sign. For example, you can add a third level menu item by selecting a submenu item and then clicking the plus sign above the third menu field. In this figure, a third-level submenu item, Manhattan, is being added to the submenu item NY Office, which is a submenu item of Locations.
STEP 11 Creating and Editing Links
A menu bar, by design, should include links to the main sections and subsections of a Web site. To turn any menu item into a link, select the item in the Property inspector and enter the URL in the Link field. You can also use the browse button (hint: it looks like a yellow file folder) to locate and select any file in a Web site and set the link automatically. If you are setting a link to a top-level menu item, you can also select the text in the main workspace and set the link in the Property inspector.
STEP 12 Change Text and Background Colors
To edit the text and background colors in a Spry menu, you must edit the corresponding styles. The tricky part is that the style definitions for text and background colors are included in the link styles, which have multiple states. For example, the style named: ul.MenuBarHorizontal a, defines the background and text color that display when a link is first loaded by a browser. However, if you want to change the text or background color that appear when a visitor rolls a cursor over a link, you’ll need to change the definition for the style named: ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus.
STEP 13 Change the Font Face or Style
By default, the font in a Spry menu is the same as the page font. Thus, if you’ve created a Body style to specify that the page font as Verdana, the Spry menu text will also display in Verdana. If you want to change the font used in the menu without altering the page font, you can add a font definition to the style named: ul.MenuBarHorizontal. To do so, double click on the style name in the CSS Panel and in the CSS Rule Definition dialog, enter a font face or choose a Font collection from the Font drop-down.
STEP 14 Preview in a Browser to Test
To test a Spry menu, you’ll need to preview your page in a Web browser, such as Safari or Firefox. Just click on a menu or submenu item to see the drop-down items in action and test the links. Beware, that if you have to levels of submenus on the right side of the screen, as you see in this example, they may extend beyond the page display area.
