1 Get the Zapatec DHTML Menu files
1.1 Download the Zip file
1.2 Unzip zpmenu.zip
2 Create a Menu with the Wizard
2.1 What does the Wizard do?
2.2 How to Start the Wizard
2.3 Using the Wizard
2.4 Pane - Introduction
2.5 Pane - Contents
2.6 Pane - Look and Feel
2.7 Pane - Effects
2.8 Pane - Get Your Code
3 Quick Startup (Without Wizard)
3.1 Set Up Your Menu
3.1.1 Insert The Headers
3.1.2 Path Warning
3.2 Create the Menu
3.2.1 Define the Data
3.2.2 Create the Menu
3.3 Copy the files to the web server
3.4 Test the menu application
3.5 Change Included Files
3.6 Custom Icons and Anchor Links
3.6.1 Custom Icons
3.6.2 Anchor Links
3.7 Many Levels
4 Configuration Options
4.1 Configuration Parameters
4.1.1 showDelay (integer, default 0)
4.1.2 hideDelay (integer, default 500)
4.1.3 onClick (boolean, default "false")
4.1.4 vertical (boolean, default "false")
4.1.5 zIndex (integer, default 0)
4.1.6 theme (string, default null)
4.1.7 rememberPath (boolean or string, default false)
4.1.8 pathCookie (string, default ’__zp_item’)
4.1.9 triggerEvent (string, default null)
4.1.10 triggerObject (string, default null)
4.1.11 triggerKey (integer, default 0)
4.1.12 top (string, default null)
4.1.13 right (string, default null)
4.1.14 bottom (string, default null)
4.1.15 left (string, default null)
4.2 Special Effects Parameters
4.2.1 dropShadow (integer, default 0)
4.2.2 scrollWithWindow (boolean, default "false")
4.2.3 drag (boolean, default "false")
4.2.4 fade (boolean, default "false")
4.2.5 glide (boolean, default "false")
4.2.6 wipe (boolean, default "false")
4.2.7 slide (boolean, default "false")
4.2.8 unfurl (boolean, default "false")
4.2.9 animSpeed (integer, default 10)
5 Menu Tips
5.1 Window Borders
5.2 Disable/Enable Menu Items
5.3 Target for Menu Item Links
5.4 Context-Sensitive Menus
5.5 Keyboard Shortcuts
5.5.1 Long Auto Scrolling Menu
5.6 Absolute Position
The DHTML Menu files are bundled in a zip file. Click the download link in the Menu section of Zapatec’s web site and follow the instructions to download the file.
Save the file (zpmenu.zip) to your website’s root folder on your computer or server.
On your computer, go to the folder where you saved the file zpmenu.zip.
zpmenu.zip contains a folder called zpmenu that holds all of the files you will need to create your menu.
Open or double-click zpmenu.zip to unzip or unpack it.
You can create a Zapatec menu with or without using the wizard.
The wizard generates the code for exactly the kind of menu you want! Its Graphic User Interface (GUI) allows you to select the menu’s features visually. Once you have made your selections, the wizard creates the menu-generating code that you can drop in your HTML document, form or application with the click of a button.
If you haven’t done so, follow the instructions in section 1.1. to download the Menu files.
Navigate to your DHTML Menu folder (zpmenu).
Open index.html in your Web browser.
Click Wizard in the left menu.
In the wizard, click the Next and Previous buttone to move through the panes, or choose a specific pane from the tabbed menu on the top. Roll your mouse over the question marks for additional information about the various options.
The first pane introduces the wizard and explains how to use it. You choose how many top sub-menus will be in the menu and how many items in each sub-menu. The menu is defined as a collection of HTML <UL> and <LI> sections, which you can edit in your favorite HTML editing program.
This pane lets you define the basic framework of the menu.
Number of Sub-Menus - This is the number of top-level menu items. For example, to create a menu consisting of Home (1), Products (2), Support (3), About (4), My Account (5), this value would be 5.
Number of Items - This is the number of items in each sub-menu. You can add and remove items in the Contents pane.
Vertical Menu - By default, the wizard generates horizontal drop-down menus. Click here if you want a vertical menu, in which the menu items pop out to the right of the menu.
Click Menu - Normally users see the drop-down menus when they hover over them. Check this option to have the menus drop when users click the items. This is how desktop applications behave. This option only affects the top-level menu items.
Trigger Menu - This option associates the menu with a mouse-click or key-press event.
Right Mouse Button
Left Mouse Button
Any Mouse Button
Keyboard
Trigger Key Scan Code - This is the decimal scan code of the associated key menu associated. For example, 113 is the key code for the F2 key. Required for the keyboard trigger event.
Trigger Object - This is the optional object id associated with the menu. For example, it could be the DIV inside which users click to display the menu. Leave this field blank to associate the menu with the entire document.
Keep Track of Previous Menu Location - If this option is selected, when users click an item, the location is saved in a cookie. When the menu is redisplayed on the target page, this item and the path to it are highlighted.
Expand Previous Location: Menu will open expanded to the saved location.
Cookie Name - Enter the name of the cookie that will hold the saved menu location. If you have several menus on a page, you should use a different cookie for each menu.
This pane builds on the menu framework you defined in the Introduction pane. You can modify the contents of the menu items (Add, Change, Delete). You can also change sub-menus. Since the menu is built using standard HTML lists, you can build the actual menu contents in your favorite editor or GUI or have your server generate the menu items programmatically from a database.
Click a menu item before making changes. The selected menu item will have a red border.
Item Text - Edit the text to appear in the menu item.
Item Link - Edit the absoulte or relative link for the menu item. For example, a link to Zapatec’s home page would be http://www.zapatec.com.
Link Target - Edit the target for this link. For example, if you want a new page to open for the Item Link, enter _new for the Link Target. Valid link targets are:
_top
_bottom
_blank
_new,
your own custom target name.
Insert Item Before - Insert a menu item before this menu item.
Insert Item After - Insert a menu item after this menu item.
Remove item - Remove this item..
Add Subtree - Add a sub-menu after this menu item.
Add Icon - Add an icon for this menu item. Choosing Add Icon produces dialog containing a list of icons from the Zapatec Icon Gallery. Select an icon and click OK. An alternative is to use your own icon, in which case you enter the path to the icon file in the Icon URL field and click OK. If the menu item already has an icon, Remove Icon is displayed instead of Add Icon.
This pane allows you to customize the look and feel of the menu. You can choose one of the many predefined themes, change the look and feel of the full menu, a sub-menu, or one menu item. Click the menu or menu item that you want to edit. A red border appears around the element that you are currently editing.
The properties links activate a window in which you edit the menu and menu item properties. You can see the menu change when you change a property, so you get a real-time view of the evolution of the presentation layer. If you do not like a change, you can reset the item to its previous value using the Reset button in the property window.
These are the editable catagories governing the look and feel of a menu:
Theme - Use this drop-down to choose the theme of the menu. The theme controls the menu’s colors, images and layout.
Menu Properties - Customize the appearance of all menu items.
Item Properties - Customize the appearance of the selected menu item only.
Sub-Menu Properties - Customize the appearance of the selected sub-menu.
In the Properties windows you can change the following:
Font
Font Family
Font Style Bold
Font Style Italic
Font Size in pixels
Style
Background Color
Background Image URL
Text Color
Highlighted Style
Background Color
Background Image URL
Text Color
Border
Width in pixels
Style - solid, dashed, ...
Color
Dimensions & Align
Width in pixels
Height in pixels
Text align - default, left, right, center, justify
Vertical align - default, top, middle, bottom, ...
This pane allows to you choose the special effects for the menu.
Scroll Menu - When the user scrolls down the page, the menu scrolls and stays in the same original position on the page.
Draggable Menu - The user can click anywhere in the menu and drag the menu in the window.
Glide Sub-Menus - Instead of appearing and disappearing immediately, the menu glides in and out gradually. Can be combined with fade.
Fade Sub-Menus - Instead of appearing and disappearing immediately, the menu fades in and out gradually. Can be combined with glide.
Slide Sub-Menus - Instead of appearing and disappearing immediately, the menu slides in and out. A sub-menu slides down while expanding and up while collapsing. The bottom of the sub-menu appears first and expands from the bottom up.
Wipe Sub-Menus - Instead of appearing and disappearing immediately the menu wipes in and out. The width and height of the sub-menu expand and collapse at the same rate.
Unfurl Sub-Menus - Instead of appearing and disappearing immediately, the menu unfurls in and out. The width expands first and then the height.
Drop Shadow Sub-Menus - The right and bottom parts of the sub-menu cast a shadow.
Advanced Options:
Animation Speed - Choose the relative animation speed for the effects listed above.
Show Delay - Change the speed at which sub-menus show.
Hide Delay - Change the speed at which sub-menus hide.
The wizard displays the code for your menu. Click Select All and press Ctrl C to copy the code to the clipboard. Open your editor, paste and save it.
The paths in the code assume that the menu file will be in the same folder as the zpmenu folder, not in the zpmenu folder itself. If you would like the file in a different folder, adjust the paths accordingly.
This section describes how to create menus in HTML and Javascript.
If you have not done so follow the instructions in Section 1.1. to download and unzip the Menu files.
In your web editor (Dreamweaver, UltraEdit, etc.), open the web page where you want the menu placed. Insert your cursor before the ending </head> tag. Paste the following style path and script paths before the ending </head> tag:
<!-- Javascript utilities file for the menu-->
<script src="utils/utils.js" type="text/javascript"></script>
<!-- basic Javascript file for the menu-->
<script src="src/menu.js" type="text/javascript"></script>
<!-- CSS file for office_blue style in the menu-->
<link href="themes/office_blue.css" rel="stylesheet" />
<!-- Optional Javascript file for keyboard shortcuts; not needed if you don't use keyboard shortcuts-->
<script src="src/menu-kbd.js" type="text/javascript"></script>
The lines point to different files located in the menu folder. The files are:
utils.js
Located in the utils folder. General javascript utilities file.
menu.js
office_blue.css
Located in the themes folder. Provides blue office 2003 style icons for the menu.
menu-kbd.js
Optional - Located in the src folder. This is the main javascript menu file for keyboard shortcuts. Do not copy this line unless you plan to use keyboard shortcuts for your menus.
Keyboard shortcuts are demonstrated in the Shortcuts Demo.
If the web page containing the menu is saved in the zpmenu folder, these lines will work without any changes. If, however, you save your web page in another location (like directly under your website’s root folder), you need to adjust the path for these files.
First define the data for the menu and then create the menu object.
The menu data is defined as a nested HTML list. The items can be in unordered lists <UL> or ordered lists <OL>. The top <UL> must have an id parameter, which will be used for creating the menu object.
<!-- The HTML for the menu--> <ul id="myMenu"> <li> menu 1 <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul> </li> <li> menu 2 <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul> </li> <li> menu 3 <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul> </li> <li> menu 4 <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <li> Item 4 </li> </ul> </li> </ul>
The easiest way to create the menu is to do it when the HTML finishes loading.
<body onload="new Zapatec.Menu('myMenu')">
An alternative is to place the following code after the section in which the data for the menu is defined. Do not place it before that section, because Javascript will not be able to find the menu definition and will generate an error.
<script type="text/javascript">
new Zapatec.Menu("myMenu");
</script>
Using your editing or FTP program, copy or "put" your web page and the entire tree folder to the root of your website.
Using your web browser, navigate to the web page that you created to include the Zapatec HTML Menu Congratulations! You have set up the most basic version of the Zapatec HTML Menu! Now, on to the fun and exciting features you can change with this highly adaptable application!
You can change the theme of the menu by including a different file in your header.
One of the lines you inserted in Section 3.1.1 includes the office_blue.css file in the themes folder. This is one of the themes that comes with the Zapatec DHTML Menu. You can choose among several themes by changing the CSS file. Look in the themes folder for more options.
If you have several menus on the page, if you wish you can use different themes for each menu using the theme menu option. See 4.1.6 for details. If you use the theme menu option to provide different themes for different menus, do not include any CSS files in your header.
You can add custom icons to each menu item by inserting image <IMG> tags inside the item’s HTML list item tags:
<li> <img src="icon.gif" alt="An icon" /> Our item with an icon </li>
Each menu item will probably have an anchor link to another document. Here is an example that creates a menu item to point to your home page:
<li> <a href="home.htm">Home Page</a> </li>
Here is an example that creates a customer icon (home.gif) and a link to your home page (home.htm):
<li> <img src="home.gif"><a href="home.php">Home Page</a> </li>
The following is an example of a menu with three levels of sub-menus. The start of a sub-menu is contained in <UL> tags.
<li><a href="#">Many Levels</a> <ul> <li><a href="#">Level-1a</a></li> <li><a href="#">Level-1b</a> <!-- Level-1b Start sub-menu --> <ul> <li><a href="#">Level-2a</a></li> <li><a href="#">Level-2b</a> <!-- Level-2b Start sub-menu --> <ul> <li><a href="#">Level-3a</a></li> <li><a href="#">Level-3b</a> <!-- Level-3b Start sub-menu --> <ul> <li><a href="#">Level-4a</a></li> <li><a href="#">Level-4b</a></li> <!-- Lowest Level --> </ul> <!-- Level-3b End sub-menu --> </li> <!-- Level-3b End menu item --> </ul> <!-- Level-2b End sub-menu --> </li> <!-- Level-2b End menu item --> </ul> <!-- Level-1b End sub-menu --> </li> <!-- Level-1b End menu item --> </ul> <!-- Many Levels sub-menu --> </li> <!-- Many Levels -->
As mentioned earlier, you create a menu using the following syntax:
<body onload="new Zapatec.Menu('myMenu')">
You can also pass a set of parameters to control the menu behavior when you create the menu:
<script type="text/javascript">
var myMenu = new Zapatec.Menu('myOtherMenu', {hideDelay:500, onClick:true})
</script>
This specifies that the menu should use the "myOtherMenu" list, that sub-menus should hide 500 Msec,.5 seconds after the cursor has moved away from them, and that the top menu should only display when clicked.
The remainder of this section describes the menu configuration parameters.
This is the interval, expressed in seconds or fractions of a second, between the time that the user’s mouse hovers over the menu and the menu appears.
See the Show and Hide Speeds Demo.
This is the interval, expressed in seconds or fractions of a second, between the time that the user’s mouse hovers over the menu and the menu disappears. Decreasing the interval below the default can cause the menu to appear "jerky".
See the Show and Hide Speeds Demo.
When onClick is false, the default, users see drop-down menus when they hover over them. When onClick is true, the menus drop when users click the items. This is how most desktop applications behave.
Choosing this option affects only the top-level menu items.
See the Click Demo.
By default, menus are horizontal, which means that the top level of the menu is a horizontal bar and the sub-menus display below. Set the vertical option to true for a vertical menu in which the top level of the menu is on the left and the sub-menus display to the right.
See the Vertical Demo.
This is the display order for the menu as it relates to other menus. The higher the zIndex, the higher this menu’s priority. For example, a menu with zIndex of 10 will display on top of a menu with zIndex 9.
See the Two Menus Demo.
This option enables different themes for different menus on the same web page. The string is the name of the theme file or the path to the theme file.
See the Two Menus Demo.
Do not use the theme option when you already have a link to a theme in the page header, as described in section 3.1.1. If you link to a Zapatec menu theme for the entire web page (for example office_blue.css) and use the theme option for a menu, the page will not render properly. Delete the header line that references a theme file if you are going to use the theme option instead.
Set this option to true to keep track of the previous menu location visited by the user. rememberPath uses a cookie to read and write the previous menu location. Valid values for the argument are:
true: Keep track of location.
false: Do not keep track of previous location.
"expanded": Keep track of location and re-open expanded to this location when the menu is accessed.
The CSS class name zpMenuPath is associated with the menu item whose path has been remembered. The style of all menu items leading to the selected menu item will be highlighted, based on zpMenuPath.
rememberPath is optional if the pathCookie flag option is not "__zp_item".
See the Two Menus Demo.
The string argument is the path to the cookie that is used to keep track of previous menu location.
Use this option with or instead of the rememberPath option when you need to specify which cookie contains path information to the user’s last location in this menu.
The pathCookie option is needed when you have multiple menus on a page and need to remember the unique path to each menu’s previous location.
If the rememberPath option is not false and the pathCookie option is not set, the pathCookie defaults to "__zp_item".
See the Track Menu Demo.
This is the name of the event that will trigger the display of the menu. This option is used to implement context-sensitive menus.
Valid trigger names are ’keydown’, ’keyup’, ’keypress’, ’mousedown’, ’mouseup’, and ’click’.
See the Context Sensitive Demo.
See also triggerObject and triggerKey.
This is the ID of the HTML element associated with the menu that is triggered by the triggerEvent. Ignored if triggerEvent is not set.
If triggerEvent is set and triggerObject is not defined, document.all is used.
See the Context Sensitive Demo.
See also triggerEvent and triggerKey.
This is the value of the specific keystroke or mouse button that will trigger the display of the menu. This option is used to implement context-sensitive menus.
The triggerEvent must be set for a keystroke to trigger the menu. In this case, the triggerEvent is ’keydown’, ’keyup’, or ’keypress’, and you use the numeric value of the keystroke for the triggerKey.
The triggerKey is optional for a mouse triggerEvent. By default the right mouse button triggers the menu. If the triggerEvent is ’mousedown’, ’mouseup’, or ’click", valid values for the triggerKey are ’right’, ’left’, or ’both’.
See the Context Sensitive Demo.
See also triggerEvent and triggerObject.
This is the absolute offset, in pixels, of the menu from the top of the document.
See the Absolute Position Demo.
This is the absolute offset, in pixels, of the menu from the right of the document.
See the Absolute Position Demo.
This is the absolute offset, in pixels, of the menu from the bottom of the document.
See the Absolute Position Demo.
This is the absolute offset, in pixels, of the menu from the left of the document.
See the Absolute Position Demo.
These parameters add special effects to menus. While multiple effects can be used, not all combinations of effects work well together.
This option gives the right and bottom parts of the sub-menu a shadow.
This is one of our most popular effects. It gives the sub-menu a 3D appearance. The integer sets the opacity of the shadow. For example, for a drop shadow at 25% opacity set this value to 25.
See the Drop Shadow Demo.
When this option is true, when the user scrolls down the page, the menu scrolls and stays in the same original position on the page.
See the Scroll With Window Demo.
When this option is true, the user can click anywhere in the menu and drag it.
See the Draggable Menu Demo.
When this option is true, the menu fades in (increases in opacity) on mouse over and fades out (decreases in opacity) on mouse out.
See the Special Effects Demo.
When this option is true, the menu glides in (increases clip) on mouse over and glide outs (decreases clip) on mouse out.
See the Special Effects Demo
When this option is true, instead of the menu appearing and disappearing immediately, it wipes in and out. The width and height of the sub-menu expand and collapse at the same rate.
When this option is true, instead of the menu appearing and disappearing immediately, it slides in and out. The sub-menu slides down while expanding and slides up while collapsing. The bottom of the sub-menu appears first and expands from the bottom up.
When this option is true, instead of the menu appearing and disappearing immediately, it unfurls. The width expands before the height.
This option sets the speed at which the special effect frames render. For example, a speed of 10 for the fade effect during mouse over will show 10 percent more opacity each 50 milliseconds until 100 percent opacity is reached. A value of 10 for the glide effect will show 10 percent of the menu on 1st pass, 20 percent on 2nd, etc. until 100 percent of the menu is displayed.
The menus automatically display where they fit best, based on the window’s borders. For example, if the menu is aligned to the rightmost window border, the sub-menus display to the left.
See the Stress Test Theme Demo.
You can dynamically disable and enable menu items.
See the Disabled Demo.
Use menu.itemDisable(string) to disable or menu.itemEnablestring() to enable a menu item. The argument is the ID of the item to be enabled or disabled.
There are several situations in which it might be desirable to disable a menu item. For example, you might want to disable the menu item that points to the current web page. Or it might be appropropriate to disable a shopping cart product if it is out of stock but you still want to show the product. A good way to automate this is to have the LI id be the SKU number. If the SKU of the item is out of stock, call menu.itemDisable(SKU).
var menuSku = new Zapatec.Menu('menuSku', {});
menuSku.itemDisable('112233'); // LI id of menu item product whose SKU is 112233
var menuNav= new Zapatec.Menu('menuNav', {});
menuNav.itemDisable('home'); // LI id of menu item that points to home.html
The link target for a menu item can have different link target property values. The link target specifies where the linked data appears.
To specify a link target, add the TARGET attribute to the anchor of the LI item that describes the menu item. The following example displays the data in a new window:
<li><img border='0' src='../themes/icon/icon_cut.gif'> <a href="http://www.zapatec.com" target="_blank">Cut</a> </li>
The next example displays the data in a frame named "frame":
li><img border='0' src='../themes/icon/icon_print.gif'> <a href="http://www.zapatec.com" target="frame">Print...</a></li>
The following values are valid for a menu item’s link target:
target="FrameName" - Opens the page in the frame named FrameName.
target="_blank" - Opens the page in a new window.
target="_new" - Opens the page in a new window.
target="_top" - Opens the page in the same window as the menu item.
See the Target Demo.
You can specify that a menu be activated only in a certain section of the screen and only in response to a certain keystroke or mouse click.
Wouldn’t it be nice to allow users to press F1 and give them a menu of Help items? And on the same web page they could right-click in a certain DIV section to see a menu of the products you sell on your web site. You can enable this behavior with context-sensitive menus.
Context-sensitive menus rely on three configuration options: triggerObject, triggerEvent, and triggerKey.
When the triggerEvent option is set for a menu, the menu appears only when that event fires. The event is typically a mouse or keyboard action by the user. See the description of the triggerEvent option in Section 4.1.9.
The triggerObject provides the context in which the menu is triggered. It is the ID of the element on the web page that is associated with the menu content. For example, if you are providing a menu of Help items related to something displayed in a DIV, the ID of the DIV would be the triggerObject and the menu would appear in or near the DIV when it is activated. Section 4.1.10 for details about setting the triggerObject.
If the triggerEvent is a mouse event, the default action is a mouse right-click. If you want the triggerEvent to respond to another mouse action, such as a left-click or a click of either mouse button, or to a keystroke, set the triggerKey. See Section 4.1.11 for details about setting the triggerKey.
See the Context Sensitive Demo for examples.
The following script illustrates various scenarios for context-sensitive menus.
<script type="text/javascript">
// activated by Right Click anywhere outside other trigger objects.
var menuAll = new Zapatec.Menu('myMenu', {triggerEvent: 'mouseup'});
// activated on F1 (value is 112)
var menuF1 = new Zapatec.Menu('myMenuEnter', {triggerEvent: 'keydown', triggerKey: 112});
// activated on right click
var menuRight = new Zapatec.Menu('myMenuRight', {triggerEvent: 'mouseup', triggerObject: document.getElementById('area1')});
// activated on left click
var menuLeft = new Zapatec.Menu('myMenuLeft', {triggerEvent: 'mouseup', triggerKey: 'left', triggerObject: document.getElementById('area2')});
// activated on left OR right click
var menuBoth = new Zapatec.Menu('myMenuBoth', {triggerEvent: 'mouseup', triggerKey: 'both', triggerObject: document.getElementById('area3')});
</script">
A user can navigate Zapatec menus using keyboard shortcuts.
To enable keyboard shortcuts, you must include menu-kbd.js in the headers. See Section 3.1.1.
When keyboard shortcuts are enabled, for each item in the menu having an underlined character, a user can press Alt + the underlined character to perform the menu’s action or expand its submenu.
For each active submenu item having an underlined character, a user can either press Alt + the underlined character or just the underlined character to perform the menu’s action or expand its submenu.
In an active menu item, a user can navigate the menu by pressing the arrows, ESC, or ENTER keys or the space bar. A user can traverse menu items by pressing the TAB key repeatedly.
See the Shortcuts Demo.
When a long sub-menu consists of more items than can be displayed in a page, a user can view the hidden items by moving the mouse to the up arrow at the top of sub-menu or to the down arrow at the bottom of sub-menu.
See the Long Auto Scrolling Menu Demo.
If the top, right, bottom or left options are set, the top_parent DIV is absolute positioned. The options’ values are assigned to corresponding CSS properties of the top_parent DIV.
You should set either the top or bottom option and the right or left option for drag and scroll menus instead of putting them inside absolute-positioned DIVS. Otherwise, the menu may be in an incorrect position.