Introduction

Introduction to the southprojects DHTML Menu Wizard

Using the southprojects Javascript Menu Wizard you can construct a menu and choose the various configuration options. When you are done, the Wizard will generate the necessary Javascript code and you can just paste the code into your HTML page.

---

Use the Next and Previous buttons to navigate through the tabs. To go to a specific tab, just click on the tab header on top.
Move your mouse over the question marks These tooltips provide additional information in the Wizard. To make them go away, just move the mouse away from the question mark and outside the tooltip box. to see the help for specific items.

---

Number of Sub-Menus:	Number of top sub-menus in a tree.	1 2 3 4 5 6
Number of Items:	Number of items, in each sub-menu.	1 2 3 4 5 6
Vertical Menu:	The wizard generates, by default, horizontal drop down menus. Click here if you want your menu to be a vertical menu where the menu items pop to the right of the menu.
Click Menu:	Normally you will see the drop down menus when you hover over them. Check this option to have the menus drop when you click on the items. This is how desktop application behave. Choosing this option only affects the top menu items. In the wizard, Click Menu is ONLY active in the Effects pane.

Trigger Menu:

Menu will be associated with mouse click or key press event.

Trigger Event:

Event menu associated with.

Right Mouse Button Left Mouse Button Any Mouse Button Keyboard

Trigger Key Scan Code:

Decimal scan code of key menu associated with. E.g. 113 for "F2", etc. Required for keyboard trigger event.

Trigger Object:

You may optionally enter object id associated with the menu. E.g. div inside which you should click to show menu. Leave this field blank to associate menu with whole document.

Keep Track of Previous Menu Location:

When you click on an item, it will be saved into cookie. When the menu is redisplayed on the target page, this item and path to it is highlighted.

Expand Previous Location:	Menu will open expanded to previous location.
Cookie Name:	Enter cookie name that will hold previous menu location. If you have several menus on a page, you should use different cookie for each menu.

Contents You will most probably like to generate a menu dynamically from a database. However, for the purpose of our wizard, the generated content will be a simple static list that shows you how the generation should be done.

Menu contents

Here you can define the layout of your your menu. First click an item on the right to select it. Then, use the links on the left to create/remove items and sub-items relative to the selected item. You can also change the text of the item in the box.
Since the Generated menu layout is done in HTML, you may find it easier to focus here on the menu features and then finish moving the nodes around in your editor.

Item Text
Item Link
Link Target
::	Insert Item Before
::	Insert Item After	- ALT-B: insert new item before the current one - ALT-A: insert new item after the current one - ALT-S: add a submenu to the current item - ENTER: shorthand for ALT-A
::	Remove Item
::	Add Subtree
::	Add Icon Remove Icon

Gallery

• Basic Icons
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
• Blue Icons
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
• Transparent Icons
  • Black
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
  • Blue
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 
    • 

URL

Icon URL:

OKCancel

Look and Feel

Look and Feel

Specify your menu's properties, and see the generated menu.

Theme	include(`../demo/share/themes_sel.m4')	Use this menu to choose the theme of your menu.
::	Menu Properties	Customize appearance of ALL menu items.
::	Item Properties	Customize appearance of selected menu item ONLY.
::	Sub-Menu Properties	Use this link to customize appearance of selected sub-menu.

Example

Example Highlighted Example

Font

Font Family:	default Arial Courier New Georgia impact serif sans-serif Tahoma Times New Roman Verdana
Font Style:	Bold Italic
Font Size:	pixels

Style

Background:	× Image URL:
Color:	×

Highlighted Style

Background:	× Image URL:
Color:	×

Border

Width:	pixels
Style:	default none dotted dashed solid double groove ridge inset outset
Color:	×

Dimensions & Align

Width:	pixels
Height:	pixels
Text align:	default left right center justify
Vertical align:	default baseline sub super top text-top middle bottom text-bottom

ApplyReset  OKCancel

Effects

Menu effects

Specify your menu's effects, and see the generated 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 the menu appearing and disappearing immediately it GLIDES in and out creating a more pleasant effect. The top of the sub-menu will appear first and will expand from the top down.
Fade Sub-Menus:	Instead of the menu appearing and disappearing immediately it FADES in and out creating a more pleasent effect. This option does not work in Opera.
Slide Sub-Menus:	Instead of the menu appearing and disappearing immediately it SLIDES in and out creating a more pleasent effect. Sub-Menu will slide down while expanding and slide up while collapsing. The bottom of the sub-menu will appear first and will expand from the bottom up.
Wipe Sub-Menus:	Instead of the menu appearing and disappearing immediately it WIPES in and out creating a more pleasent effect. The width and height of the sub-menu will expand and collpase at the same rate.
Unfurl Sub-Menus:	Instead of the menu appearing and disappearing immediately it UNFURLS in and out creating a more pleasent effect. The width expands first and then the height.
Drop Shadow Sub-Menus:	Sub-Menu has a shadow. The right and bottom part of the sub-menu will have a shadow.
Advanced Options	Choose menu advanced options: animation speed, sow delay and hide delay.

Animation Speed:	Choose animation speed for effects above.	Very Slow Slow Normal Medium Fast Very Fast
Show Delay:	Change the speed at which sub menus show.	Immediately .1 Second .25 Second .5 Second One Second Two Seconds
Hide Delay:	Change the speed at which sub menus hide.	Immediately .1 Second .25 Second .5 Second One Second Two Seconds Five Seconds Ten Seconds Never

Get Your Code

Your code is below

Click on select all and then copy the code into the clipboard. Go into your editor paste and save it.
The paths in the code assume that the pages with the menu will be in the spmenu folder. If you would like them to be in a different folder, you will need to adjust the paths accordingly.