LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team. Overview

Transcription

1 Overview The Spry Menu Bar allows you to add very user-friendly dynamic menus that allow for great organization to your website navigation. It builds a hierarchy of links to the inner pages of your site. The main section headings show up on the page all of the time, but the other links are only displayed when the user rolls the mouse over the top link. Lenovo's website, for example, uses this type of menu. In the Products section, Lenovo organizes their products in categories such as, Notebooks, Desktops, Workstations, etc. When the user rolls over Notebooks, a sub-menu of the families of notebooks appears. LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team.

2 Building these hierarchical menus from scratch is surprisingly difficult! It involves a combination of HTML, JavaScript and CSS. Luckily, Dreamweaver will be writing that code for us! What is JavaScript? JavaScript is the primary client-side programming language used by websites. (HTML is not really a programming language; it is more of a formatting language.) Saying that it is a client-side language means that it is executed on the client-side or by the browser just like HTML and CSS. This can be beneficial since the browser can execute code without sending information to the server. JavaScript is commonly used to perform the following operations: Image Rollovers Form Validation Open new browser windows Dynamic Menus Making content disappear! What is Adobe Spry? Spry is Adobe's free open-source Ajax Framework. An Ajax Framework is simply a collection of widgets and JavaScript functions that allow you to add functionality to your site quickly and easily. The best thing about Adobe's Spry Framework is that elements of it are built right into Dreamweaver. That means you may add Spry features without having to do that from scratch on the code side. Insert the Menu Bar using Dreamweaver Step 1 - Inserting the Spry Menu Bar is extremely easy. Try one of the following: Find the Spry category in the Insert Panel and look for the Menu icon (shown below). 2. Or, using the Insert drop-down at Insert > Spry > Spry Menu Bar 2 P age

3 Step 2 - Next, choose whether you would like a horizontal or vertical menu. This will set the look of the top That's it! You have added a Menu Bar. Now, to add your own links, you will need to customize the menu. (See below!) 3 P age

4 Customizing the Menu Bar Using Dreamweaver Step 3 - To add your text to the menu, click on the Menu Bar and open the Properties Window (as shown below). Dreamweaver allows three levels of menus. To add a sub item, simply click on the top level link and then click the plus (+) On the far right side add the text to appear in the menu and the URL of the link. 4 P age

5 Adjust Alignment The format of a Spry menu is controlled by CSS; thus, to alter the appearance, you need to edit the CSS definitions. By default, the horizontal menu aligns to the left of the page but you can easily align it to the right by changing the definition of the corresponding style. To change alignment, we need to change the Float setting. Step 4 - Start by selecting the style named ul.menubarhorizontal li in the CSS panel, and then in the Properties pane below it, click to the right of the Float field and use the drop-down list to select Right instead of Left. 5 P age

6 Replace Main Text When a menu bar is inserted, Dreamweaver populates it with placeholder text: Item 1, Item 2, etc. Step 5 - To add your own text, simply click-and-drag to select the text within each navigation box and then type over it to replace it with the word or words you want to use. As you can see, we ve replaced Item 4 and Item 3, and we ve selected the next item. Note: You can also edit menu items using the Properties inspector. Display Spry Menu Options Step 6 - To edit the text in the submenus, or to add or remove menu items, you first need to display the Spry menu options in the Properties inspector. To make these options visible, click on the blue tab at the top left of the Spry menu that you inserted into the page. In this example, it s labeled Spry Menu Bar: MenuBar1. When you click on the menu tab, the Properties inspector displays the corresponding Spry options. Edit Submenu Text Step 7 - With the Spry menu options open in the Properties inspector at the bottom of the work area, you can edit the submenu text by first selecting the menu item in the leftmost menu field and then selecting the submenu item in the middle menu field. You can edit the text of any selected item in the Text field at the far right of the inspector. 6 P age

7 Add or Remove Menus and Submenus Step 8 - You can add menu or submenu items by selecting any item listed in the Properties inspector and then clicking on the plus (+) sign at the top of the corresponding menu field. To remove a menu item, select it and click the minus ( ) sign. For example, you can add a third-level menu item by selecting a submenu item and then clicking the plus sign above the third menu field. Create and Edit Links Step 9 - A menu bar, by design, should include links to the main sections and subsections of a website. To turn any menu item into a link, select the item in the Properties inspector and enter the URL in the Link field. You can also use the Browse icon (it looks like a file folder) to locate and select any file in a website and set the link automatically. If you re setting a link to a top-level menu item, you can also select the text in the main workspace and set the link in the Properties inspector. 7 P age

8 Change Text and Background Colors Step 10 - To edit the text and background colors in a Spry menu, you must edit the corresponding styles. The tricky part is that the style definitions for text and background colors are included in the link styles, which have multiple states. For example, the style named ul.menubarhorizontal a defines the background and text color that display when a browser first loads a link. However, if you want to change the text or background color that appear when a visitor rolls a cursor over a link, you ll need to change the definition for the style named ul.menubarhorizontal a:menubaritemhover. 8 P age

9 Below you will find a chart which explains how to change the various background color styles. Below are the styles which set the text colors: 9 P age