Produced by KelbyOne

Spry Navigation in Dreamweaver CS3

One of the most dramatic enhancements to Adobe Dreamweaver CS3 is the Spry framework, a new set of tools that you can use to create drop-down menus, collapsible panels, and other advanced 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.

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.)

[Download a preview of this project, here. All files are for personal use only.]

STEP 1 Plan 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 site’s links and structure. As a general rule, it’s good practice to limit the number of links in a navigation bar to no more than six or seven. 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” as a main category, and then has subcategories for talent with different jumping skills.


CREDIT: JASPER JOHAL

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 work better if you first define your website. If you’ve already gone through the site setup process, you’re ready for the next step. 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” at www.layersmagazine.com/defining-site-dreamweaver.html.

STEP 3 Create New Page/Open Existing One
To create a new page, choose File>New and then select a file type. In the New Document dialog, you can choose from a variety of file types, including ASP, PHP, and CFM; however, if you’re creating a new page for a basic, static website, choose Blank Page, HTML, and 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 suit your design by editing the CSS definitions. (You’ll find tips for editing CSS layouts like this one in Layers, July/August 2007, p. 72.)

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. Place your cursor where you want to create the menu in your webpage, and then click on the Spry Menu Bar icon (or go to Insert>Spry>Spry Menu Bar).

STEP 5 Choose Horizontal or Vertical
You can use the Spry Menu Bar dialog to create a menu that displays horizontally across your page with submenu options that drop down below the menu bar. Or you can create a vertical menu bar with submenu options that open to the right of the main menu items. Click on the corresponding button to make your selection 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 by changing the definition of the corresponding style. To change alignment, we need to change the Float setting. Start by selecting the style named “ul.MenuBarHorizontal li” in the CSS panel, and then in the Properties pane below it, click 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. As you can see, we’ve replaced Item 4 with Agents, and Item 3 with Talent, and we’ve selected the next item. Note: You can also edit menu items using the Properties inspector, as you’ll see in Step 8.

STEP 8 Display Spry Menu Options
To edit the text in the submenus, or to add or remove menu items, you first need to display the Spry menu options in the Properties 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: MenuBar1.” When you click on the menu tab, the Properties inspector displays the corresponding Spry options.

STEP 9 Edit Submenu Text
With the Spry menu options open in the Properties inspector at the bottom of the work area, you can edit the submenu text by first selecting the menu item in the leftmost 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. In this example, we’ve replaced Item 1.1 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 Properties 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. Here, we’re adding a third-level submenu item, Manhattan, to the submenu item NY Office, which is a submenu item of Locations.

STEP 11 Create and Edit Links
A menu bar, by design, should include links to the main sections and subsections of a website. To turn any menu item into a link, select the item in the Properties inspector and enter the URL in the Link field. You can also use the Browse icon (it looks like a 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 Properties 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 browser first loads a link. 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:MenuBarItemHover….”

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 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 menu.

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: If you have two levels of submenus on the right side of the screen, as in this example, they may extend beyond the page display area.

108 Comments

  • jim mcdonald says:

    My Spry horizontal dropdown menu works strange in ie7: The drop downs are about 150 pixels higher than the menu location. Also the image at the top doesn’t even showup. I’m using tables to layout the page.

    http://www.lohshelp.com

    The page shows up great in Safari for Mac.
    -many thanks!

  • Ronda Allan says:

    Can I add a sound to a spry menu so that when someone rolls over the menu items you hear a beep or something?

  • sheila says:

    Why does IE insist on indenting my Spry Vertical menu as if it’s li items are normal li items ruled by the site’s CSS instead of the SpryMenuBarVertical.css? All padding and margins are set to 0.

  • sheila says:

    Found an IE 6 fix to the indenting: in the final Spry style (ul.MenuBarVertical li.MenuBarItemIE), I added a negative margin-left value (I used -6px). This corrected the problem without screwing things up in Firefox or Safari.

  • jan says:

    I’m asking many of the same questions, but mainly I would like to know what to do about my spry horizontal sub-menu showing at the top of the page in IE.

    Does anyone ever answer these questions? Where can I go to actually see answers to these questions?

  • Martha says:

    Spry menu bars have nothing but trouble. Mine finally works in ie, but does not function at al in Firefox. Any suggestions?

  • kevin says:

    No kidding, the person who wrote the article should be answering these

  • Janine Warner says:

    Hey there,

    Just wanted you to know that I do read your questions, but most of these will take far more than a simple comment to answer. Look for a new tutorial (coming soon) with many more details about editing drop-down menus. I’m also planning to create a video tutorial so that you can “see” how some of these features work. Drop-down menus are one of the most complex features you can create in Dreamweaver, and it’s impossible to cover it all in one short tutorial. Just wanted you to know I understand how frustrating it is and I’m working with my editor to get more instructions up here soon.

  • Becky Pellinger says:

    I have a horizontal spry menu in a template. I want to edit it, but I can’t get the blue spry menu tab to show up so I can select it. Can you help?

  • Crystal says:

    I have an issue too with IE and the submenu loading in the top left hand portion of the screen. I would venture to say… the answer should be in the spry css IE HACK portion of the code. If I figure it out, I’ll post.

    @Becky – I was having the same problem, but it was with my submenu and I couldn’t edit it in DW. In the document, the css of the horizontal menu ended up being set at -1000em so it was not showing so I could edit. I set it to 1000em and it worked fine. I can’t rememeber which portion of the css, but I figured it out by looking up the original css for the spry menu online and comparing mine side by side correcting things I didn’t think was right. The bad thing was, I couldn’t just open a new file and insert a new spry menu to start over. It would read from the spry css from the previous menu I created. I was pulling my hair out on that one :s.

    I would recommend keeping a copy of the original spry css somewhere handy until you get the hang of those spiffy spry’s, lol.

  • Arlen McCluskey says:

    I can’t get my spry menu to work in IE 7 at all! I’ve been reading dozens of different discussion boards and it’s all no help at all. I feel so frustrated, because I spent forever trying to learn how to get it to work and now i have no clue what to do next. You can see them here:

    http://www2.hawaii.edu/~amcclusk/index2.html

    any help would be hugely appreciated!
    arlen dot mcc at gmail dot com

  • barb says:

    Hi there, I have created a horizontal drop down menu (Dreamweaver template page). It looks great in Safari but doesn’t work properly in IE7. In IE7 the submenu section appears at the top right hand side of page partially obscured by a cell of the main table. Is there some code I can add to my site to fix this so that it views correctly in IE7?

  • Cindy says:

    When I preview my spry menu everything looks great, however when I transfer it to my server, the website displays it like a bulletted list. I transferred all the files in my SpryAssets folder, but something seems to be missing. Can anyone help?

  • MDC101 says:

    Look in the style sheet for the spry css.
    delete
    float: left;
    background: #FFF;
    This will fix the ie7 bug

    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
    display: inline;
    float: left;
    background: #FFF;
    }
    }

  • cindy says:

    I created a vertical drop down menu using spry menu bar in dreamweaver cs3 but in the same page i also have flash photo gallery. when i click on the menu bar, the menu appears behind the photo gallery. it looks really bad on firefox. need help! thanks.

  • Damodar says:

    I also have a problem with Horizontal spry menu and IE7. When I bring my mouse over the menu, the submenu drops down from right hand side top of the screen. I cannot figure out wats to be done. Please guide me…

    Thanks

  • maulesh says:

    Hello everyone,
    I have created a website everything is working good even spry menu bar… the only problem i got is if in future if i add any link or spry menu bar or a sub item under one item… then i have to manually do that for each and every pages is their a way if i do changes to one spry menu bar it will change to all?

  • Chris says:

    Frameset with a spry does not show in the
    window, the drop down is hidden behind the adjacent frame. How can I make this visible?

  • Christina Rivet says:

    Dreamweaver horizontal spry menu sub menus drop down and open in IE but will not drop down in Firefox, can you help?

  • Sue says:

    Hi, Im creating a spry horizontal menu and would like the submenu to also be horizontal. Is this possible? I have been trying everything.
    Thanks

  • Eileen Kwiatkowski says:

    I am using Dreamweaver CS3 and have been having problems with Spry Menu Bars. Adding a submenu causes the program to stop responding. I didn’t have this issue at first but now it happens all the time. I work around it by making revisions in the code, but I would really love to use the Spry feature as intended. Any ideas?

    Thank you,
    Eileen

  • Alan says:

    Im using Spry menu at the first time. I dont like the blue mouse color, how do I change it, have been looking at the CSS, but cant´ find the solution.

  • Pam Burt says:

    I have created a template page w/a centered horizontal spry menu. When I create new page from template, my preview (and subsequent new page) is wrong (menu is to the left, background color is gone.) But if I preview that page in IE everything works and is correct – if I go to save that page I am prompted that a widget file containing horizontalbar.css is missing.

  • Ed says:

    Ok so we are not going to get any answers from this site – where can I go to find the solution to the same problem as this guy I have psted below? – thanks

    ‘I’m asking many of the same questions, but mainly I would like to know what to do about my spry horizontal sub-menu showing at the top of the page in IE.
    Does anyone ever answer these questions? Where can I go to actually see answers to these questions?’

  • Mandy says:

    Spry menu template HELP!
    I am creating a template to be used across mu website. The only problem I have had is that I would like the spry menu colors to be editable (which I can do)without changing the colors on all pages. When I change the color on the next page it changes them all. I would like a different color for the menu on every page. Can anyone help me define my regions to make this happen?

  • Dulcinea says:

    Hey all,
    I finally found the following page:

    http://objectmix.com/macromedia-dreamweaver/399032-another-spry-menu-internet-explorer-problem.html

    …where some good soul explained how to get this stuff to work.

    There’s way more detail on the page about getting other stuff to work, you should all check it out, but this is the bit I used:

    Fix the expanding box problem by removing all &nbsp or tags (non-breaking spaces and line-breaks) from the text you’re adding to the spry menu. This worked for me. Once I removed them and arranged the text without using them, I stopped getting the error messages when I checked browser compatibility. Hope this helps!
    🙂

  • april.dolby says:

    i don’t get it still don’t say what navigation means

  • kelly says:

    hi, i’ve created a menu using spry collapsible panel widget. Can anyone tell me how to trigger the drop down menu by only hovering it instead of clicking on it?

    Thx.

  • Ron says:

    OMG, and here I’ve been “thinking” of trying to use spry on a website. It seems like there are a lot of mishaps and bugs in this “new technology”, and I’m not sure I want to try it.

    Can anyone make it not as scary? Maybe ADOBE techs could actually ANSWER some of these questions, and give some instructions without making us pay more for one of their “nifty” additions to DW.

  • spstache says:

    OMG, and here I’ve been “thinking” of trying to use spry on a website. It seems like there are a lot of mishaps and bugs in this “new technology”, and I’m not sure I want to try it.

    Can anyone make it not as scary? Maybe ADOBE techs could actually ANSWER some of these questions, and give some instructions without making us pay more for one of their “nifty” additions to DW.

  • ShawnMac63 says:

    I am the same problem as this:

    “I am editing css for my spry nav bar and can’t figure out how to have a different background color for the tab of the page that is open. For example when I am on the HOME page I want that tab a different color so the visitor knows what page they are on. I don’t see a style in the menu bar css that describes this condition. How would I write the selector?”

    Is there a way to do this?

    Thanks

  • Marina Post says:

    Everybody should be starting here: http://www.adobe.com/devnet/spry/

    As much as I love the Layers tutorials, I think they are better used after you take Adobe or Lynda.com

  • Mia says:

    I cannot see Blue Spry Selection Tab. I made sure “show invisible elements” setting is turned on and that Hide All is off. What else could cause the tab to not be visible? Please Help!

  • Jason says:

    excellent tutorial. exactly what i was looking for.

  • Jennifer Gray says:

    Hi – I just want a simple spry menu navigation menu – but I cant see the drop down menu in IE. I am confused – perhaps I am using the incorrect “link” to connect the main menu to the submenu ? Please Help!

  • TIm says:

    Can someone just answer the question of how to center a horizontal spry menu???

  • Norman Dallura says:

    How do I get rid of the blue border on a selected tab?

  • rahul says:

    ur site is too long downward make it short if u want users to come again

  • Ray Kelly says:

    My horizontal spry menu bar looks good except for one thing…after clicking on one of the links, a very think boarder appears around the box. Is there any way to remove this?

    The background colors are set to #FFF…not sure why this is happening???

    Many thanks in advance!

  • Becky says:

    When I add a spry toolbar into a frame (leftframe) I cant get the blue menu option in step 8. Is anyone else having this problem?

  • Nemira says:

    For centering Spry Menu Bar You can look at http://www.thesitewizard.com

  • Shannon says:

    In regards to positioning the menu, I have heard alot of complaints about it going left or right and I had the same problem. I have been struggling with this for days, and I finally decided to play with the padding. To fix my problem, I opened the CSS for ul.menubarhorizontal.li and under “Box” I adjusted “padding left” by pixels amounts. I found that 17 px was the right amount to make it look centered.

  • Russell says:

    What good is having this nice feature, if there is no realistic way to adjust the links contained within globally? This really nice tutorial doesn’t address that at all unfortunately. Starting from scratch, you can utilize templates, but for an existing site, it appears to be useless if you ever have to change a link.

  • L Reed says:

    I have been doing this for years and cannot figure out how to make this “improved” pop-up menu work vertically in IE -IE any version.
    Is ADOBE LISTENING????

  • 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?

  • Lucy R. says:

    Hello,
    I have been reading this for a while looking for an answer but I didn’t find it…!
    Sorry if someone has already asked this, but I’m going crazy trying to figure out How to make the options in a single line?? I mean, in my menu almost every option has two or three words: too much text: so it automatically makes it in two or three lines. Example: The menu I’m working on now has this options (sorry it’s in spanish):

    – Administración
    – Concejo Municipal
    – Gestión Administrativa
    – Desarrollo y Control Urbano

    And in the Spry Bar Menu it appear like this:
    – Administración
    – Concejo
    Municipal
    – Gestión
    Administrativa
    – Desarrollo
    y Control
    Urbano

    , making the list looking messy and confusing.

    I have been trying in every option making new and modifying Height and width styles, but nothing seems to work yet. If you can help me, any of you, I would really appreciate it.

    Thank you very much!

  • Yvonne says:

    Hello,
    I wanted to be able to change the background color of the parent menu to “none” so that the background image shows through. And I want the sub-menu to be a solid color.

    I thought I had it, as it looked perfect in Firefox but in Explorer 7, both the parent menu and submenu are white….it seems when you set the bg color to none…it shows as white in explorer 7…..is there a fix for this?

  • Lucy R. says:

    Hi,
    I found the solution. In the CSS code:
    1. Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
    2. Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.

    It’s all here: http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS895F3A6D-6D73-42ef-B568-3D04ABD2F171.html

    Hope that help somebody else and not just me..!!

  • TJ says:

    Hi is there a way to create the navigation 1 time and then pull it into all other pages using css or something else. That way if you need to change the menu bar in the future it will automaticly be updated on all 100+ pages?

  • Jen says:

    Help! After looking thru comment after comment on many different sites, I am just not finding an answer!

    I created spry vertical nav menu (http://trueassociation.org), and it works great on every page EXCEPT the index page? On the index page, the drop down element doesn’t work. I have copied that spry bar to other pages and tested and it works; I have copied and replaced that spry bar from other pages and put it on index, it still doesnt open…
    What am I doing wrong?