Visionary Technologies
Web Menu Builder
The Web Navigation Solution
Web Menu Builder 1.0
Web Menu Builder 1.0
Manual
Copyright ã Visionary Technologies 2000
Table of contents
Overview
Creating the menu
Creating / Deleting an item or a container
The menu bar
The properties
Menu properties
Item’s properties
Styles manager
Using the items tree view
Using the Style Editor
Integrate the generated code in your page
Support & feedback
Create and Maintain your Web Navigation
|
T |
He Web Menu Builder allows to create Web Menu / Navigation in a few mouse clicks.
With this powerful tool, you will be able to create friendly user interface for your web site. Your visitors will ease their visits and navigation through your site and can also have an overview of your web site due to the hierarchical behavior of your menu.
Often, to create a professional looking Web Menu, you need to have really good knowledge of HTML, DHTML, JavaScript and others Web related technologies.
Maybe, you are a Web experts, but do not waste your time to develop menu/navigation, verify it for each browser, optimise the code, ….
Use the Web Menu Builder to easily create and maintain your Web Menu/Navigation, in a few clicks add items, add sub menus, add effects and behaviours.
The Web Menu Builder generate code that is highly tested to run under each browsers, like IE (MS Internet Explorer) or NS (Netscape navigator).
Do not take care of which browser support each tag, effect or feature, the Web Menu Builder do all for you.
To create a new menu you have only three steps :
- Add the items and the sub menu
- Use the preview window to preview your creation
- Integrate it in your Web Page
   
|
The following image show the Web Menu Builder in action.
A menu is organized in a hierarchic way, i.e. you have a main menu ( also called container) that contains a set of items. Each item can have a sub menu ( also called sub container ) which also contains a set of items.
In the following example you have the main container that contains 7 visibles items.
1. The item that contains the VTech logo
2. The home item
3. The products item
4. …
To create an item (or a sub container) select an item or a menu in the items hierarchy and press the (+) button. A sub item (or sub container) appear.
 Press
it to add an item
Press
it to remove an item
 
|
In order to remove an item, select it and
press the (-) button.
Fast access to your features
The menu bar provide you all the main features that you need to create and test your menu.
It allows you to :
- create a new menu
- Open an existing menu
- Save the menu
- Generate the HTML and the JavaScript file
- Preview the menu
- Set the options
- Manage the styles
- Start the help
- An about box that allows to go to the VTech Web site (For update or purchasing)
Set what you want
Each item and each menu has its set of properties that allows you to customize your menu for your Web Site. The following list describe the properties and how use them.
|
Item name |
Description |
|
Background color |
The background color of the menu container |
|
Border Dark Color |
The color of the darker color of the menu border |
|
Border Light Color |
The color of the light color of the menu border |
|
Border Width |
The width of the menu border |
|
Menu Style |
The style of the menu container |
|
Image - when mouse over |
The background images of the menu container |
|
Image |
The background images of the menu container - when mouse is over |
|
Item name |
Description |
|
Title |
The title that is displayed for this item |
|
Display Title |
Specifies if the title must be displayed in the item |
|
Title Alignment |
The alignment of the title |
|
Title Color |
The color of the title |
|
Title Color - Mouse Over |
The color of the title - when mouse if over the item |
|
Title Font |
The font of the title |
|
Title Font - Mouse Over |
The font of the title - when mouse if over the item |
|
Title is Italic |
Specifies if the title is italic or not |
|
Title is Italic - Mouse Over |
Specifies if the title is italic or not - when mouse if over the item |
|
Title is Bold |
Specifies if the title is bold or not |
|
Title is Bold - Mouse Over |
Specifies if the title is bold or not - when mouse if over the item |
|
Title is Underlined |
Specifies if the title is underlined or not |
|
Title is Underlined - Mouse Over |
Specifies if the title is underlined or not - when mouse if over the item |
|
Title Size |
Specifies the title size |
|
Title Size - Mouse Over |
Specifies the title size - when mouse if over the item |
|
URL |
Specifies the URL to be opened when clicking on the item |
|
Link Target |
Specifies the frame into which the defined URL must be opened: '_blank' for a new window, '_parent' to open in the parent frame, '_self' to open in the current frame, '_top' to open in the top frame of the current window. |
|
Status Bar text |
The description of the item or of the link, it will be displayed in the status bar
|
|
Icon |
Use it if you want to add an image to the item |
|
Icon - Mouse Over |
Use it if you want to add an image to the item - when mouse if over the item |
|
Icon Alignment |
Specifies how the image aligns with the title |
|
Is a Separator |
Specifies if the item is a separator |
|
Separator Down Color |
Specifies the first color of the separator |
|
Separator Up Color |
Specifies the second color of the separator |
|
Have Mouse Over Behavior |
Specifies if the item react when the mouse is over |
|
Have Mouse Click Behavior |
Specifies if the item react when you click on it |
|
Background Color |
Specifies the background color of this item |
|
Background Color - Mouse Over |
Specifies the background color of this item - when mouse if over the item |
|
Cursor |
Specifies the cursor of the mouse |
|
Top Gap |
Specifies the space between the title and the item (on Top) |
|
Bottom Gap |
Specifies the space between the title and the item (on Bottom) |
|
Left Gap |
Specifies the space between the title and the item (on Left) |
|
Right Gap |
Specifies the space between the title and the item (on Right) |
|
Open Sub menu - When |
Specifies when the sub menu open |
|
Open Sub menu - How |
Specifies how the sub menu open |
|
Open Sub menu – Speed |
Specifies the speed of the menu open display |
|
Open Sub menu - Distance Hor. |
Specifies where the sub menu is open relatively to its parent menu - Horizontal distance |
|
Open Sub menu - Distance Vert. |
Specifies where the sub menu is open relatively to its parent menu - Vertical distance |
|
Open Sub Menu - Where |
Specifies where the sub menu appear |
|
Open Sub Menu – Image |
Adds a image to emphasize the existence of a submenu |
|
Open Sub Menu - Mouse Over Image |
Adds a image to emphasize the existence of a submenu - when mouse if over the item |
|
Is moveable |
Determine if this item can be used to move the menu. |
The Web Menu Builder provide you an easy way to manage your styles. Often, you setup an item or a container and you want to apply the same settings to others items.
To solve this problem, you use the Style Editor. The Style Editor allows to copy the style of an item or container and to paste it to the same kind of element.
|
|
Select an item or a container and right click. A popup menu will appear, simply choose to copy or paste the selected style. |
|
|
The Style Editor is able to store severals style, it allows you to choose the style you want to copy. To copy a style, simply select the style icon and drag&drop it to the selected item or container. |
Only one line … or two ?
The Web Menu Builder generate two files:
- A JavaScript file for the menu (core)
- A JavaScript file that define the menu
- A sample HTML file
The HTML is an example of integration of a menu.
The JavaScript files must remain the same, just put it somewhere on your Web Site.
To integrate the menu, you need to copy two lines in you HTML files.
|
Code |
Description |
|
<script language="Javascript1.2" src="wmb_menu.js"> </script> |
Add the path to the menu script |
|
<script language="Javascript1.2" src="wmb_def.js"> </script> |
Add the path to the menu definition script |
|
<DIV class='wmbmenubar' id="??c_r"></DIV> |
Place this tag where you want to place your menu |
In order to receive support, go to the VTech Web Site : http://www.v-tech.ws
You will find a form that allows you to ask questions, also you can give us feedback, ask for new features, ….
