Latest:

View Source: The Easy Way to Add Dynamic Elements to Web Sites

by
17 Comments

Until recently, you probably only used the word "spry" to describe an aging yet still nimble person. But Dreamweaver CS3 introduced the world to a new meaning of the word: an exciting set of tools based on Adobe’s Spry Framework for Ajax. Spry is a set of JavaScript files that let you easily add dynamic elements, such as drop-down navigation menus, tabbed panels, and interactive data tables, to a Web page. The Spry framework isn’t actually a part of Dreamweaver — it’s a separate Adobe project. However, Dreamweaver CS3 includes a friendly user interface for adding many Spry-driven page elements (called “widgets”).

One of Dreamweaver CS3’s most useful widgets is the Spry Menu Bar (Figure 1). The Spry Menu Bar provides a way to include lots of links in a compact space. Each menu button can include an additional pop-up menu, and each button on one of those pop-up menus can have yet another pop-up menu. So in addition to the main navigation buttons, the Spry menu bar supports two levels of pop-up submenus.


Figure 1. Dreamweaver CS3’s new Spry Menu Bar lets you create interactive navigation bars with up to two levels of pop-up sub menus.

With Spry menu bars, you don’t ever have to worry about the complex JavaScript required to make pop-up menus pop. But while Dreamweaver makes it easy to insert a Spry Menu Bar, you still need to be familiar with the new interface for modifying the menu bar, and understand the long list of CSS styles that make the menu bar look good, so you can change its appearance to match your site’s design.

Adding a Spry Menu Bar to a Web page is a three-step process. First, you tell Dreamweaver to insert the menu bar, which adds a JavaScript file and a CSS file to your site and adds HTML to create a “starter menu” of links. Second, you edit the menu Dreamweaver inserted by changing the text of the menu buttons, and adding new menu options and links to other pages on your site. Finally, you modify the CSS that Dreamweaver supplies to match the look of your site.

This tutorial will take you step-by-step through adding and modifying a Spry Menu Bar.

Insert a Spry Menu Bar
Adding a Spry Menu Bar to a Web page is a snap. To follow along with these instructions, download the folder below, then double-click on the folder to uncompress its files:

  • spry_menu_site.zip
    1. Open Dreamweaver and choose Site> New Site. Click the Advanced tab in the Site Definition window and type in "Spry Menu" for the site’s name. Click the folder icon to the right of the Local Root Folder field and select spry_menu_site, which is the folder you downloaded and uncompressed. Click OK to finish defining the new site.

    2. In the Files panel, double-click the file navbar.html (or choose File> Open and open the file navbar.hml in the spry_menu_site folder).
    3. Click in the page’s left-hand column (just above the graphic of the flaming book).

      This is the general process to follow whenever you wish to add a navigation bar — just click on the page where you want the nav bar to go.

    4. Choose Insert> Spry> Spry Menu Bar. The Spry Menu Bar window appears. Here you choose the orientation of the navigation bar: horizontal (a row of buttons as you might see near the top of a Web page) or vertical (a column of buttons commonly used as a left-hand nav bar.) For this tutorial, choose Vertical, then click OK.

      Dreamweaver inserts a column of four buttons labeled “Item 1″, “Item 2″, and so on. A blue tab labeled "Spry Menu Bar: MenuBar1" appears at the top of the buttons. This tab identifies the menu bar, and you click it to edit the list of links of the navigation bar.

    5. Choose File> Save.

      Dreamweaver pops open a dialog box that lets you know it has saved several files to the site. When you add a Spry widget, Dreamweaver stores a JavaScript file, a CSS file, and several graphic files in a folder named "SpryAssets" in the site’s root folder. These files make the Spry magic possible, so don’t delete them, and be sure to move them to the Web server when you’re ready to publish your Spry-enabled Web pages.

    Edit the Menu Bar
    To make the generic menu bar Dreamweaver inserts match the structure of your site, you need to edit, add, and delete buttons.

    1. Click the blue tab to select the menu bar. The Property Inspector displays the properties of the menu bar (Figure 2).


      Figure 2. Dreamweaver inserts a generic menu bar with four buttons (Item 1, Item 2, and so on).

      There are three columns, each of which list the names that appear on the menu’s buttons. The left column represents the buttons for the main navigation bar (Item 1, Item 2, etc.). The middle column represents the buttons of a pop-up menu for a button selected in the left column; for example, the generic Item 1 button has a pop-up menu with more buttons (Item 1.1, Item 1.2, and Item 1.3). The last column represents a sub-sub menu — in other words, a pop-up menu that appears when you mouse over a button on the first pop-up menu.

      There’s no rule that you must have two levels of pop-up menus — whether you add a sub-sub menu depends on the complexity of your site’s structure. Many designers avoid a second level of pop-up menus.

    2. In the Property Inspector, click Item 1. In the text field at the right side of the inspector, change Item 1 to Home.
    3. Click the folder icon to the right of the Link box and select the file index.html from the site. This makes the button a functioning link that points to the home page of the site.

      Dreamweaver’s generic menu bar includes a pop-up menu on the first button. In this case — a link to the home page — you don’t need a pop-up menu, so you’re about to get rid of it.

    4. In the Property Inspector, click Item 1.1 in the second column of buttons. Click the minus (-) button at the top of the column to delete Item 1.1. Repeat this step to delete Item 1.2 and Item 1.3.
    5. Select Item 2 in the left column and, in the Text field at the right of the Property Inspector, change its name to Products. Add a link to the file products.html.

      Next, you’ll add a pop-up menu to this nav button.

    6. Make sure you still have Products selected in the left-hand column. Click the plus (+) button in the middle column to add a new pop-up menu and button. Change its name to Catalog and link it to catalog.html.
    7. Repeat the last step to add another button named Order, which links to order.html.

      You can add yet another pop-up menu to create a sub-sub-menu. You’ll do that in the next step with the Order button you just created.

    8. Make sure Order is selected in the middle column of the Property Inspector. Click the plus (+) button in the third column and type "US Orders" in the Text field and link the new button to us.html. Add another button named International Orders and link it to international.html.

      Next, you’ll add one last button to the top level of the main nav bar.

    9. On the left column in the Property Inspector, select Item 3; rename the button Contact Us and link it to contact.html.

      Finally, clean up the rest of the navigation bar by removing the pop-up menu attached to the Contact Us button (see Step 4) and removing Item 4 from the main menu.

    Style the Menu Bar
    Now that you’ve inserted and modified the Spry menu bar, you have a fully functional navigation system. Unfortunately, the generic look of the Spry Menu bar probably doesn’t match the style of your site. To change the menu buttons’ appearance, you must edit the Dreamweaver-supplied CSS styles. The look of the menu buttons is defined by a set of CSS styles located in SpryMenuBarVertical.css (for vertical menus) and SpryMenuBarHorizontal.css (for the side-by-side look of horizontal buttons).

    There are a few styles you’ll probably want to change most of the time: the width of the menu buttons, borders around menus, and the text and background color for menu buttons. In addition, each menu button changes appearance when you move your mouse over it, so you’ll probably want to change the text and background color for buttons when they’re moused over.

    Figure 3 below shows formatting for menus and menu buttons and the CSS style name that controls that formatting.


    Figure 3.

    Now you’ll change the look of the navigation bar you created earlier.

    1. Open the CSS Styles panel (Window> CSS Styles). To see all of the menu bar styles, click the plus (+) button (triangle on the Mac) next to the style sheet name SpryMenuBarVertical.css (Figure 4).


      Figure 4. Use the CSS Styles panel to view and edit the CSS styles that format a Spry Menu Bar.

    2. In the CSS Styles Panel, double-click the style ul.MenuBarVertical. This opens the CSS Rule Definition window. Change the font size to 150%, then click the Box category and change the width to 150 pixels. Click OK to finish editing the style.
    3. You’ve just enlarged the font size and made the menu fit the entire width of the left-hand column. If you preview the page, however, you’ll see that although the border that surrounds the main menu expands to 150 pixels, the actual menu buttons aren’t as wide. That’s because a separate style controls the width of the menu buttons. In the CSS Styles Panel, double-click the style ul.MenuBarVertical li. Click the Box category and change its width to 150 pixels. Click OK to finish editing the style.
    4. The width of pop-up menus and the buttons on pop-up menus are defined by two other styles. Follow the previous step and set the width of the ul.MenuBarVertical ul and ul.MenuBarVertical ul li to 150 pixels.
    5. Next, you’ll change the background color and text color for the buttons. In the Styles panel, double-click the style ul.MenuBarVertical a. In the Type category, change the color to #990000. Click the Background category and change the background color to #F3F4C7. Click the OK button to finish editing the style.
    6. If you preview the page now, you’ll notice that the buttons change to an alarming shade of blue when you mouse over them. You’ll change that color next. In the Styles panel, double-click the ul.MenuBarVertical a.MenuBarItemHover. Click the Background category and change the background color to #1F4848.

      This change won’t affect page display in Internet Explorer 6, however. Edit the style ul.MenuBarVertical a:hover and change that style’s background color to #1F4848.

      Now the menu looks good, but it would look better with lines separating each button.

    7. In the CSS Styles Panel, double-click the style ul.MenuBarVertical a. Click the Border category. Uncheck the 3 Same for All boxes, and add a solid 1-pixel bottom border with a color of #CCC (Figure 5). Click OK to finish the style.


      Figure 5. You can add a border to any styled element using the Border category of Dreamweaver’s CSS Rule Definition window. To change individual border lines, uncheck the three Same for All boxes.

      You may notice that the bottom of the menu has a double border. The bottom border you’ve just added applies to each menu button, but the overall menu has an outline around it, as well. That means the 1-pixel bottom border for the last button in the menu sits on top of the bottom border of the menu. A quick fix for this is to edit both the main menu (ul.MenuBarVertical) and the pop-up menu (ul.MenuBarVertical ul) styles. Remove the bottom border from those styles.

    8. Preview the page in a Web browser. It should look like Figure 1 in this article. There’s a finished version of the page in the folder you downloaded and decompressed. Look for the sub-folder FINISHED_NAVBAR.

    You can further change the look of the navigation bar by editing the CSS styles in the SpryMenuBarVertical.css file. To quickly discover which properties are applied to each style, select the style name in the CSS styles panel and view the CSS properties associated with that style in the Properties pane (see the bottom pane in Figure 4 above).

    You may also want to change the look of the arrows that appear on any button with a pop-up menu. The graphic signals users that a pop-up menu will appear if you mouse over the button. Dreamweaver inserts four graphics into the SpryAssets folder along with the JavaScript and CSS file used to control and format the navigation bar. The files are SpryMenuBarRight.gif (a right-pointing arrow), SpryMenuBarRightHover.gif (a right-pointing arrow that appears when you mouse over a button with a pop-up menu), SpryMenuBarDown.gif (a down-pointing arrow used with horizontal nav bars), and SpryMenuBarDownHover.gif (the rollover version of the down-pointing arrow.) You can create new graphics with the same names — keep the images small, around 7×7 pixels — and replace the images Dreamweaver puts in the SpryAssets folder.

    Once you know the ins and outs of the tools interface and you’ve learned how the supplied CSS styles format the menu, you’ll see that the Spry Menu Bar is easy to insert and modify — certainly much easier than coding it all by hand!


    David Sawyer McFarland is the author of Dreamweaver CS3: The Missing Manual and CSS: The Missing Manual. You can learn more about his books and work at www.sawmac.com.

    Tags
  • Posted on: July 11, 2007

    CreativePro Staff

    17 Comments on View Source: The Easy Way to Add Dynamic Elements to Web Sites

    1. I found the tutorial above very helpful. Thank you very much. Then, it still can not resolve my problem. I have created the menu bar and looked great on preview (IE or Firefox). But do not show on the web, only the lists is seen. I have upload all the files associated of cause. Tried on different web host, the result is the same. Hope you can lid some lights.

      Appreciated if you can help.

    2. My drop down menu color is white, whith white lettering. I want it to be transparent , or #cc6600. The main line is is transparent with white lettering, that is the way I want it. JLO

    3. I’d like each item in my menu bar to be a different color, representing the different sections of my web site. I am using Dreamweaver to insert the horizontal menu bar and have had to insert separate menu bars for each item, copy the js, css, and html and add a 2, 3, 4, etc. to every tag. But my drop-downs stop showing up as I add each one. I’m obviously missing something in the code. Not to mention this seems ridiculous. Is there an easier way?

      gci

    4. Hi. Thanks so much for this tutorial. I initially just wanted to know how to change the arrow graphic (thanks for mentioning the .gif names and descriptions), but you also gave me a few shortcuts that will save me a lot of time in completing my project.

    5. How do you have 2 Spry horizonral menu bars on the same page with different dimensions?

    6. For the poster who asked how to have 2 menu bars with different styles. Name your menus #menu1 #menu2, or similar. Then in the CSS file you need to define different styles for each menu. Put #menu1 in front of all the style names in the CSS. Make the changes to the styles for #menu1 Then copy all the styles and paste them at the end of the style sheet, or put them in their own style sheet. On the pasted styles change #menu1 to #menu2 and then change the styles on these to style #menu2. That should work. If you put #menu2 style in thier own style sheet be sure to link to that in your HTML file.

    7. Hey. Nice tutorial, well done and easy to follow. I did have trouble getting my first try to look like that in the Finished HTML. What I found was the need to click higher than just above the Flaming Book image. I actually had to click very close to the top of that box and in the left half to make sure the insert point was within the DIV tag. My first try had it just outside the DIV tag and I ended up with a menu at the bottom of the box – not good. So, I will know better next time.
      Again – thanks for the tutorial. Just what I needed today.

      Steve

    8. I want my submenus to pop up to the right of my main menu, however they seem to popping up over the main menu. I’m not sure how they changed, they were going to the right before, but the font was too large, so I changed that and then they started popping up over the menu. When I attempted to change it back, it didn’t fix itself. Also, on that topic, how can you control the amount of time it takes for the submenus to disappear?

      please email me at lorena.gay@gmail.com

      Thanks!

    9. When I try to preview my page, to see what the menu bar looks like, I can’t see it, it is not there. Any suggestions?

    10. Hello, I have just ordered your book for DW CS3. I’ve just discovered this site and find your directions incredibly thorough. One thing, however: how do you get the menu bar item to be a different color when you are on it’s own page? For example I want to differentiate the nav bar item color when I am on the page for that category of things. I know how to make the general styles, but how do you get each page to have it’s own nav menu item be distinguishable from the others? Thanks so much! Anne Russinof

    11. I’ve bought a couple of your missing manuals, I think they’re great…even if they have done nothing to help my spelling, they definitely kick the dummies books out of the ball park. BUT I was wondering….Once I’ve created my Spry menu bar on my home page, is it possible to copy and paste it with all it’s links ans CSS on the other pages in the same site? Could you drop me a line tmcnary33@gmail.com…I know, I know…nobody has time to get back to everyone via e-mail, but I thought I would ask anyway.

      Thanks
      The Indigo Kid

    12. I just had a quick question regarding the Spry Menu Bar being blocked by Internet Explorer, seems when a page with a menu bar is requested by the browser IE will block the script so that any drop down menus will not work…unless the viewer allows that type of script by clicking the IE warning box.

      How can I prevent IE from thinking my menu bar is malicious? Thanks.

    13. I have a positioning problem with my sub menus when browsing with Internet Explorer. They are popping over the main menu bar (they are fine in Safari and Firefox. Also, as the sub menus pop white boxes appear to the right with the word ‘false’. Again this only happens with Internet Explorer. Can anyone help?

    14. I’m new to DWCS4 and this menubar widget is beating me up. Is there a way to build a seperate page or file listing just the menu items and then have them show up on any page called up? (i.e. Home, FAQ, etc.) As I understand DW widget, I would have to update (add the ul & li) to every page located at site any time a page was added or deleted. The single file advantage would be update one file for all pages.

    15. I found your tutorial extremely helpful. Thanks for sharing your knowledge by the way. The images, and exact name references made it easier. However I have the same problem some other guy had on top. How can I prevent Internet Explorer from Blocking the Content? Thanks.

      Juan Pablo

    16. I’ve inserted a spry menubar into a div tag. The div tag (#menu) has a background color property that is different from the menu bar items. I’ve created the properties in a separate style sheet for this page. This works fine for this div tag, but as soon as I insert the spry menu bar into the #menu divtag, the background color changes to the background color of the page (as set in page properties). I did try to add backgound property directly onto the HTML for the div tag with !important! attribute added into the CSS, but it still does’nt.
      Any suggestions as to what the problem might be here. It seems that the spry is doing something to the #menu container.
      E-mail: wil.leiner@planet.nl

    17. I want to find out how to make my beautiful spry menu click from one web page to another!!! Which is the point, right?

    Leave a comment

    Your email address will not be published.

    *