How to Use Dreamweaver CS 3 Spry Menu Bars

By Virginia DeBolt

The Dreamweaver CS3 Spry Insert Panel displaying the Spry menu bar icon The Dreamweaver CS3 Spry Insert Panel displaying the Spry menu bar icon

Rate: (4 Ratings)

Dreamweaver CS3 came equipped with new functions labeled Spry, which are a WYSIWYG way to add AJAX to a web page. They automatically provide you with HTML, CSS and JavaScripts to perform certain interactive functions. In this article, you'll learn how to use the Spry menu bar widget.

Instructions

Difficulty: Moderate

Things You’ll Need:

  • Adobe Dreamweaver CS3 software
  • A web page in progress
  • A plan for what you need to include in your menu

Step1
The menu bar can be put in the sidebar on the left. You probably already have a site started and know what links you need in your menu. The examples here use a basic built-in Dreamweaver CSS layout page. If you use a two-column layout like those shown in the image, you would want the menu bar in the sidebar on the left.
Step2
Decide whether to use a horizontal or vertical menu. Position the cursor where you want the menu bar to go. Then click the menu bar icon on the Spry insert bar. A dialog opens asking whether to make the menu horizontal or vertical.
Step3
The basic menu bar on the Dreamweaver document window The menu bar appears in your specified location. It uses dummy text like Link 1 and Link 2 which you can customize.
Step4
Use the Property inspector to customize the links. While the menu bar is selected in the document window (see image in Step 3 where the highlighted blue indicates the menu bar is selected), you can change properties using the Property inspector. By highlighting the various Items in the menu bar, you can change the text, move Items up and down in the order they appear, add more links or remove unneeded links.
Step5
The uncustomized menu in a browser You can preview the menu in the browser to see how the menu works and to check the color scheme.
Step6
The menu HTML is just a list. Look at the Code View in Dreamweaver and you'll see that the menu is a list styled for the browser with CSS.
Step7
Change any appearance rules for the menu bar using the CSS panel A new stylesheet for the Spry widget was added to your site when you added the widget. To change the color scheme or any other appearance rules, go to the CSS panel and modify any colors, sizes or styles that don't match your site. Find the style you want to change and click the pencil icon to edit the style. Make any changes you want and Click OK.
Step8
When you are finished customizing the menu bar, remember to upload all the HTML, CSS and JavaScript that Dreamweaver generated for the Spry widget to the server.

Comments

| View All Comments

Veesites said

Flag This Comment

on 4/11/2008 MarkfromOZ -- that URL didn't work. Try this:
http://redmelon.net/tstme/box_model/

Veesites said

Flag This Comment

on 4/11/2008 MarkfromOz said "thank you for your input, when i enter auto in the properties you suggested, the menu items shorten. As the main width is 955px, setting 136px for each menu item results in a gap of 3px at the right side end of my menu items. Could someone please correct me where i am going wrong or should i use a 3rd party menu builder to work in with my DreamweaverCS3 web software?"

I had the idea that you wanted each of the menu items to expand or contract to fit the size of the words that were there. Sorry, I guess I misunderstood. Width: auto would make each item size individually.

955 divided by 7 is 136.4. You may not be able to set the item width exactly for that, however, because you need take into account padding and borders. I don't see a how to about the box model at eHow (guess I should write one :) ), but you'll find an explanation here http://redmelon.net/tstme/box_m

Flag This Comment

on 4/10/2008 thank you for your input, when i enter auto in the properties you suggested, the menu items shorten. As the main width is 955px, setting 136px for each menu item results in a gap of 3px at the right side end of my menu items. Could someone please correct me where i am going wrong or should i use a 3rd party menu builder to work in with my DreamweaverCS3 web software?

Veesites said

Flag This Comment

on 4/10/2008 linoz, Spry is the WYSIWYG tool Dreamweaver uses to automate some functions that use AJAX. You don't really learn AJAX using Dreamweaver to do this. It just gives you some help with certain things.
Here's the definition of AJAX:
Ajax (Asynchronous JavaScript and XML) is a method of building interactive applications for the Web that process user requests immediately. Ajax combines several programming tools including JavaScript, dynamic HTML (DHTML), Extensible Markup Language (XML), cascading style sheets (CSS), the Document Object Model (DOM), and the Microsoft object, XMLHttpRequest.

Veesites said

Flag This Comment

on 4/10/2008 MarkfromOz, The style selector to control the appearance is ul.MenuBarHorizontal a, and ul.MenuBarHorizonal a.MenuBarItemHover. The Dreamweaver style only comes with color and background color, but you are free to add any additional styles you want, such as background images or border lines. If you want varying widths on the menu items, set the width to auto.

The main width is set in ul.MenuBarHorizontal. The width of the pop ups is set in ul.MenuBarHorizontal ul li.

View All

Post a Comment

POST A COMMENT

Request a New How-To Article

Looking for more How To information? Chances are there’s an eHow member who knows how to do what you’re looking to do. Submit an article request now!

eHow Article:  How to Use Dreamweaver CS 3 Spry Menu Bars

eHow Expert: Virginia DeBolt

Virginia DeBolt

Expert: Internet

Profession: http://www.vdebolt.com

Location: USA

Related Ads

Internet

Veesites
Meet Virginia DeBolt eHow’s Internet Expert.