dreamweaver spry menu modifications

Dreamweaver Spry Menu Modifications

Scott NelsonWeb Design Santa Barbara

www.WebDesignSB.comUpdated December 15, 2011

Web DesignSanta Barbara

http://www.WebDesignSB.com/

Dreamweaver Spry Menu ModificationsDecember 15, 2011

Table of ContentsIntroduction.............................................................................................................................3Default Spry Menu...................................................................................................................3Top-Level Menu Structural Modifications.................................................................................5

Activating the Spry Menu Bar Properties Panel....................................................................5Changing the Top-Level Menu Text......................................................................................5Changing the Menu Order....................................................................................................7

Linking the Menu Items...........................................................................................................8Global Menu Properties...........................................................................................................9

Modifying the Menu Font......................................................................................................9Font Size...........................................................................................................................9Font Family.....................................................................................................................11Font Style, Weight, and Variant......................................................................................11

Menu Item Colors...............................................................................................................12Menu Item Mouse-Overs....................................................................................................14

Top-Level Menu Appearance Modifications...........................................................................17General Outline of the Process...........................................................................................17Changing the Width of the Top-Level Links........................................................................20

Equally-Spaced and Centered Menu Items......................................................................20Text-Width Menu Items...................................................................................................22Fixed-Width Menu Items.................................................................................................24

Padding Around the Menu Text..........................................................................................25Second and Third-Level Submenu Items...............................................................................26

Submenu Widths and Text Justification..............................................................................26Submenu Font Sizes...........................................................................................................30Border Surrounding the Submenus....................................................................................31

Third-Level Menu Offset........................................................................................................34Summary of Menu Modifications...........................................................................................37Highlighting Links in Top-Level Spry Menus..........................................................................40Creative Commons................................................................................................................44

document.docx of 43


IntroductionDreamweaver Spry Menus are a text-based menu system. They use a combination of JavaScript and Cascading Style Sheets (CSS). As they are structurally an unordered list and not images. They are highly accessible and are a good option for sites that want good search engine optimization (SEO). The Spry menus are extensible and will work well in dynamic scripted pages. They support up to three levels of menus: top-level, the second-level and a third-level. Spry menus come in horizontal and vertical flavors.

Because they are created with CSS, they can be customized in an almost endless variety of ways. This site, Web Design SB, uses a highly customized Spry menu. We will explore some of the general customizations you can do with these menus to enhance the navigability of your site.

Default Spry MenuIn following the Interface Design Procedure, the Horizontal Spry Menu Bar inserts inside the Header division and directly after the banner image. The code below depicts, where the Spry Menu Bar is inserted.

The Spry Menu Bar will be followed by a break tag <br class=”clearfloat” />. The break tag pushes the remainder of the page below the menu bar.

document.docx of 43

http://www.webdesignsb.com/Resources/Documentation/Design_Procedure/


This is how the page renders in Microsoft Internet Explorer 9. To illustrate how the menu renders, I chose to work with the top-level menu item, “Item 3” as it is the only menu item with complete submenus. The “Item 3” menu has been activated and the second-level menu items, Item 3.1, Item 3.2 and Item 3.3 are visible. The submenu for Item 3.1 is activated exposing the third-level menu. I refer to the text that make-up each of the menu items as “menu text” or “link text.”

document.docx of 43


A Spry menu will almost never be used in this default mode. The purpose of this document is to assist you in understanding how to modify this menu, using the CSS, to fit it to your design.

Top-Level Menu Structural ModificationsActivating the Spry Menu Bar Properties PanelIn Dreamweaver, when you mouse-over the Spry Menu Bar (or any Spry object), the object handle will appear as a blue-tab. Click on the Spry Menu Bar: Menu Bar 1 tab.

Clicking on the tab will activate the Spry Menu Properties Panel.

Changing the Top-Level Menu TextFor the purposes of this procedure we will enter only the link Text field for the menu items. The Interface Design Procedure describes in depth how to enter the information for Link and Title fields.

1) Click on Item 1 in the first column of the Menu Bar Properties panel, and then click in the Text field to the right.

2) Enter the text for your first menu item into the Text field, and then press Enter.

document.docx of 43



3) Repeat this for the next three menu items.

4) If you have more than four top-level menu items, click on the plus-sign (+) at the top of the first column to add another top-level menu item to the bottom of the list.

5) Enter the text for this menu item in the Text field, and then press Enter.

6) The menu system should look something like this in Dreamweaver,

and something like this in the web browser.

document.docx of 43


Changing the Menu OrderIf you wish to change the order in which the links are displayed, you may select the item and then move it up or down in the order. Though we are working only with the top-level menu items (the first column), this will work will each of the menu item columns in the Spry Menu Bar Properties Panel.

1) In the Spry Menu Bar Properties Panel, click on the item you want to move, and then either click on the up-triangle above the column to move the item up in the order (to the left in the Spry Horizontal menu),

or click on the down-triangle above the column to move the item down in the order (to the right in the Spry Horizontal menu).

document.docx of 43


Linking the Menu ItemsWhen you create a new menu item, the Link field is populated with a pound sign (#). This is a “placeholder” link. It essentially creates a link that doesn’t go anywhere. When creating new menu items, it is easiest to link the menu items to an existing page.

1) Create a new page from template and then save the new page.

2) Open your site template, and then activate the Spry Menu Properties panel as show in the previous sections of this procedure.

3) Create a new menu item.

4) Add the Text and Title, and then click on the Browse button.

5) Scroll down your site files to find the newly created page you want the menu item to link to. Click on the file to select it, and then click on the OK button.

document.docx of 43


6) You will see the file name and path in the Link field in the Spry Menu Bar Properties panel. Repeat this section for as many pages as you want to add.

Global Menu PropertiesModifying the Menu FontI have a strong recommendation that you do not change the font, font-style, or font-size from one menu level to another. Therefore, we will modify the font from the top-level of the menu down.

The first rule in the SpryMenuBarHorizontal.css is the ul.MenuBarHorizontal. This rule can be used to determine the font family and font style for the entire menu system. To begin to modify the menu font, click on ul.MenuBarHorizontal rule, and then click on the Edit Rule button at the bottom of the CSS Styles panel.

Font SizeThe font size is initial set to 100%. This means it is 100% of the size of the default font set for the page.

document.docx of 43


By setting the font in percentages or ems, the menu text will get larger and smaller depending on the text size set in the browser. This is good for Accessibility of the menu in that visitors that are site impaired will be able to make the font bigger in order to see it, but you lose a bit of control of the menu design. Specifically, increasing the size of the font may cause the menu item to move to two lines of text rather than the desired single line.

From a design standpoint, it is highly desirable to use pixels as the measurement, as it is easier to control the menu height and keep your design consistent.

This is an example of the menu at 10 pixels.

This is the menu at 24 pixels.

document.docx of 43


Font FamilyThere are many built-in Font Families to choose from in Dreamweaver.

This example is "Palatino Linotype", "Book Antiqua", Palatino, serif.

This example is "Comic Sans MS", cursive.

Font Style, Weight, and VariantIn general, I recommend that you only change the following parameters for the ul.MenuBarHorizontal rule.

1) Font-family

document.docx of 43


2) Font-size3) Font-weight4) Font-style5) Font-variant

For menu consistency, all of these parameters should be changed at this level, for the entire menu and should not change for mouse-over indicators. Font color and background colors are changed in a different rule.

Menu Item ColorsMenu item colors are controlled by the ul.MenuBarHorizontal a rule. These colors are consistent through all levels of the menu and submenus.

document.docx of 43


In this rule, the background-color property is the background color of the menu. In the Interface Design Procedure, we have a graphic element that renders behind the menu. In this case, the background-color is disabled. This causes the background of the Spry menu to become transparent so that the graphic background will show through.

The color property is the font color. This will allow you to change the color of the text in your menu to match your site color scheme. In the following example I have set the background-color to black (#000) and the color to white (#FFF).

document.docx of 43


Menu Item Mouse-OversWhen the mouse or pointer hovers over a top-level menu item, it is desirable to make the menu item change in font color and/or background color. There are two rules that make this happen; ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus and ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible. Both rules must be changed in order for the rules to function properly in all browsers.

Do not use these rules to change font-family, font-face, font-size, font-weight or any other property that will have the effect of making the menu text larger or smaller.

The background-color property controls the background color the menu item will change to when the mouse pointer hovers over the menu item. The color property is the color the text will change to when the mouse pointer hovers over the menu item. In this example, I will make the background a dark-blue (#039 or #003399) color and the text a yellow-orange (#FC3 or #FFCC33) color.

1) To change the background color, in the CSS Styles panel, click on the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.a) To set the color, click on the swatch, as shown below, and select a color from the

pop-up color palette. You may also move the color-picker over the Design View of your page, and choose a color from your banner image or other image in the page.

document.docx of 43


b) If you know your Web Color number, you may key it in directly. You must be sure that the number is preceded by a pound sign (#).

2) To select the color of the text during mouse-over, set the color property.

document.docx of 43


3) To complete the procedure we must also change the ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible rule. In the CSS Styles panel, click on the ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible rule.a) To set the color, click on the swatch, as shown below, and select a color from the

pop-up color palette. You may also move the color-picker over the Design View of your page, and choose a color from your banner image or other image in the page. In this example, I have entered the color number directly.

b) If you know your Web Color number, you may key it in directly. You must be sure that the number is preceded by a pound sign (#).This color should be the same color you entered into the ul.MenuBarHorizontal a:hover,

document.docx of 43


ul.MenuBarHorizontal a:focus rule.

4) To select the color of the text during mouse-over, set the color property. This color should be the same color you entered into the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus rule.

The result should look something like the following example; dark-blue background and yellow-orange text on the activated or menu items that are “moused-over.”

Top-Level Menu Appearance ModificationsIt is important for proper function of the Spry Menu Bar that the text in all of the top-level menu items is kept to a single line. The menu bar may behave inconsistently if the text in the top-level menu items is allowed to wrap to two or more lines.

In order to change the appearance of the menu, we need to modify the style sheet for the menu. In this section, we will look at the CSS Styles panel to see how changes are made.

General Outline of the ProcessTo access the style sheet, open the CSS Styles panel, locate the SpryMenuBarHorizontal.css (or the SpryMenuBarVertical.css), and then click on the plus-sign (+) to open the sheet and see the rules.

document.docx of 43


Clicking on a specific CSS rule will display the properties for that rule in the Properties pane of the CSS Style panel.

document.docx of 43


You can edit a style by clicking in the value cell of the property you wish to change, or by clicking on the Edit Rule button at the bottom of the of the CSS Styles panel.

The Edit Rule button opens the CSS Rule Definition window for the rule. You can change any of the properties of the rule using this window, except for CSS3 rules. CSS3 rules are supported in Dreamweaver CS5 and CS5.5, but not using the CSS Rule Definition window.

In order to see what a change will do to your design, without closing the window, make your setting changes and then click on the Apply button. Using the Apply button can greatly increase your designing efficiency.

document.docx of 43


When you get the design to the point you want, click on the OK button to accept your changes and close the CSS Rule Definition window.

Changing the Width of the Top-Level LinksThe width of the top-level menu items is determined by the following rule:

ul.MenuBarHorizontal li

Equally-Spaced and Centered Menu ItemsClick on the ul.MenuBarHorizontal li rule to select it, and then set the following properties.

1) Text-align: center2) Width: 20%

document.docx of 43


This will have the following effect on the menu. Centering and utilizing the entire width of the interface give the design a well-balanced look.

I chose 20% because I have five buttons. Here is a quick conversion chart if you have a different number of buttons.

Number of Buttons Width of Each Button3 33%4 25%5 20%6 17%

document.docx of 43


Number of Buttons Width of Each Button7 14%8 13%

Text-Width Menu ItemsBy disabling the width of the menu items (in the ul.MenuBarHorizontal li rule), it will allow each menu item to be sized to the amount of text it contains.

This is the result. This left-justified menu style can be very effective in some interfaces.

If the padding to the left and right of the text in increased the menu can “breath” a bit more. To add spacing between the menu text links, click on the ul.MenuBarHorizontal a rule, and then click on the Edit Rule button at the bottom of the CSS Styles panel.

document.docx of 43


Click on the Box Category, and then set the Right and Left Padding to a larger number, such as 2 ems. Click on the Apply button until you achieve the desired effect, and then click on the OK button.

document.docx of 43


At 2 ems of spacing, this is the result.

Fixed-Width Menu ItemsYou may also set each top-level menu item to as fixed width by setting the width to a specific number of pixels.

document.docx of 43


This is the resultant effect. Because of the different widths of the text in each item, the menu looks unaligned in this configuration. This approach works best if all of the menu items have similar length text.

Padding Around the Menu TextAs we have seen in the previous menu alteration, padding around the menu text is determined by the ul.MenuBarHorizontal a rule. In all of the following examples in this section, the width property of the ul.MenuBarHorizontal li rule has been disabled. Doing this allows the menu bar to expand to the left and right as necessary.

In the example below, the shaded area surrounding the Bryce Renderings text is the result of the padding specified in the ul.MenuBarHorizontal a rule: 0.5 ems on the top and bottom and 0.75 ems to the left and right.

Especially when modifying the top and bottom padding, I like to use pixels. Here are some examples of different padding settings.

1) Padding-top: 5px;2) Padding-right: 20px;3) Padding-bottom: 5px;4) Padding-left: 20px;

1) Padding-top: 20px;2) Padding-right: 20px;3) Padding-bottom: 20px;4) Padding-left: 20px;

document.docx of 43


Second and Third-Level Submenu ItemsSubmenu Widths and Text JustificationThe width of the submenus are changed in the rules; ul.MenuBarHorizontal ul and ul.MenuBarHorizontal ul li. Both of these rules must be changed to the same value in order for the second and third-level menus to render properly. The width can be set relative to the font size, such as in ems, or in a fixed width as in pixels. I have found that using a percentage is difficult to control, so I do not recommend using percentage widths for submenus.

The default width is 8.2 ems. I find that this is far too small a width for proper pull-down menus.

In this case, we will make the menus 200 pixels wide.

As a side note here, it is also possible to set the justification of the text in the menu item with the ul.MenuBarHorizontal ul and ul.MenuBarHorizontal ul li rules.

1) In the CSS Styles panel, click on the ul.MenuBarHorizontal ul rule, and then click on the width property.a) Change the width to 200, and then select px from the units pull-down menu.

document.docx of 43


b) To left-justify the text in the submenu items, click on the Add Property link at the bottom of the Properties pane of the CSS Styles panel.

c) Scroll down the list of properties until you see text-align, and then click on it.

d) Set the alignment to left using the pull-down property value menu.

document.docx of 43


2) We need to repeat this same setting in the ul.MenuBarHorizontal ul li in order for this setting to work. In the CSS Styles panel, click on the ul.MenuBarHorizontal ul li rule, and then click on the width property.a) Change the width to 200, and then select px from the units pull-down menu.

b) To left-justify the text in the submenu items, click on the Add Property link at the bottom of the Properties pane of the CSS Styles panel.

c) Scroll down the list of properties until you see text-align, and then click on it.

document.docx of 43


d) Set the alignment to left using the pull-down property value menu.

In context, you can see that the submenus better fit the design that the “8.2 em” submenus that are the default. A word of caution, with this type of menu system, you must be careful that the right-most menu does not “fly” too far out to the right of the interface.

document.docx of 43


Submenu Font SizesIf there are a lot of menu items in the submenus, it is often a god idea to minimize the font size in the submenus, and not in the top-level menu items. The ul.MenuBarHorizontal ul rule is a good place to change the font size. I caution you to not change the font-family or font-face using this rule.

1) In the CSS Styles panel, select the ul.MenuBarHorizontal ul rule, and then click on the Add Property link at the bottom of the Properties pane.a) Scroll-down the list of properties, and then select font-size.

2) Enter a number and then select a unit. I find that relative sizes, such as ems or percentages do not work as the third-level menu is even smaller than the second-level menu. I strongly recommend using pixels. In this case, I have chosen 14 pixels.

document.docx of 43


In context, the submenu text is smaller than the top-level menu text.

Border Surrounding the SubmenusBorders around the submenus are governed by the ul.MenuBarHorizontal ul rule. The default border is a light-gray border a single pixel in width. In this default setting, it is sometimes difficult to discern the outline.

You can change the style, width and color. Each attribute can be changed per side. The border style is shared by the second and third-level menus. Also, the border can be removed altogether

document.docx of 43


1) To modify the submenu borders, select the ul.MenuBarHorizontal ul rule, and then

click on the Edit Rule... button at the bottom of the CSS Styles panel.

2) To make a change to the border, click on the Border Category, and then make the following changes. In this example, we will give the menu borders a “beveled” look.a) Change the Width to 3 pixels, leaving the Same for all checkbox checked.

document.docx of 43


b) In the Color column, uncheck the Same for all checkbox, and then set the Right and Bottom colors to a dark-gray.

c) Click on the OK button.

The effect is something like a beveled border with the light source at the top-left of the menu. Notice that the styling of the second-level menu is carried to the third-level menu.

Third-Level Menu OffsetThe third-level menu is offset from the second-level menu. In the default mode, the third-level menu is rendered slightly on top of the second-level menu and slightly higher than the

document.docx of 43


menu item that triggered the menu. The menu offset is controlled by the ul.MenuBarHorizontal ul ul rule.

1) Click on the ul.MenuBarHorizontal ul ul rule, and then click on the Edit Rule… button at the bottom of the CSS Styles panel.

2) Click on the Box Category. In the Margin column, there are four settings: Top: -5%, Right: 0, Bottom: 0, and Left: 95%.

document.docx of 43


a) The Top Margin setting controls the vertical position of the third-level menu. The more negative the number is the higher the third-level menu appears relative to the second-level menu item that triggered it. On the other hand, if the percentage goes positive, the menu is moved down relative to the triggering second-level menu item.

In this figure, the Top Margin property is set to -50%.

In this figure, the Top Margin property is set to 5%. This is a favorite setting of mine. I feel that the flow of the menu and submenu should be down and to the right.

document.docx of 43


b) The Left Margin setting controls how much the third-level menu overlaps with the second-level menu. The lower the percentage, the more the overlap. The higher the number the less the overlap. A setting of 100% renders the left side of the third-level menu flush with the right side of the second-level menu. Values over 100% leave a gap between the second-level and third-level menus. This is not desirable and I strongly discourage the use of settings over 100% .

In this figure, the Left Margin property is set to 50%. There is a lot of menu overlap with settings in this range.

In this figure below, the Left Margin property is set to 110%. You can see the gap between the second-level and third-level menus. This can create a functional issue if a visitor cannot bridge the gap in the time allotted before the menu automatically closes.

document.docx of 43


I recommend the default Left Margin property setting of 95%.

Summary of Menu ModificationsFollowing is a summary of some different ways you can modify or customize the Spry Menu bar and the corresponding CSS rule you will need to address in order to affect the modification. When two CSS rules are mentioned in the CSS Rule to Edit column, then both rules be edited with the same changes. There may be other places that modifications to the menu system can be made. If you are new to Spry Menus, I strongly urge you to only modify the menus as suggested in this document.

Desired Menu Design Element to Change

CSS Rule to Edit CSS Styles Panel

This rule effects the entire menu bar and all submenus: Font family Font size Font weight Font style Font variant Distance between

menu and other elements, such as the banner image

ul.MenuBarHorizontal

document.docx of 43




Width of the top-level menu items

Horizontal position (justification) of menu text in the menu item: left, centered, right

ul.MenuBarHorizontal li

Menu item colors, including the font color and background color

Distance between menu text and the sides of the menu item is determined by the padding of this element

Borders around the menu items

ul.MenuBarHorizontal a

Menu bar item color when mouse pointer moves over it. This includes the color of the text and menu item background.

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

document.docx of 43




Width of the submenus

Justification of the text within the menu item

ul.MenuBarHorizontal ul ul.MenuBarHorizontal ul li

Submenu borders Submenu font size

ul.MenuBarHorizontal ul

Position of the third-level menu in relation to the second-level menu

ul.MenuBarHorizontal ul ul

Highlighting Links in Top-Level Spry MenusIt is nice to have some navigation indication that you are on a specific page on in a specific area of the web site. In the example below, when the site visitor is on the “About Me” page, the About Me navigation link turns black and the background turns orange. This indicates you are on the About Me page. Subsequently, as the site is navigated, the navigation link for the page you are on indicates the page you are on.This procedure will explain how you can modify the Dreamweaver Spry menu bar to create a “page indicator” in the navigation system (http://Demo10.ScottsPlaceOnTheWeb.com/).

document.docx of 43

http://demo10.scottsplaceontheweb.com/


If you have designed your site using the Interface Design Procedure, then your home page (index.htm) will be detached from your template (meaning that changes to the site template will not affect the home page). This is fine, because you will only need indicators on your interior pages. No indicator is required on the home page.

1) Open your template (main.dwt) in Dreamweaver, switch to Code View, and locate the Spry Menu Bar.

document.docx of 43



2) Add an ID attribute to each of the anchor tags that make up the top-level links of the Spry Menu. This will not adversely affect the functioning of the spry menu. ID values must not have spaces and may not start with a number.

3) Save your changes to the template. When prompted, click on the Update button. Close the template.

4) Open each individual page in your site one at a time (you will not need to edit the home page or the accessibility page). Switch to Code View and then find the “head” editable region.

document.docx of 43


5) Select and copy the code snippet as shown below. You will replace the ID01 with the ID of the link of that page that you are on. The “#ID01:hover:” is for the mouse-over.

6) Paste the block into the “head” editable region as the last element in that region. Change the ID01 text to reflect the Spry Menu ID you set for this page. In the example below, I have set the ID to #linkAboutMe to designate the “About Me” page.

document.docx of 43

<style type="text/css">#ID01 {

background-color: #ffc000;color: #000000;

}#ID01:hover {

color: #ffffff;}</style>


7) I encourage you to customize the rules, modifying the colors and other style attributes to fit the style to your design. Test your new hover function by saving your work and confirming that you like the color combos. Once you have saved your work and are happy with the results, copy this new revised Code Snippet, and use it on your remaining pages.

8) Repeat steps 5 and 6 for all pages in the site (except the home page and the Accessibility page). Be sure to change the ID link to reflect the Spry Menu ID that you set for each individual page. Save all the pages and synchronize the site.

Creative Commons

This document was created by Scott Nelson for the purpose of assisting students of the Santa Barbara City College, Multimedia Arts and Technologies, MAT153, Introduction to Web Design course.

This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. You are free to copy, distribute and transmit this work and to adapt this work. You must attribute the work to Scott Nelson, [email protected] (but not in any way that suggests that I endorse you or your use of the work). You may not use this work for commercial purposes. This license verbiage is attributable to Creative Commons (http://www.CreativeCommons.org/).

Registered Trademarks found in this document and are the sole property of their respective legal owners.

document.docx of 43

http://www.creativecommons.org/

mailto:[email protected]?subject=Interface%20Design%20Procedure

dreamweaver spry menu modifications

Documents