Dreamweaver Spry Menu Modifications

Dreamweaver Spry Menu
Modifications

Scott Nelson
Web Design Santa Barbara
www.WebDesignSB.com
Updated May 21, 2014

Santa Barbara
Web Design
Dreamweaver Spry Menu Modifications
May 21, 2014
Document1
Page 2 of 44
Table of Contents
Introduction .............................................................................................................. 3
Default Spry Menu ...................................................................................................... 3
Top-Level Menu Structural Modifications ....................................................................... 5
Activating the Spry Menu Bar Properties Panel ............................................................ 5
Changing the Top-Level Menu Text ............................................................................ 5
Changing the Menu Order ......................................................................................... 7
Linking the Menu Items ............................................................................................... 8
Global Menu Properties ............................................................................................... 9
Modifying the Menu Font .......................................................................................... 9
Font Size ............................................................................................................. 9
Font Family ........................................................................................................ 11
Font Style, Weight, and Variant ............................................................................ 11
Menu Item Colors .................................................................................................. 12
Menu Item Mouse-Overs ........................................................................................ 14
Top-Level Menu Appearance Modifications ................................................................... 17
General Outline of the Process ................................................................................ 17
Changing the Width of the Top-Level Links ............................................................... 20
Equally-Spaced and Centered Menu Items ............................................................. 20
Text-Width Menu Items ....................................................................................... 22
Fixed-Width Menu Items ...................................................................................... 24
Padding Around the Menu Text ................................................................................ 25
Second and Third-Level Submenu Items ..................................................................... 26
Submenu Widths and Text Justification .................................................................... 26
Submenu Font Sizes .............................................................................................. 30
Border Surrounding the Submenus .......................................................................... 31
Third-Level Menu Offset ............................................................................................ 34
Summary of Menu Modifications ................................................................................. 37
Highlighting Links in Top-Level Spry Menus ................................................................. 40
Creative Commons ................................................................................................... 44

May 21, 2014
Document1
Page 3 of 44
Introduction
Dreamweaver 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 Menu
In 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.

May 21, 2014
Document1
Page 4 of 44

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.

May 21, 2014
Document1
Page 5 of 44

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 Modifications
Activating the Spry Menu Bar Properties Panel
In 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 Text
For 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.

May 21, 2014
Document1
Page 6 of 44

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.
May 21, 2014
Document1
Page 7 of 44

Changing the Menu Order
If 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).

May 21, 2014
Document1
Page 8 of 44
Linking the Menu Items
When 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 doesnt 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.

May 21, 2014
Document1
Page 9 of 44
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 Properties
Modifying the Menu Font
I 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 Size
The font size is initial set to 100%. This means it is 100% of the size of the default font set
for the page.

May 21, 2014
Document1
Page 10 of 44

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.

May 21, 2014
Document1
Page 11 of 44
Font Family
There 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 Variant
In general, I recommend that you only change the following parameters for the
ul.MenuBarHorizontal rule.

May 21, 2014
Document1
Page 12 of 44
1) Font-family
2) Font-size
3) Font-weight
4) Font-style
5) 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 Colors
Menu item colors are controlled by the ul.MenuBarHorizontal a rule. These colors are
consistent through all levels of the menu and submenus.
May 21, 2014
Document1
Page 13 of 44

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

May 21, 2014
Document1
Page 14 of 44

Menu Item Mouse-Overs
When 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.

May 21, 2014
Document1
Page 15 of 44

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.

May 21, 2014
Document1
Page 16 of 44

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, ul.MenuBarHorizontal
May 21, 2014
Document1
Page 17 of 44
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 Modifications
It 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 Process
To 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.
May 21, 2014
Document1
Page 18 of 44

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

May 21, 2014
Document1
Page 19 of 44

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.

May 21, 2014
Document1
Page 20 of 44

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 Links
The width of the top-level menu items is determined by the following rule:

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

1) Text-align: center
2) Width: 20%

May 21, 2014
Document1
Page 21 of 44

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 Button
3 33%
4 25%
5 20%
6 17%
May 21, 2014
Document1
Page 22 of 44
Number of Buttons Width of Each Button
7 14%
8 13%
Text-Width Menu Items
By 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.

May 21, 2014
Document1
Page 23 of 44

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.

May 21, 2014
Document1
Page 24 of 44

At 2 ems of spacing, this is the result.

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

May 21, 2014
Document1
Page 25 of 44
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 Text
As 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;

May 21, 2014
Document1
Page 26 of 44

Second and Third-Level Submenu Items
Submenu Widths and Text Justification
The 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.

May 21, 2014
Document1
Page 27 of 44

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.

May 21, 2014
Document1
Page 28 of 44

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.

May 21, 2014
Document1
Page 29 of 44

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.
May 21, 2014
Document1
Page 30 of 44

Submenu Font Sizes
If 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
May 21, 2014
Document1
Page 31 of 44
menu. I strongly recommend using pixels. In this case, I have chosen 14 pixels.

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

Border Surrounding the Submenus
Borders 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

May 21, 2014
Document1
Page 32 of 44

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.
May 21, 2014
Document1
Page 33 of 44
a) Change the Width to 3 pixels, leaving the Same for all checkbox checked.
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.

May 21, 2014
Document1
Page 34 of 44
Third-Level Menu Offset
The 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
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.

May 21, 2014
Document1
Page 35 of 44

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

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

May 21, 2014
Document1
Page 36 of 44

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.

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.

May 21, 2014
Document1
Page 37 of 44

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.

I recommend the default Left Margin property setting of 95%.
Summary of Menu Modifications
Following 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.

May 21, 2014
Document1
Page 38 of 44
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

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

May 21, 2014
Document1
Page 39 of 44
Desired Menu Design
Element to Change
Menu bar item color
when mouse pointer
moves over it. This
includes the color of
the text and menu
item background.
a:hover,
a:focus
a.MenuBarItemHover,
a.MenuBarItemSubmenu
Hover,
a.MenuBarSubmenuVisibl
e

Width of the
submenus
Justification of the text
within the menu item
ul.MenuBarHorizontal ul
ul.MenuBarHorizontal ul li

Submenu borders
Submenu font size

May 21, 2014
Document1
Page 40 of 44
Desired Menu Design
Element to Change
Position of the third-
level menu in relation
to the second-level
menu
ul

Highlighting Links in Top-Level Spry Menus
It 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/).
May 21, 2014
Document1
Page 41 of 44

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.

May 21, 2014
Document1
Page 42 of 44

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.

May 21, 2014
Document1
Page 43 of 44

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.

<style type="text/css">
#ID01 {
background-color: #ffc000;
color: #000000;
}
#ID01:hover {
color: #ffffff;
}
</style>
May 21, 2014
Document1
Page 44 of 44

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, Scott@WebDesignSB.com
(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.

Dreamweaver Spry Menu Modifications

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Dreamweaver Spry Menu Modifications

Hochgeladen von

Copyright:

Verfügbare Formate

Dreamweaver Spry Menu

Das könnte Ihnen auch gefallen