Docstoc

Dreamweaver_Spry_Menu_Modifications

Document Sample
Dreamweaver_Spry_Menu_Modifications Powered By Docstoc
					Web Design
         Santa Barbara




Dreamweaver Spry Menu
Modifications




                        Scott Nelson
                 Web Design Santa Barbara
                   www.WebDesignSB.com
                 Updated October 27, 2011
Dreamweaver Spry Menu Modifications
                                                                                                     October 27, 2011


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
Global Menu Properties ............................................................................................... 8
  Modifying the Menu Font .......................................................................................... 8
    Font Size ............................................................................................................. 8
    Font Family ........................................................................................................ 10
    Font Style, Weight, and Variant ............................................................................ 10
  Menu Item Colors .................................................................................................. 11
  Menu Item Mouse-Overs ........................................................................................ 13
Top-Level Menu Appearance Modifications ................................................................... 16
  General Outline of the Process ................................................................................ 16
  Changing the Width of the Top-Level Links ............................................................... 19
    Equally-Spaced and Centered Menu Items ............................................................. 19
    Text-Width Menu Items ....................................................................................... 21
    Fixed-Width Menu Items ...................................................................................... 23
  Padding Around the Menu Text ................................................................................ 24
Second and Third-Level Submenu Items ..................................................................... 25
  Submenu Widths and Text Justification .................................................................... 25
  Submenu Font Sizes .............................................................................................. 29
  Border Surrounding the Submenus .......................................................................... 30
Third-Level Menu Offset ............................................................................................ 33
Summary of Menu Modifications ................................................................................. 36
Highlighting Links in Top-Level Spry Menus ................................................................. 39
Creative Commons ................................................................................................... 43




Document1
                                                      Page 2 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011



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.




Document1
                                        Page 3 of 43
Dreamweaver Spry Menu Modifications
                                                                         October 27, 2011




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




Document1
                                       Page 4 of 43
Dreamweaver Spry Menu Modifications
                                                                            October 27, 2011



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.




Document1
                                        Page 5 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011




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.




Document1
                                        Page 6 of 43
Dreamweaver Spry Menu Modifications
                                                                          October 27, 2011




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




Document1
                                       Page 7 of 43
Dreamweaver Spry Menu Modifications
                                                                              October 27, 2011


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.




Document1
                                         Page 8 of 43
Dreamweaver Spry Menu Modifications
                                                                               October 27, 2011




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.




Document1
                                          Page 9 of 43
Dreamweaver Spry Menu Modifications
                                                                        October 27, 2011


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.



Document1
                                      Page 10 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011


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.




Document1
                                       Page 11 of 43
Dreamweaver Spry Menu Modifications
                                                                       October 27, 2011




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




Document1
                                       Page 12 of 43
Dreamweaver Spry Menu Modifications
                                                                         October 27, 2011




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.




Document1
                                      Page 13 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011




   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.




Document1
                                       Page 14 of 43
Dreamweaver Spry Menu Modifications
                                                                         October 27, 2011




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

Document1
                                      Page 15 of 43
Dreamweaver Spry Menu Modifications
                                                                              October 27, 2011


       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.

Document1
                                         Page 16 of 43
Dreamweaver Spry Menu Modifications
                                                                              October 27, 2011




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




Document1
                                         Page 17 of 43
Dreamweaver Spry Menu Modifications
                                                                             October 27, 2011



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.




Document1
                                        Page 18 of 43
Dreamweaver Spry Menu Modifications
                                                                             October 27, 2011




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%




Document1
                                       Page 19 of 43
Dreamweaver Spry Menu Modifications
                                                                             October 27, 2011




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%

Document1
                                        Page 20 of 43
Dreamweaver Spry Menu Modifications
                                                                              October 27, 2011


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.




Document1
                                         Page 21 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011




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.




Document1
                                       Page 22 of 43
Dreamweaver Spry Menu Modifications
                                                                          October 27, 2011




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.




Document1
                                           Page 23 of 43
Dreamweaver Spry Menu Modifications
                                                                              October 27, 2011


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;


Document1
                                         Page 24 of 43
Dreamweaver Spry Menu Modifications
                                                                               October 27, 2011




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.




Document1
                                         Page 25 of 43
Dreamweaver Spry Menu Modifications
                                                                          October 27, 2011




  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.




Document1
                                     Page 26 of 43
Dreamweaver Spry Menu Modifications
                                                                          October 27, 2011




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.




Document1
                                      Page 27 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011




   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.




Document1
                                      Page 28 of 43
Dreamweaver Spry Menu Modifications
                                                                            October 27, 2011




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


Document1
                                        Page 29 of 43
Dreamweaver Spry Menu Modifications
                                                                               October 27, 2011


   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




Document1
                                         Page 30 of 43
Dreamweaver Spry Menu Modifications
                                                                          October 27, 2011




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.


Document1
                                      Page 31 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011


   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.




Document1
                                       Page 32 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011


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.




Document1
                                       Page 33 of 43
Dreamweaver Spry Menu Modifications
                                                                        October 27, 2011




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


Document1
                                     Page 34 of 43
Dreamweaver Spry Menu Modifications
                                                                         October 27, 2011




     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.




Document1
                                     Page 35 of 43
Dreamweaver Spry Menu Modifications
                                                                          October 27, 2011




      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.




Document1
                                      Page 36 of 43
Dreamweaver Spry Menu Modifications
                                                                         October 27, 2011


Desired Menu Design            CSS Rule to Edit              CSS Styles Panel
Element to Change

This rule effects the entire      ul.MenuBarHorizontal
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

   Width of the top-level        ul.MenuBarHorizontal li
    menu items
   Horizontal position
    (justification) of menu
    text in the menu item:
    left, centered, right




   Menu item colors,             ul.MenuBarHorizontal a
    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




Document1
                                          Page 37 of 43
Dreamweaver Spry Menu Modifications
                                                                             October 27, 2011


Desired Menu Design             CSS Rule to Edit                 CSS Styles Panel
Element to Change

   Menu bar item color            ul.MenuBarHorizontal
    when mouse pointer              a:hover,
    moves over it. This             ul.MenuBarHorizontal
    includes the color of           a:focus
    the text and menu              ul.MenuBarHorizontal
    item background.                a.MenuBarItemHover,
                                    ul.MenuBarHorizontal
                                    a.MenuBarItemSubmenu
                                    Hover,
                                    ul.MenuBarHorizontal
                                    a.MenuBarSubmenuVisibl
                                    e

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




   Submenu borders                ul.MenuBarHorizontal ul
   Submenu font size




Document1
                                           Page 38 of 43
Dreamweaver Spry Menu Modifications
                                                                            October 27, 2011


Desired Menu Design          CSS Rule to Edit                CSS Styles Panel
Element to Change

   Position of the third-      ul.MenuBarHorizontal ul
    level menu in relation       ul
    to the second-level
    menu




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




Document1
                                        Page 39 of 43
Dreamweaver Spry Menu Modifications
                                                                            October 27, 2011




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.




Document1
                                       Page 40 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011




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.




Document1
                                       Page 41 of 43
Dreamweaver Spry Menu Modifications
                                                                         October 27, 2011




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.


     <style type="text/css">
     #ID01 {
           background-color: #ffc000;
           color: #000000;
     }
     #ID01:hover {
           color: #ffffff;
     }
     </style>




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.




Document1
                                      Page 42 of 43
Dreamweaver Spry Menu Modifications
                                                                           October 27, 2011




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.




Document1
                                       Page 43 of 43

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:10/27/2011
language:
pages:43