9 September 2010
A basic working knowledge of Dreamweaver and CSS is required.The Spry Menu Bar 2.0 widget uses nested unordered lists, so you should befamiliar with how to create them in Dreamweaver. For more information see CreateBulleted and Numbered Lists in Dreamweaver Help.
So, the Dreamweaver engineering team rethought the whole way of working with Spry Menu Bars. The result is Spry Menu Bar 2.0, which uses a newer version of Spry designed specifically for creating user interfaces, SpryUI. They also introduced the Adobe Widget Browser, which makes it much easier to style Spry Menu Bar 2.0 and other widgets. Instead of spending time trying to figure out which CSS selector you need to edit, you do all the configuration through dialog boxes that describe the part of the widget they control. What's more, you get to see how the changes will look in a browser in real time. With just a little CSS knowledge, you can style a Spry Menu Bar 2.0 widget with confidence.
The Adobe Widget Browser is a separate AIR application that's closely integrated in Dreamweaver CS5. With a little extra work, you can also use the Widget Browser with earlier versions of Dreamweaver. However, the widgets need to be rendered in Dreamweaver using Live View, so using Dreamweaver CS3 or earlier is not recommended.
This tutorial shows how to install the Adobe Widget Browserand download the Spry Menu Bar 2.0 widget from the Adobe Exchange. You'll then style a horizontal fixed-width menu and insert it in the home page of a fictional events website called Bayside Pulse.
This article is divided into the following sections:
In order to make the most of this article, you need the following software and files:
The sample files for this tutorial contain the home page of a fictional events website called Bayside Pulse (see Figure 1).
The design lacks a navigation menu to take visitors to other pages. For this project, you'll use Spry Menu Bar 2.0 and the Adobe Widget Browser, both of which you'll download and install. By default, a Spry Menu Bar 2.0 widget is in neutral shades of gray (see Figure 2), and it expands andcontracts depending on the size of the menu labels.
The colors need to be updated, and the menu bar needs to be the same width as the site's banner heading, 960 pixels. By the time you have finished, you'll have created a navigation menu that blends with the rest of the page (see Figure 3).
The finished page is in the completed folder of the sample files for this tutorial. Most of the menu items are dummy links, but the Home and Café Citrus menu items link to index.html and citrus.html, respectively.
Note: To select the colors for the menu, I visited http://kuler.adobe.com/, selected the option to create a theme from an image, and uploaded the bannerimage, bayside_pulse.jpg. Using kuler is a quick and easy way to get harmoniouscolor schemes.
The Adobe Widget Browser isn't installed by default, but it's closely integrated with Dreamweaver CS5. You can also use the Widget Browser with earlier versions of Dreamweaver, but without the same level of integration. The Widget Browser lets you preview widgets on the Adobe Exchange. The widgets are free. When you find one you like, you can download and customize it, saving your changes for automatic insertion in a Dreamweaver site. All you need is an Adobe ID to log into the Adobe Exchange and download them.
Although the Widget Browser is a separate application, the easiest way to access it is through Dreamweaver CS5. If you're using an earlier version of Dreamweaver, you need to download the Widget Browser from Adobe Labs, and install it separately. The following instructions apply only to Dreamweaver CS5.
On a Mac, if you can't see the Extend Dreamweaver icon, choose Window > Application Bar.
The Widget Browser lets you inspect widgets before deciding whether to download them. In this section, you'll log into the Adobe Exchange, and select the Spry Menu Bar 2.0 widget.
Note: Only Dreamweaver CS5 is listed as a compatible product, but this refers to integration with the Widget Browser. You can use Spry Menu Bar 2.0 with earlier versions of Dreamweaver by copying and pastingthe code into your web pages manually.
Note: If you can't see the Accept button, resize the Widget Browser window to bring it into view. The license screen isn't resizable.
Once you have downloaded a widget from the Adobe Exchange, you can configure it inside the Widget Browser. The available options depend on how the widget was packaged by the developer. Spry Menu Bar 2.0 has a large number of options, giving you considerable control over its appearance. The options are divided into the following categories:
Once you have configured a widget, you can save the settings for use in other pages. You can also build new presets based on an existing one.
Follow these steps to begin with the first two sets of options:
The panels on the left of the Widget Browser slide up and down, giving access to all the menu's settings. Any changes you make are reflected immediately in Live View on the right.
The first panel, BINDING & BEHAVIOR, lets you change the menu's ID and timing of the flyout menus. The delays are expressed in milliseconds, so the submenus appear and disappear after a delay of 0.2 seconds by default. These default values are fine as they are, so no changes arenecessary.
The changes are reflected immediately in Live View (see Figure 8).
Note: If you want to take a break at any stage, click the Save Preset button at the bottom right of the Widget Browser. This saves your changes, and lists Horizontal 960 Fixed Width Submenus under MY PRESETS in the Preview screen of the Spry Menu Bar 2.0 widget. To resume editing, select your configuration from MY PRESETS and click Configure.
The MENU BAR LAYOUT panel lets you choose whether to use a horizontal or vertical layout. If you choose a vertical menu bar, the width is automatically determined by the width of the menu items, and the menu is always aligned left. For a horizontal menu bar, you have the following options:
This panel represents probably the most difficult part of configuring a Spry Menu Bar 2.0 widget, because it requires not only an understanding of how widths are calculated in CSS, but also of how the menu items are styled. The menu bar and submenus follow the widespread convention of styling nested unordered lists. So, the HTML markup for each menu item is simply a link inside an
<li> element like this:
<span> tag like this:
<li class="MenuItemContainer"><a href="index.html" class="MenuItem MenuItemFirst" tabindex="0"><span class="MenuItemLabel">Home</span></a></li>
You can see the effect this has on the structure of the menu items by giving each part a distinctive background color to make it easy to identify (see Figure 9). The item label is the green section immediately surrounding the text. The yellow area represents the menu item, and the narrow blue stripes represent the left and right borders of the menu items.
The addition of the
<span> tag gives you the flexibility to style the center section of each menu item independently, but it also complicates the calculations you need to make when determining the values to enter in the MENU BAR LAYOUT panel. According to the CSS Box Model, the width of an element applies only to its content. Padding and borders are added outside the content, so you need to subtract these values from the width of the menu items.
The complete menu bar in the Bayside Pulse website has five top-level items. The overall width needs to be the same as the banner image, in other words 960 pixels. Divided by 5, that gives an overall width of 192 pixels for each menu item. I'm going to add a
2px border all round each item, so that reduces the width of the content to 188 pixels. Calculating the appropriate amount of padding is more a question of trial and error, but 25 pixels on either side of the text looks about right. That reduces the width of the menu item to 138 pixels.
Performing this calculation is absolutely vital to the success of customizing a Spry Menu Bar 2.0 widget. Remember that padding and borders are added outside the width of the menu item.
With that calculation out of the way, you can now adjust the settings in the MENU BAR LAYOUT panel.
Note: If you hover your mouse pointer over any of the options, the Widget Browser displays a tooltip explaining what the option is for.
Since the design for the Bayside Pulse menu calls for 25 pixels of padding on the left and right, you need to split this value between the item and item label on the right.
15pxdefault value for the item label, this adds up to
In the Widget Browser Live View, the menu is now beginning to take shape (see Figure 10). You might need to resize the Widget Browser to view the full width of the menu.
The submenus are styled in the same way as the top-level menu items. In other words, a
<span> tag is added programmatically around the text, creating an item label within each submenu item. As with the top-level items, the padding on the right is split between the submenu item and the item label to leave space on either side of the submenu arrows. Although the SUBMENU LAYOUT panel has many options, it's relatively easy to configure once you understand the difference between item and item label.
100%. If you choose Fixed Width, it should be set to
The Bayside Pulse design uses fixed-width submenus, so leave First Level Min-Width at the default value of
Setting the value for Item Label Width involves a calculation similar to the one you made for the top-level items. The Bayside Pulse design calls for the submenu items to be the same width as the top-level items—
192px . You need to deduct the amount of padding and borders from this figure. The default padding and borders are fine, so it's just a question of adding them up.
2pxand Left is
12pxand Left is
1pxon each side, making a total width of
Adding these values together comes to 21 pixels. Deduct that value from the overall width of the submenu items (192-21=171) to get the value for Item Label Width.
The COLORS panel controls the text and background colors of the top-level menu items and the submenus. Because the Spry Menu Bar 2.0 widget adds a
<span> around the text in both the top-level items and the submenu items, you have the option to apply a different background color to the item labels. For the Bayside Pulse menu, the background color of the labels will be inherited from the menu bar.
The first option in the Menu Bar Text and Background section sets the background color for the whole menu bar. As long as you set the background colors of the items and labels to transparent, the top level items will inherit this color.
Note: The color picker in the Widget Browser automatically adds the hash symbol (#) to the code it generates. Do not add it here. Hexadecimal values consist of the numbers 0–9 and the letters A–F (case-insensitive) only. So, the second character in B0C9D9 is a zero, not the letter O.
The MENU BAR BORDERS panel has options to add a border to the whole menu bar and to the individual top-level menu items. The border widths must be the same on all sides, but you can control the color and style of each side separately. The options for the menu items give you considerable control. You can use a different color when the mouse pointer is hovering over an item, and you can apply different border styles to the first and last items.
For the Bayside Pulse site, the menu item borders will create the illusion of embossed buttons by using a lighter color for the top and left, and a darker color for the right and bottom. The light and dark colors will be reversed when the mouse pointer is hovering over a menu item, giving the impression of an inverse emboss.
Unless you have a keen sense of color, getting the light and dark shades right for the borders is difficult without a little help from a graphics program, such as Fireworks CS5. If you don't have a suitable graphics program handy, you can just read these instructions and use the colors in the next section. But a program such as Fireworks CS5 is indispensible for creating graphics for your websites, so I encourage you to download the trial version and follow along.
Note: You might get slightly different color values when using this technique. The exact values are unimportant, as long as they harmonize with the main color.
After selecting the border colors, all that remains is to apply them to the Spry Menu Bar 2.0 widget.
0pxand the Style for each side is set to None. These settings are fine.
There are separate sections for the top, right, bottom, and left borders. Each section has five options:
As you can see, you have precise control over each border. If you want only a thin vertical line between menu items, you can set the border style on all sides except the left to None, and suppress the left border on the first item.
For this design, you want the same style on all borders, but the colors need to be different to produce the embossed effect.
In the Right and Bottom sections, use the following settings:
Note: The final configuration panel (SUBMENU BORDERS) for the Spry Menu Bar 2.0 widget styles the submenu borders. By default, the submenu items have a one-pixel light gray border. The border happens to fit quite well with this color scheme, so there's no need to change the settings. However, if you need to change them for a different menu, the principles are exactly the same as for the main menu item borders.
Because the Widget Browser is directly integrated in Dreamweaver CS5, you can insert a Spry Menu Bar 2.0 widget (or any other widget) with just a few clicks. If you're using Dreamweaver CS4, you need to copy and paste the code manually.
Whichever version you're using, you first need to set up the Bayside Pulse site for this tutorial.
All the necessary files are in the sample file, spry_bayside.zip.
The menu items in the horizontal version of a Spry Menu Bar 2.0 widget are floated, so you need to insert the menu bar in a
<div> that has a specified height. This preserves the vertical alignment of elements below the menu bar.
<div>needs to be inserted after the banner image, which is in a
header. In the Insert Div Tag dialog box, select After Tag from the Insert pop-up menu, and then select <div id="header"> from the pop-up menu on the right.
In the rule definition section make sure that bayside.css is selected. This is the file where the rule will be defined.
18px), the top and bottom padding on the item labels (
6pxeach), and the top and bottom borders on the menu items (
<div>with placeholder text between the banner image and the rest of the page content (see Figure 21).
The page is now ready for the Spry Menu Bar 2.0 widget to be inserted. If you're using Dreamweaver CS5, follow the instructions in the next section. Otherwise, skip ahead to Using Earlier Versions Of Dreamweaver to insert the Spry Menu Bar 2.0 widget.
These instructions assume you have configured a Spry Menu Bar 2.0 widget as described in the preceding pages of this tutorial.
<div>, and leave your insertion point inside the
You'll put the finishing touches to the Spry Menu Bar 2.0 widget in the final section of this tutorial. The next section describes how to transfer the menu bar from the Widget Browser to earlier versions of Dreamweaver. The instructions in the next section also apply if you want to move a Spry Menu Bar 2.0 widget manually to another page.
The Widget Browser is not integrated in earlier versions of Dreamweaver, so you need to export the files from the Widget Browser and transfer the code manually to index.html.
<head>of the page is a
<link>tag, followed by six
<script>tags, and a
<style>block that's approximately 230 lines long. Copy all the code from the
<link>tag to the closing
</style>tag to your clipboard (around lines 6–246).
</head>tag (around line 7).
<body>tags (around lines 250–304). This is the HTML for the menu bar (a series of unordered lists) plus a
<script>block that initializes the menu bar.
nav <div>. It should be around line 253, and it looks like this:
<div id="nav">Content for id "nav" Goes Here</div>
<div>tags, and paste the code for the menu bar in its place.
After inserting a Spry Menu Bar 2.0 widget into your first web page, you need to add the fifth top-level menu item, and edit the menu bar to link to different parts of the site. It's also a good idea to move the large
<style> block out of the
<head> of the page and merge the menu styles with your main style sheet—you'll do that in the next section.
In this tutorial, you'll simply add the fifth top-level menu item to the menu bar. You can follow a similar procedure to edit the other menu items and submenus.
You'll notice that citrus.html does not have the Spry Menu Bar 2.0 widget. You'll fix this in Adding the Spry Menu Bar 2.0 widget to other pages.
For the purposes of this tutorial, you can leave the other menu items unchanged; but in a site of your own, you'd edit the series of nested unordered lists to reflect the site's structure. Use the Indent button in the Property inspector to create submenus by nesting a list. Use the Outdent button to promote an item or list to a higher level.
Note: In a fixed-width design, the last menu item should not have a submenu more than one level deep. If you add a second-level submenu, it will be truncated by the page's container
With most widgets, including Spry Menu Bar 2.0, the Widget Browser attaches an external style sheet containing basic styles. It also embeds a
<style> block in the
<head> of the page containing rules that override the basic style sheet and style the widget according to the changes you made in the Widget Browser. It's a good practice to export these styles from the
<head> of the page to an external style sheet.
#MenuBar) and Shift-click the final one (
.SpryIsIE6 #MenuBar .SubMenu .SubMenu) to select all the embedded style rules.
The styles created by the Widget Browser for Spry Menu Bar 2.0 are designed to override the basic styles in SpryMenuBasic.css regardless of which order you link the style sheets.
To add the menu bar to citrus.html, you need to copy and paste the link to SpryMenuBasic.css and the six
<script> tags from the
<head> of index.html into the
<head> of citrus.html. You also need to copy and paste the whole
nav <div> .
Note: If you have any difficulty doing this, you can open the version of citrus.html in the completed folder of the sample files to see an example.
Performing these steps for every page in a site is obviously a tedious chore, so you should use a Dreamweaver template, library item, or server-side include to automate the process. When you use one of these options, any changes to the master file are automatically reflected in every page that uses the menu bar.
You can use the Adobe Widget Browser to quickly style a Spry Menu Bar 2.0 widget through a series of configuration panels without delving into the complexities of the CSS style rules, many of which are applied programmatically. The large number of options gives you precise control over the look and behavior of the menu bar. With so many options, it can feel overwhelming to start with, but Live View in the Widget Browser lets you experiment with them in a nondestructive way.
To learn more about the UI widgets that are used in Spry Menu Bar 2.0, see Spry UI on Adobe Labs.
Here are some other resources that you may find helpful as you work with the Spry Menu Bar 2.0 widget:
Tutorials and samples