Drop-down menus

To open or shut the menu at left, click on the top part of the menu. To go to a page, click on an item of interest while the menu is open.

To create the menu at left, download the zip files or hqx files. To link the individual text elements to HTML pages, show the Attributes Palette and for each text element, do the following:

  1. Using the Layers Palette, select the text element.
  2. In the Attributes Palette, select "Rectangle" from the "Image Map" drop-down menu.
  3. Type in the URL of the HTML page in the "URL" text field.

To make the menu interactive, do the following:

  1. Group all of the bottom menu elements that will eventually be hidden and name the group menu.
  2. Group all of the elements in the top part of the menu that will open and close the menu.
  3. Use the Layers Palette to select the group containing the top of the menu. Make sure that only this group is selected.
  4. Using the "Windows" menu, show the SVG Interactivity Palette.
  5. Using the SVG Interactivity Palette, link in the menu.js file.
    1. Click on the folder icon.
    2. Click on the "Add" button to source in a JavaScript file.
    3. In the "URL" text field, type menu.js . Note: If the menu.js file will not be located in the same directory as the SVG file, add the relative path of the menu.js file.
    4. Click the "OK" button and then click the "Done" button.
  6. Add the mouse events.
    1. Using the Interactivity Palette, select "onclick" from the "Event" drop-down menu.
    2. In the "JavaScript" text field, type toggle(evt, 'menu') and press <Enter>.
    3. For each text element in the menu, do the following:
      1. Double-click the element in the Layers Palette.
      2. In the "Options" dialog box, add a space to the end of the name, delete it, and click "OK." This changes the default name of the element so that it gets exported to the SVG to ensure the rollovers on these text elements work.
      3. Using the Layers Palette, select the text element.
      4. In the SVG Interactivity Palette, select "onmouseover" from the "Event" drop-down menu.
      5. In the "JavaScript" text field, substituting "name" with the actual name of the text element, type elemColor(evt, 'name', '#0066CC') and press <Enter>.
      6. In the SVG Interactivity Palette, select "onmouseout" from the "Event" drop-down menu.
      7. In the "JavaScript" text field, substituting "name" with the actual name of the text element, type elemColor(evt, 'name', '#000000') and press <Enter>.
  7. Create a new layer and on that layer, draw a rectangle or path, with no stroke and no fill, around all of the artwork that makes up the bottom part of the menu. This invisible but non-hidden boundary will ensure the viewable area of the SVG is large enough to display the hidden part of the menu when it is made visible.
  8. Using the Layers Palette, hide the "menu" group. DO NOT hide the layer.
  9. Using the default settings, export the file as SVG and name it menu.svg.
  10. Copy a version of Samples/SVG_Interactivity_Palette/menu/menu.js into the same directory as the menu.svg file you created or to the relative directory location you specified earlier.
  11. Embed SVG within an HTML document by adding the following to the <BODY> of your HTML:
    <EMBED SRC="menu.svg" TYPE="image/svg-xml" PLUGINSPAGE="http://www.adobe.com/svg/viewer/install/" HEIGHT="244" WIDTH="146">

    This presumes that the SVG file is in the same directory as the HTML and that the height and width correspond with those of the SVG file.

Note: If you plan on using the menu in a frames-based environment like the one used in this example, you will need to manually add the frame targets to the menu.svg file. Refer to the Samples/SVG_Interactivity_Palette/menu/menu.svg file for the proper syntax.