Web Design. Santa Barbara. Dreamweaver Spry Menu Modifications

Transcription

1 Web Design Santa Barbara Dreamweaver Spry Menu Modifications Scott Nelson Web Design Santa Barbara Updated

2 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 Font Style, Weight, and Variant Menu Item Colors Menu Item Mouse-Overs Top-Level Menu Appearance Modifications General Outline of the Process Changing the Width of the Top-Level Links Equally-Spaced and Centered Menu Items Text-Width Menu Items Fixed-Width Menu Items Padding Around the Menu Text Second and Third-Level Submenu Items Submenu Widths and Text Justification Submenu Font Sizes Border Surrounding the Submenus Third-Level Menu Offset Summary of Menu Modifications Highlighting Links in Top-Level Spry Menus Creative Commons Page 2 of 44

3 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 secondlevel 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. Page 3 of 44

4 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. Page 4 of 44

5 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. Page 5 of 44

6 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. Page 6 of 44

7 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). Page 7 of 44

8 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 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. Page 8 of 44

9 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 fontsize from one menu level to another. Therefore, we will modify the font from the toplevel 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. Page 9 of 44

10 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. Page 10 of 44

11 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. Page 11 of 44

12 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. Page 12 of 44

13 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). Page 13 of 44

14 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 yelloworange (#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. Page 14 of 44

15 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. Page 15 of 44

16 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 Page 16 of 44

17 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. Page 17 of 44

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

19 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. Page 19 of 44

20 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% Page 20 of 44

21 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% Page 21 of 44

22 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. Page 22 of 44

23 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. Page 23 of 44

24 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. Page 24 of 44

25 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; Page 25 of 44

26 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. Page 26 of 44

27 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. Page 27 of 44

28 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. Page 28 of 44

29 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. Page 29 of 44

30 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 Page 30 of 44

31 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 Page 31 of 44

32 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. Page 32 of 44

33 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. Page 33 of 44

34 Third-Level Menu Offset The third-level menu is offset from the second-level menu. In the default mode, the thirdlevel 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. Page 34 of 44

35 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%. Page 35 of 44

36 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 thirdlevel 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. Page 36 of 44

37 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. Page 37 of 44

38 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 Page 38 of 44

39 Desired Menu Design Element to Change CSS Rule to Edit CSS Styles Panel 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.menubaritemsubmenu Hover, ul.menubarhorizontal 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 ul.menubarhorizontal ul Page 39 of 44

40 Desired Menu Design Element to Change CSS Rule to Edit CSS Styles Panel Position of the thirdlevel menu in relation to the second-level menu ul.menubarhorizontal ul 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 ( Page 40 of 44

41 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. Page 41 of 44

42 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. Page 42 of 44

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. <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. Page 43 of 44

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 ( Registered Trademarks found in this document and are the sole property of their respective legal owners. Page 44 of 44