Things You'll Need:
- Adobe Dreamweaver CS3 software
- A web page in progress
- A plan for what you need to include in your menu
-
Step 1
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.
-
Step 2
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.
-
Step 3
The basic menu bar on the Dreamweaver document windowThe menu bar appears in your specified location. It uses dummy text like Link 1 and Link 2 which you can customize.
-
Step 4
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.
-
Step 5
The uncustomized menu in a browserYou can preview the menu in the browser to see how the menu works and to check the color scheme.
-
Step 6
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.
-
Step 7
Change any appearance rules for the menu bar using the CSS panelA 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.
-
Step 8
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
alonsokari1 said
on 11/6/2008 In dreamweaver 8 I was able to create a drop down menu using the behaviors tool. I cannot figure out for the life of me, how to do the same in this version. All I want to do is to be able to move over the About Us tab, and have a menu appear...Anybody?
alonsokari1 said
on 11/6/2008 In dreamweaver 8 I was able to create a drop down menu using the behaviors tool. I cannot figure out for the life of me, how to do the same in this version. All I want to do is to be able to move over the About Us tab, and have a menu appear...Anybody?
lollielala said
on 8/24/2008 Hi everything worked
nice with the Menu Bars,
I'm now trying the Spry
collapsible panel.
What I'm not sure of is how
to assign an already
established button(contact)
button to function the same as the
action open/close button.
Its probably something very
simple...(well, I hope)
Veesites said
on 4/11/2008 MarkfromOZ -- that URL didn't work. Try this:
http://redmelon.net/tstme/box_model/
Veesites said
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