Edit an AJAX Drop-Down Menu in Dreamweaver

SHARE
, / 3481 50

Adobe Dreamweaver CS3 and CS4 include the Spry framework, a set of widgets you can use to create drop-down menus and other advanced features. The Spry menus make adding a drop-down menu in Dreamweaver easy, but editing the styles that control the color, size, and other attributes of a menu can get complicated. This tutorial shows you how to customize a drop-down menu.

1 INSERT A DROP-DOWN MENU
To insert a Spry menu, first chose Spry from the drop-down list at the top of the Insert panel (or in the Classic workspace layout, open the Spry Insert bar at the top of the workspace by clicking on the Spry tab). Place your cursor where you want to create the menu in your webpage and then click on the Spry Menu Bar icon.

2 CREATE HORIZONTAL OR VERTICAL MENUS
As you insert a Spry Menu Bar, you have the option to create a menu that displays horizontally across your page with submenu options that drop down below the menu bar, or a vertical menu bar with submenu options that open to the right of the main menu items. You must make this choice during the setup process by clicking on the corresponding button and then clicking OK to insert the menu. Once the menu bar is inserted, you can’t change its orientation.


CREDIT: ©ISTOCKPHOTO.COM

3 FIND THE STYLE YOU WANT TO EDIT
Open the CSS Styles panel (Window>CSS Styles). Click the All button at the top of the panel and twirl open SpryMenuBarHorizontal.css. Click-and-drag the top of the Properties pane in the CSS panel (shown here) until you can see the list of your styles and their defined rules. A good way to start is to click on each of the style names in the All Rules list and review their settings in the Properties pane. Look for color, font, and size settings, which you’re likely to want to change. In the next few steps, we’ll cover several of these styles specifically.

4 ADJUST ALIGNMENT
Like most options for a horizontal menu, the alignment is controlled by a CSS style. By default, the horizontal menu aligns to the left of the page, but you can align it to the right by changing the definition of the style named, “ul.MenuBarHorizontal li.” Click on the name of the style in the CSS Styles panel and then in the Properties pane, click just to the right of the Float field to use the drop-down list, and select Right instead of Left. If you prefer, you can double-click the style name to open the CSS Rule Definition dialog.

5 CHANGE ROLLOVER COLORS
The trick to changing the colors of the drop-down menu items is that in CSS, these colors are assigned to the link styles, which have multiple states. To change the background and text colors of links as they display when a page first loads, you’ll need to edit the style named, “ul.MenuBarHorizontal a.” To change the colors that appear when you roll a cursor over a link, edit the background and text colors in the style, “ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.Menu….” (Note: If you created a vertical menu, these style names will include “Vertical” instead of “Horizontal.”)

6 TEST YOUR WORK EARLY AND OFTEN
Many changes to these styles are only visible when you view the page in a Web browser or in the new Live View option (available in Dreamweaver CS4). If you click on the Live View button at the top of the workspace, you can preview the page and test interactive effects, such as rollovers, without leaving Dreamweaver. This is a handy way to check things, such as whether the rollover color is set the way you want it. Don’t be afraid to experiment; you can always change the style definitions back if you don’t like the way something looks.

7 CHANGE THE FONT FACE AND SIZE
By default, a Spry drop-down menu will display in the font specified in the body style—or in the closest parent style—for the page. You can alter your drop-down menus so that the font is different than other text on the page by adding a font style to the style named, “ul.MenuBarHorizontal.” Double-click on the name of the font to open it in the CSS Rule Definition dialog (shown here) and then enter a font face or choose a font collection from the Font-family drop-down menu.

8 CHANGE THE WIDTH OF MENU ITEMS
You can change width settings in the style named “ul.MenuBarHorizontal li.” By default, the width is set to 8 em. For those not familiar with the em option, it specifies sizes based on the size of the letter M in the font face used in the style. This flexible option is a great way to set the width of these link boxes to best fit their contents. If you have longer names and they wrap, you can increase this size, for example to 10 em, to get all of the text on one line. A little goes a long way with em sizes.

9 CHANGE THE WIDTH OF SUBMENU ITEMS, TOO
If you want the drop-down items to display in the same width as the main menu items, you’ll have to adjust the Width setting for the drop-down list in two other styles. Again, a little goes a long way when adjusting em sizes, and you’ll notice a slight difference with these two. If you change the main link width from 8 em to 10 em, you should change the 8.2-em Width setting to 10.2 in the styles named “ul.MenuBarHorizontal ul” and “ul.MenuBarHorizontal ul li.”

10 EDIT MENU ITEMS IN THE PROPERTY INSPECTOR
When a menu bar is inserted, Dreamweaver includes placeholder text for several menu items and submenu items, such as Item 1, Item 2, etc. To edit menu and submenu items, click the blue Spry Menu Bar tab (at the top-left of the menu in the workspace) to select it and then use the settings in the Property inspector. Simply click on the menu item or submenu item that you want to change and then select the text in the Text field on the right and then type over it to replace it.

11 ADD MENU ITEMS
To add menu or submenu items click the plus (+) sign at the top of the corresponding menu field, or click the minus (-) sign to delete an item. 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. Be sure to change or add text in the Text field in the far right of the Property inspector.

12 CREATE AND EDIT MENU LINKS
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 website and set the link automatically. If you’re 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, or use the Hyperlink icon in the Common Insert menu.

13 PREVIEW IN A BROWSER TO TEST
To fully test a drop-down menu, you’ll need to preview your page in a Web browser, such as Safari, Internet Explorer (IE), or Firefox. Ideally, you should test using all three of these browsers (and others) to ensure that the menu works well for all your visitors. Drop-down menus can be especially tricky when it comes to displaying in different Web browsers. If you’re having trouble with IE and you’re viewing the menu on your local computer, make sure you click to Allow Blocked Content at the top of the browser window.

50 Comments

  • Taylor says:

    This really isn’t an AJAX menu as its not using AJAX at all. Its just a javascript/DHTML menu. Great walk-through on styling though!

  • Arnout Kazemier says:

    Good tutorial, it will probably help a few people to get started with SpryMenu’s.

  • Sam says:

    Great tutorial. But… Take it over the top and show us how to apply spry effects to make it fade in or slide in. That would be awesome!!!

  • Gianluca says:

    I have a really interesting problem by now: I was using spry 1.4 to do this menu. Underneath the menu (vertical) was a flash movie clip, but the “dropdown” of the menu went over the flash and was visible. This however is not working with opera 9.
    So I tried with spry 1.6.1 and this had a mistaken display of the dropdown even in IE 7/8 ! Can anybody please tell me how to make the menu pop on front of the flash ?
    Thanx

  • Rizwan says:

    hey, I think had this same issue, you
    you need to modify the embed code of the flash in your site.
    Editing HTML code manually

    To edit an existing HTML page, add the WMODE parameters to the HTML code.
    Got this from – http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201

    1. Add the following parameter to the OBJECT tag:

    2. Add the following parameter to the EMBED tag:

    wmode=”transparent”

    I used it in a site here http://www.cheltd.com (the menu goes over the flash video ad playing)

  • Muhammad Shahid Akram says:

    To Gianluca,
    Please select your flash object and go to the properties panel, select Parameters button, and add following lines, wmode as parameter and transparent as value, i hope this will solve your problem

  • Ice_9 says:

    The tutorial said”If you’re having trouble with IE and you’re viewing the menu on your local computer, make sure you click to Allow Blocked Content at the top of the browser window.”

    I am having this problem. That this mean that when it is published on a server the menus will work without hitting the “Allow Blocked Content ” statement?

  • Paul says:

    Gianluca

    Right click on the flash object, select parameters, enter wmode:transparent. The menu will now drop down in front of the flash object.

  • Brian says:

    Excellent tutorial. Question – how do I utilise this menu structure on many pages without coding on every page? Can this menu be a library item?
    I think if I can master this problem my worries are over – at least for now.

  • MysticPizza says:

    Make sure your Z-Index of the drop down menu is set to 120

  • anitha says:

    hai..can you pls tell me how to make table less site.iam could n’t get how to insert roll overs using tags.pls help.

  • Tom Smalling says:

    Gianluca,
    You might need to add the “WMODE” property to your flash file (in either dreamweaver or Flash). Here’s the Adobe technote on the subject:

    http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201

  • Dean2000 says:

    Dreamweaver is prone to creating superfluous code. Hence, you could build an Ajax Drop Down menu using standard XML, ASP and XMLHttpRequest :

    http://imagecowboy.com/articles/create_ajax_menu_asp_part1.asp

  • Bette says:

    heya, for some reason I have the word false appear in between my sub menus in the drop down box. Can anyone tell me how to fix it?

  • Brian says:

    Is it possible to use a different font/size/colors on the submenus rather than what is used on the main menu?

  • Nick C. says:

    Hi,
    I am new to dreamweaver and don’t code yet. I don’t know flash or fireworks yet.
    Dreamweaver CS4: I have a banner graphic across the top that has differient colored boxes that line up with a spy menu widget one colored box in the graphic for each spry menu item below it.
    I am try to make each spry menue item background match the colored box above it.
    I have been able to change the spry menu background color, however this changes all the menu items color to the same color (not what I want).
    I tried to add seperate spry menu widgets in a row across the top of my page but could not make this work. I also tried to put a seperate spry menu widget in each cell of a form table; this didn’t work because I could not select the spry widget in the table after it was inserted.
    Can anyone can help a newbie?
    Is there a way to change individual spry menu item background colors?
    Is there a way to insert a button graphic into the top of the spry menu instead of text?
    Thanks and best to you … Nick from sunny Florida

  • sagar says:

    How can I set “Border” to a menu that I created.? Can anybody help me?

  • George Sumbatashvili says:

    I have problems with submenu alignment on some of the windows machines. Some of them show drop down menu in a horizontal way and some normaly vertical. Is there any way to fix it?

  • George Sumbatashvili says:

    I have problems with submenu alignment on some of the windows machines. Some of them show drop down menu in a horizontal way and some normally in a vertical. Is there any way to fix it?

  • Rapsy Tee says:

    Please I’m using Macromedia Dreamweaver MX 2004 and I have search through platform of the software there I can’t find any SPRY. Does Macromedia Dreamweaver MX 2004 have Spry at all?
    If YES! —How can I get this on Macromedia Dreamweaver MX 2004 Menus?
    Because I have search the insert nothing like spry there.

    Please direct my reply to my email address?

    • sandrine says:

      Please I’m using Macromedia Dreamweaver MX 2004 and I have search through platform of the software there I can’t find any SPRY. Does Macromedia Dreamweaver MX 2004 have Spry at all?
      If YES! —How can I get this on Macromedia Dreamweaver MX 2004 Menus?
      Because I have search the insert nothing like spry there.

      Please direct my reply to my email address?

      i have the same problem: did you find the solution? please repond to my mail, thank you
      sandrinegirardeau@hotmail.com

  • Ashfaq Khatri says:

    thanks rizwan.. worked very well for me.. the drop down menu are over the flash movie

    i just made a new css style

    .swfDiv {
    z-index: 0;
    }
    and applied it on the flash..

  • Darren says:

    Hi,
    I saw this previous post and hope someone can send me the response.

    I am new to dreamweaver and don’t code yet. I don’t know flash or fireworks yet.

    Dreamweaver CS4: I have a banner graphic across the top that has differient colored boxes that line up with a spy menu widget one colored box in the graphic for each spry menu item below it.

    I am try to make each spry menue item background match the colored box above it.
    I have been able to change the spry menu background color, however this changes all the menu items color to the same color (not what I want).

    I tried to add seperate spry menu widgets in a row across the top of my page but could not make this work. I also tried to put a seperate spry menu widget in each cell of a form table; this didn’t work because I could not select the spry widget in the table after it was inserted.
    Can anyone can help a newbie?

    Is there a way to change individual spry menu item background colors?

    Is there a way to insert a button graphic into the top of the spry menu instead of text?
    Thanks
    Darren

  • Jeff says:

    I am having an issue with Spry menu vertical. When I hover over the menu item my sub menu displays correctly BUT the original menu item disappears??? What can I do to keep the higher level menu item still displaying when the subordinate items display.

  • MarkG says:

    Great thanks I finally understand Spry Tabbed Menus !

  • donald says:

    Hi everybody, please give a hand to a newbie dreamweaver here, i don’t know why my behavior, spry widget are not function in IE browser neither firefox, i don’t if there is the internet security are broking the file, make the image, text doosn’t appear correctly,i really don’t know why. please give my a hand.

  • Jaime says:

    Is there a way of making menus display to the left of the parent (on a vertical menu bar).

    TIA,

    Jaime

  • Elaine Davis says:

    I am working in Dreamweaver CS4.
    I would like to be able to click on a word or image link and have a window SLIDE open to reveal an image or an enlarged version of the image link itself. I DO NOT want it to be a URL.
    Can someone tell me how to do this?
    Thanks

  • Marisa Feldman says:

    I created a menu bar for my page that I was designing for school, but it doesnt work properly when I load it to the site, although it does when loaded in dw on my personal cpu. Can I get some help?

    http://datsexyladyi.webs.com/

  • Vlood says:

    I tried to create sucg horizontal menu – the problem is: it occupies only some part of its container div. Just like in your last sample image! but i need to sit this menu inside a div which would stretch to the whole width of my main frame. All attempts to set a color for this div were useless, and i can’t understand what’s wrong with this.

  • Wanda Almeida says:

    Janine

    I’d like to use this menu, but as a drop line, where all the itens of sub menu will be in line. Is it possible?
    Thanks in advance

  • Anthony says:

    Can someone help me out!
    I just want a header and submenu links, But I can’t give the header an different color and backgroundcolor. Can someone explain to me how i can fix this?

    just see my site: http://www.flyershop.nl
    as you know, all content is in dutch 🙂

  • diZe says:

    Hi,
    Great page with a good manual how to use Spry Menubar.
    I’ve create a page in my website with horizontal menu. I’ve also decided to use a frameset in my website.
    main Topframe, Downframe and rightframe.

    In the topframe I’ve the horizontal menu. But it can’t be shawn properly when I preview it in the webbrowser. The scrolling function doesn’t work properly. Why? It doesn’t shown because is under the downframe, where I would like to drop the links.

    What can I do?

  • Tara Winkler says:

    I’m working on a spry menu bar in Dreamweaver CS4. I want the main buttons to be red with bold white text. I want the mouseover (hover) to be peach with bold red text. I want the submenus to be pale pink with red text (normal weight) and a dashed red line 1 px on the bottom of each sub menu button. I want the main button from which the submenu drops down to be the same as the rest of the main buttons. What spry styles do I need to change (how the heck do I do this?).

    What I have now is main buttons and submenu buttons red with bold white text and a mouseover (hover) of peach with bold red text. I can’t seem to accomplish the pale pink with red text (normal weight) and a dashed red line 1 px on the bottom of each sub menu button.

    Thanks for your feedback.

  • JOVAN says:

    I do not have a spry where to Faina

  • Cechols says:

    How in the heck do you get the menu bar to CENTER horizontally on the page?

  • Maureen says:

    YES! Exactly my question, too! Please. How do we CENTER the menu horizontally on the page!?

  • René says:

    I used cs3 of dreamweaver and I changed the colors of the menubar.
    (ul. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus)
    Safari does not show the right colors.
    When I use Firefox there is no problem at all.
    How can I fix that?

  • Melissa says:

    Thanks for the tutorial– I learned a lot! One question– How did you get the little “triangle” drop down indicator to disappear where there are submenus?

    Thanks,
    melissa

  • Maud says:

    Whaou thank you so so much for your explication…

  • eddie says:

    Hi i want to ask if i dont ;want my children to drop directly below the mother or shift the children to the left of the mother how can i adjust that? and
    if i had a table and in the middle, how can i set that middle point to be 0 pixel where i can just declare that place is 0 pixel

  • Dom Hurley says:

    Hi, I’ve made a spry menu, but when its published it works fine on my computer but works differently on other computers.
    When you hold the mouse over the menu, the drop down menu appears a several places around the screen.
    Anybody any idea what I’m doing wrong?

    Thanks

    Dom

  • paula says:

    When the cursor is placed over a link in my spry menu the submenu is displayed for a very short period of time then disappears. How do I change the houver state to display longer?

  • Sudesh says:

    You saved my job! Thank you very much!!

  • Really this was very helpful for me to creating my new website

  • Rene says:

    I have a probelme integrating the dropdownmenu in my website. In local view everything seems oke.
    All of the menu works but as soon as i bring it alive to my website in only see the contents of the menu in a braeakdown structure. You can see what i mean at http://www.beginop.nl/gezondheid.html.
    what do i need te do to handle this problem, Iuse dreamweaver cs 5.5 where this dropdownmenu is build with as well.

  • Madhu says:

    Can anyone please tell how the change the down arrow image in the spry menu, i want to use some other icon.

  • Bashmax says:

    Bravo, Merci >>>>>