Copyright: © 2002 Likno Software, all rights reserved
Citation: © Likno Software


What is AllWebMenus

AllWebMenus is a dhtml/javascript menu builder for web site navigation that requires absolutely no DHTML or Javascript experience from you. It creates cross-browser, popup or drop down menus that work alike in all browsers supporting DHTML (Opera and all Netscape Navigator and Internet Explorer of versions 4.0 and later).

A javascript menu can be designed with a simple, tree-like approach. You can then fully customize it by using the Properties Pane or by choosing a predefined appearance from the Style Gallery. It can be either vertical or horizontal (popup or drop down menu), it can be movable, stay visible while scrolling, contain static or animated images, borders, colors and much more!

Once everything is set, you can compile and link your menu to your web pages in a fast and easy manner, without any code involved!

AllWebMenus will save you a significant amount of time and effort required to fully understand Dynamic HTML and Javascript code capable to support all Internet Explorer, Netscape and Opera browsers.

Major Features Include:

Compile and link menus to your web pages in no time and without any code required.

Create menus fast by using pre-designed menu styles from the Style Gallery.

Use multiple menus in the same page.

Use two flexible ways to position your menus: Either using window coordinates or attaching it to any table cell inside the page.

Create menus for use inside framed web sites.

Specify an alternative (non-menu) web page to open when a user has an older browser that does not support DHTML and Javascript (optional).

Use complete help for all properties and procedures. Press F1 while you are on a property to immediately receive Quick Help for that property.

Use the Pick Style and Apply Style functions to quickly transfer an item's appearance to other items.

Design both horizontal and vertical menus and use static or animated images for both the background and content.

Create effects by assigning different values to the item properties for three different item states: "Normal", "Mouse Over" and "Mouse Click" item states.

Position the menu anywhere on the screen and keep the menu visible in the same position while scrolling (<Menu Drifts on Scroll> property).

Specify Javascript Commands to be executed when clicking on menu items.

Specify Javascript Commands to be executed when a submenu appears/disappears or even when the Main Menu appears/disappears.

Use both vertical and horizontal submenus at any possible combination.

Use Titles on submenus and allow the user to drag the menu from its Title.

Choose "How", "When" and "Where" any submenu opens.

Use "Distances between menu items" and assign a "Statusbar Text" for each item.


What's new!

Legend:

 +	means added feature

  *	means improved/changed feature

  -	means bug fixed

April 16, 2002

New distribution of AllWebMenus v2.0: Build #460

(existing menus compiled with Build #458 must be recompiled only if you used the Frontpage Support feature.

Relinking is not necessary, if the compiled menus are linked with Build #452 and later)

* Updated Javascript Libraries (version #124) with the following improvements:

  - Fix on the Frontpage Support feature

  - Fixes on extreme cases when combining too many features in a menu implementation.

    These extreme cases behave as expected now.

April 05, 2002

New distribution of AllWebMenus v2.0: Build #458

(existing menus compiled with Build #456 must be recompiled.

Relinking is not necessary, if the compiled menus are linked with Build #452 and later)

* Updated Javascript Libraries (version #120) with the following improvements:

  - Macintosh fix of various bugs and improved speed optimization

  - Opera fix on compiled menus when Opera is identified as Mozilla/Opera

  - Netscape 4.x fix on browser resize when multiple menus are used

  - Netscape 4.x fix on the Mouse Over effect when transparent backgrounds are used

  - CSS fix on a conflict with external CSS definitions of the <td> and <table> elements

  - Netscape 6.x fix on browser resize when both Multiple Menus and Relative Positioning are used

  - IE fix on some minor cross-frame problems

  - Netscape 6.x fix on the <Menu Drifts on Scroll> property

  - Netscape 4.x fix on a <Background Image> bug

February 23, 2002

New distribution of AllWebMenus v2.0: Build #456

(existing menus compiled with Build #454 must be recompiled, only if you had problems

with the following features: cross-frame implementations, Alternative URL, Z-Index layering.

Relinking is not necessary, if the compiled menus are linked with Build #452 and later)

* Updated Javascript Libraries (version #118) with the following improvements:

  - Cross-Frame menus do not produce an error when the user refreshes the page

  - Cross-Frame menus do not produce an error when a Submenu name is the same with the Main Menu Name

  - The Alternative URL feature works as expected for Netscape 3.0

  * Layering through the Z-index property has been improved so that the menu appears correctly above other layers.

February 12, 2002

New distribution of AllWebMenus v2.0: Build #454

* Updated Javascript Libraries (version #116) with the following improvements:

  + Browser-specific Offset for relative positioning added

   - Opera/Netscape reload problem fixed

February 1, 2002

AllWebMenus version 2.0 Build #452 released

(existing menus compiled and linked with a previous AllWebMenus version must be recompiled and relinked)

+ The menu-building speed has been improved!

+ Optimization option added, offering an additional boost to the improved menu-building process!

+ Cross-Frame support enabled. Main Menu and its submenus can now be placed on different frames!

+ Multiple menus on the same page now supported!

+ Both absolute and relative menu positioning now supported; menus can be positioned on the top-left corner of any table cell!

* FrontPage Support added to properly handle Shared Borders.

+ Custom compile folders now supported. Very useful for implementations of multiple-menus.

+ HTML Live Examples added for all properties!

+ Many new and improved Properties extend the richness of the application (see below):

_____New/Improved Properties Begin Here______

*  Improved Global Property: <Menu Drifts on Scroll>

Menus can now drift on the page when user scrolls the page in ANY direction.

+  New Global Property: <Sticky Submenus>

Submenus can now remain open even if the mouse moves away from the menu area; they close only when the user clicks on the page.

*  Improved Main Menu/Submenu property: <Title Contains>

The old <Display Name in Title> property is now simplified to the more self-explanatory <Title Contains> property.

+  New Main Menu property: <PopUp>

Main Menu can now open either when the page opens OR only when a specific Javascript function is called.

+  New Main Menu property: <Main Menu Appears - How>

Main Menu can now appear in a smooth, unfolding manner.

+  New Main Menu property: <Main Menu Unfolds Towards>

If Main Menu appears "unfolding", this is where you can specify its "unfolding" direction.

+  New Main Menu/Submenu property: <Title Tooltip>

Text can now appear as a tooltip when the user pauses the mouse pointer over the Title.

+  New Main Menu/Submenu property: <Title Cursor>

A different cursor from a selection of cursors can now be used on the Title.

+  New Main Menu/Submenu property: <Title Padding>

Allows you to add a number of pixels between the Title content and its edges.

*  Improved Main Menu/Submenu property: <Title Font Size>

Allows you to use either CSS sizing OR browser-relative sizing.

+  New Main Menu/Submenu property: <Javascript Command on Appear>

Any javascript code can now be executed upon the appearance of the Main Menu / Submenu.

+  New Main Menu/Submenu property: <Javascript Command on Disappear>

Any javascript code can now be executed upon the disappearance of the Main Menu / Submenu.

*  Improved functionality, each submenu has its OWN  <Submenu Opens - ...> properties now:

These properties have been moved from Global Properties to the Submenu Properties so that more flexibility is provided.

+  New Submenu property: <Submenu Opens - When>

Answers the question:  the selected submenu opens on "Mouse Over" or on "Mouse Click"?

+  New Submenu property: <Submenu Opens - Where>

Answers the question:  At which side of its parent submenu does the selected submenu open?

+  New Submenu property: <Submenu Opens - At Distance>

Answers the question:  How many pixels away from its parent submenu does the selected submenu open?

+  New Submenu property: <Submenu Opens - How>

Answers the question:  the selected submenu opens instantly or in a smooth, unfolding manner?

+  New Submenu property: <Submenu Opens - Towards>

Answers the question:  if the submenu opens in an unfolding manner, what will its "unfolding" direction be?

+  New Submenu property: <Submenu Aligns with>

Answers the question:  How does the selected submenu align with its parent element?

*  Improved Item property: <Item Contains>

The old <Display Name in Item> property is now simplified to the more self-explanatory <Item Contains> property.

+  New Item property: <Item Tooltip>

Text can now appear as a tooltip when the user pauses the mouse pointer over the Item.

+  New Item property: <Item Cursor>

A different cursor from a selection of cursors can now be used on the Item.

+  New Item property: <Item Padding>

Allows you to add a number of pixels between the Item content and its edges.

*  Improved Item property: <Item Font Size>

Allows you to use either CSS sizing OR browser-relative sizing.

*  Improved Item property: <Javascript Command>

Any javascript code can now be executed at ALL item states. "Normal" state acts as the "Mouse Out" event for the javascript code to be executed.

_____New/Improved Properties End Here______

How Do I Know if I need to recompile or relink my menus with a new version


Why Register

The AllWebMenus unregistered version is fully functional in its menu design capabilities. It displays the designed menus on a Preview Window where you can test their appearance and behavior as if viewed on a browser.

Registering AllWebMenus actually lets you compile and link your menus to web pages and use them on the Internet. It also entitles you for free customer support for one year after registering your AllWebMenus installation. The compiled menus are fully functional in both the Internet Explorer and Netscape Navigator browsers.


Terminology

Element

A generic name that describes any Main Menu, Submenu or Item

Main Menu

The first group of items forming the initial menu

Submenu

Any group of items linked to a parent item

Title

The top, non-item part of a Main Menu/Submenu

Item

A selection that opens a submenu or a specified URL (or executes a Javascript command)

Child of element [A]

An element that directly derives from the element [A]

Ex: Submenu4 is a child of Item2

Ex: Item5 is a child of Submenu4

Ex: Item6 is a child of Submenu4

Parent of element [A]

The element from which the element [A] directly derives

Ex: Item2 is the parent of Submenu4

Ex: Submenu4 is the parent of Item5

Ex: Submenu4 is the parent of Item6

Style Gallery

A collection of ready-made styles to apply to your menus

See also: Open Style Gallery

Style

The appearance and behavior of the element

Content

The text and/or image of the element

Element Clipboard

Where the selected element is stored after a Cut or Copy.

See also: Copy Item/Submenu

The .awm, "menu definition" file:

This is the file type that AllWebMenus understands as a menu project. Let's say that you design a menu and you save it as mainmenu.awm. This file contains the definition of the menu elements along with its structure and can be opened by AllWebMenus for further development. This .awm file does not have to be placed in your web site's directory structure as it does not take part in the menu generation process (see below).

The .js, "compiled menu" file:

After finishing with your mainmenu.awm definition file, you need to compile it into a format understandable by the Javascript menu-building Libraries. Let's say that you compile it as mainmenu.js. This javascript file has to be placed in your web site's directory structure as it takes part in the menu generation process (usually the compiled menu is placed at root). Do not mistakenly compile it inside the C:\Program Files\AllWebMenus directory or any other working directory. The compiled menu is part of your uploaded WEB structure and therefore it should only be located there.

The "awmData-menuname" folder:

This is the folder where the following elements are placed upon compilation:

- the awmlibX.js  Javascript menu-building Libraries.

- the dot.gif  image file.

- the images used in the menu design (if any).

The awmmenupath.gif image file:

Version 1.3.360 has introduced a transparent, 1x1, dummy image, called awmmenupath.gif, in order to eliminate some older-browser inefficiencies (such as Netscape 4.x ones). This image is created upon compilation, inside the directory where the compiled menu resides.

For example, if the mainmenu.js is compiled inside the root directory, the awmmenupath.gif will also be created inside the root directory too.

The awmmenupath.gif is also referenced inside the AllWebMenus HTML menu-linking section (see below).

The dot.gif image file:

This is a required file used to implement the cross-browser rendering of the menu. It is located inside the awmData-mainmenu directory along with the awmlibX.js libraries. If missing, a small line will appear on the left side of every menu item and the menu may not show properly in some browsers.

The awmlibX.js, "Javascript menu-building Libraries":

(click here for definition)

The "HTML menu-linking section":

(click here for definition)


About Likno Software
About Likno Software Software

Likno Software is a software development company dedicated to create quality software for demanding web authors. Our development team is 100% Internet-oriented, focused on creating tools that minimize your web development efforts.

For detailed technical support you can access the following URL:

http://www.likno.com/support/allwebmenus/awmsupport.php

For sales questions you may contact us at:

sales@likno.com

Our web site is located at http://www.likno.com


Main window layout

The AllWebMenus Main window is split into three panes:

•	The Menu Structure Pane

This is where the menu is structured by specifying its elements and its parent-child relationships.

•	The Properties Pane

This is where the properties of each element are specified. The Pane changes its content according to the selected element (Main Menu, Submenu, Item)

•	The Quick Help Pane

This is where a short description is displayed to provide quick help on the selected property.


Keyboard shortcuts

There are several shortcuts defined for quicker access to frequently used functions:

•	F1

Provides context sensitive help for each property

•	F12

Opens the Preview Menu window

•	Ctrl + N

Creates a new AllWebMenus structure

•	Ctrl + S

Saves the current AllWebMenus structure

•	Ctrl + P

Picks the Style of the selected element

•	Ctrl + A

Applies the Style to the selected element


Command:  File

  New

Creates a new AllWebMenus menu structure.

The new menu consists of three items and all properties are set to the default style:

This is how a new menu structure looks:

This is how a new menu design looks:

  Open

Opens an AllWebMenus menu structure.

The AllWebMenus files are found under the .awm extension.

This how an *.awm file looks:

  Save

Saves the current menu structure into an *.awm file.

Save As

Saves the current menu structure with a different filename.

Exit

Closes the AllWebMenus application.


Command:  Edit

  Cut Item/Submenu

Copies the selected item to the Element Clipboard and then deletes it from the menu structure.

  Copy Item/Submenu

Copies the selected item to the Element Clipboard.

If the selected element has any children (i.e. elements linked to it) the copy will apply to them too. This means that the element clipboard will contain both the element and its child elements too.

See an example:

  Paste Item/Submenu

Inserts the content of the Element Clipboard into the menu structure.

When pasting the clipboard element, a new element is added in the menu structure along with its children.

See an example:

Since submenus are always linked to items, a submenu will not be pasted when the selected element is also a submenu.


Command:  Add Item

  Add Item

Adds a new item in the menu structure.

If the selected element is an item, the new item is placed below it.

If the selected element is a submenu, the new item is placed as a child.

The new item can always be placed somewhere else by using the Move Item Up/Down or the Cut/Paste functions.

See also

Delete Item


Command:  Delete Item

  Delete Item

Deletes the selected item from the menu structure.

If the selected item has any child elements, the child elements are deleted as well.

See also

Add Item


Command:  Move Item Up

   Move Item Up

Moves the selected item up one position inside its parent submenu.

It will not move the item outside its parent submenu. This can be easily done by using the Cut and Paste functions instead.

See also

Move Item Down


Command:  Move Item Down

   Move Item Down

Moves the selected item down by one position inside its parent submenu.

It will not move the item outside its parent submenu. This can be easily done by using the Cut and Paste functions instead.

See also

Move Item Up


Command:  Add Submenu

   Add Submenu

Creates a submenu for the selected item.

Since submenus are always linked to items, your selection should be an item to perform this operation.

You can always transfer the new submenu to another parent item by using the Cut and Paste functions.

See also

Delete Submenu


Command:  Delete Submenu

   Delete Submenu

Deletes the selected submenu along with all its child elements.

See also

Add Submenu


Command:  Pick Style

   Pick Style

Stores the style of the selected element so that it can be used to "paint" similar elements.

Essentially, it stores all the Style properties of the selected element. You can then use the picked style to "paint" similar elements while letting their contents intact.

The Pick Style command does not store any Content properties.

See also

Apply Style


Command:  Apply Style

   Apply Style

"Paints" the selected element with the style stored by the Pick Style feature.

This operation does not change the contents of the selected element. It changes only its Style properties.

See also

Pick Style


Command:  Create New Style from Menu

Create New Style from Menu

Creates a new style in the Style Gallery.

To create a new style follow these simple steps:

1. Design the appearance of the Main Menu

2. Design the appearance of its first item

3. Choose Style -> Create New Style from Menu

4. Name your new style

Step (1) defines a style for Main Menus/Submenus while Step (2) defines a style for Items.

You can now view and use your new style by opening the Style Gallery.

See also

Open Style Gallery


Command:  Open Style Gallery

Open Style Gallery

Opens the Style Gallery to choose a style from a collection of predefined styles and apply it to your menu.

Suppose you choose the following style:

You have three options:

•	Apply the Gallery style to the entire menu

The Main Menu, all submenus and all items will acquire the appearance of the respective elements of the Gallery menu:

•	Apply the Gallery style to the selected submenu and its items

Only the selected submenu and its items will acquire the appearance of the Gallery menu:

•	Apply Gallery style to the selected item only

Only the selected item will acquire the appearance of the items in the Gallery menu:

Style Gallery Maintenance

AllWebMenus supports the Creation, Delete and Update of Gallery styles in the following ways:

•	Create a new style

Select Create New Style from Menu in the Style menu.

•	Delete a style

Open Style Gallery, choose the style you want to delete and click the [image] button.

•	Update a style

Follow the instructions below:

- Start a New menu

- Open the Style Gallery and choose the style you want to update

- Apply the style to the entire menu

- Make any changes to the style properties of the Main Menu and its first item

- Select Create New Style from Menu in the Style menu

- Use the same style name and choose "yes" to replace the old style with the new one

See also

Create New Style From Menu


Command:  Preview Menu

  Preview Menu

Displays the menu design on a sample web page.

This is a fast way to view the changes made during the menu's design phase. It is a WYSIWYG window that will help you experiment with your menu properties, observe its behavior and implement its design exactly the way you like.

If the preview window is open and a change is made at the properties or in the menu structure, the preview window signals its non-updated status by turning its flag to red.

To show the latest version of your menu design, click [image] in the application toolbar or [image] in the Preview Menu window.  The flag will then return to green.


Command:  Compile Menu

  Compile Menu

Compiles the .awm file into a .js file that has to be linked to your web pages.

To use a menu in your web pages you must take the following four steps:

Step 1. Compile the menu     (note: spaces are not allowed in filename)

Step 2. Link the compiled menu to your web pages using the AllWebMenus command

Step 3. Upload the necessary menu files and folders (see a description of these elements below)

Step 4. Upload the web pages that contain the menu link

(note: steps 2 & 4 are not necessary if you have already linked the menu to your web pages and you only want to update your menu. They may be necessary if you are using a new AllWebMenus version with an improved HTML menu-linking section)

How it works:

When compiling a menu as menuname.js, the following elements are created inside the same directory:

1. The awmmenupath.gif image file.

This is a transparent, 1x1, dummy image used to resolve older browser inefficiencies.

2. The awmData-menuname directory (or your custom directory as defined in "Compile Properties").

This directory contains the necessary Javascript menu-building Libraries (awmlibX.js) along with any images used by the compiled menu.

Both the awmmenupath.gif and the awmData-menuname directory are required elements and must always reside in the same directory with the menuname.js file.

Therefore, it is critical that you do not forget to upload the awmmenupath.gif and the awmData-menuname directory along with the menuname.js file!

Example

Let's say that the local root folder of your site is the c:\mysite folder and that the contents of your web site are:

| -------------------------------------------- |

| c:\mysite\index.html               |

| c:\mysite\companyinfo.html     |

|          ...                                 |

| c:\mysite\faq.html                   |

| ---------------------------------------------|

You now design a menu in AllWebMenus, called mysitemenu.awm, and you compile it into a file called c:\mysite\mymenu.js.

Your local web site now contains:

| ------------------------------------------------------------------ |

| c:\mysite\index.html                	         |

| c:\mysite\companyinfo.html    	         |

|         ...                              	         |

| c:\mysite\faq.html                    	         |

| c:\mysite\mymenu.js        	         |

| c:\mysite\awmmenupath.gif 	     	         |

| c:\mysite\awmData-mymenu\awmlibX.js    |

| c:\mysite\awmData-mymenu\dot.gif            |

| c:\mysite\awmData-mymenu\image1.js      |

|         ...                                 	         |

| c:\mysite\awmData-mymenu\image8.js      |

| ------------------------------------------------------------------ |

The elements in bold should be uploaded on the server in the same directory structure where they are locally created.

If you don't upload them or you misplace them on the server, the menu will produce a run-time error and will fail to appear due to the following reasons:

•	misplacement of the mymenu.js file: all web pages linked to the compiled menu will not be able to find it.

•	misplacement of the awmData-mymenu directory or the awmmenupath.gif file: the  mymenu.js  file will not be able to call the necessary  awmData-mymenu\ .js  javascript libraries that build the menu.

Notes:

The "mymenu" name was chosen as an example. If you name the compiled menu "menu1", then you should find and upload a menu1.js file and an awmData-menu1 folder along with the standard awmmenupath.gif file.

You can compile the menu anywhere you like within your site's directory structure. This decision should not be affected by the location of the pages you want to link the menu to.

For example, if you want to link the menu into a Dreamweaver template, you are not required to compile the menu into the Templates directory. On the contrary, we do not advise you to do so as you will have to upload the Templates directory on the server too.

In general, simply compile your menu into your root directory or into a manually-created subdirectory and you will be able to link it to any page, shared border, template or library of your web site directory structure.

Notes for FrontPage users:

1. To properly use AllWebMenus with Shared Borders please read carefully the "Compile Properties, FrontPage Support" section.

2. The menu should not be compiled inside the  _borders  folder or any other special folders used by the authoring tool to manipulate common objects. The obvious reason is that these folders are not uploaded on the server when publishing the site. Instead, compile the menu in root or in any other manually-created subdirectory.

See also

Link Compiled Menu to Web Page(s)

Compile Properties: Folders

Compile Properties: Cross-Frame Support

Compile Properties: Optimization

Compile Properties: FrontPage Support

How Do I Know if I need to recompile or relink my menus with a new version

How Do I Use my designed menu on my web pages


Command:  Link Compiled Menu to Web Pages
Command:  Link Compiled Menu to Web Page(s)

  Link Compiled Menu to Web Page(s)

Links a compiled menu (.js file) to a selection of web pages.

At this stage, AllWebMenus inserts the necessary menu link into the selected web pages. No DHTML or Javascript knowledge is required since the whole process is conducted by the application. The menu link is a few lines of code and can be easily identified inside the source code by a related comment.

The linking process requires only two pieces of information:

1. The compiled menu file (eg: mymenu.js)

2. The web page(s) where the menu link will be created.

In step 2, you may also use an optional Alternative URL where the user will be automatically redirected if his/her browser does not support dynamic HTML.

Obviously, you need to upload the updated web pages on the server so that the menu can be viewed on-line. However, it is important that you also upload...

1. the compiled menu file (eg: mymenu.js).

2. its associated awmData folder (eg: awmData-mymenu folder).

3. the awmmenupath.gif file.

...at the same directory structure where they reside locally.

See the Compile Menu command for more info on this issue.

To update the design of an already compiled menu you should first make the changes to its respective .awm file and then recompile it. Provided that you did not change the name or the directory of the compiled menu, you do not need to re-link the menu to the pages that already contain that link. However, you may need to do so if you are using a new AllWebMenus version with improved HTML menu-linking section.

(see "How Do I Know if I need to recompile or relink my menus with a new version" for more info on this topic).

How does the menu-linking process work:

Let's say that you want to link a menu called "menu3.js" to a page. The process asks the following question and takes the respective action:

Does an HTML menu-linking section already exists for "menu3.js"?

Yes    ->    Replace the old HTML menu-linking section with the new one

No     ->    Insert a new HTML menu-linking section for "menu3.js" into the page

Notes:

Note about file extensions:

The link can be inserted in any kind of page, regardless of its extension. Just use the All Files (*.*) filter to select web pages that have an extension other than the typical .html or .htm one.

Note for Dreamweaver users:

If you like, you can also link the compiled menu to a template (.dwt) or a library (.lbi). Just select the related directory (Templates or Library) and use the All Files (*.*) filter so that you can view the template or library file.

The menu does not have to be compiled inside the Templates directory. On the contrary, we do not advise you to do so as you will have to upload the Templates directory on the server too.

Note for FrontPage users:

Similarly to Dreamweaver, you can link your menu into an include so that it can be used by all other pages. Just make sure that this include contains only the menu and that it is inserted immediately before the </body> tag of the pages. To use the menu inside a Shared Border, please read the "How Do I Link menus to FrontPage Shared Borders" section.

See also

Compile Menu

The alternative web page

How Do I Position the menu relative to a page element

How Do I Know if I need to recompile or relink my menus with a new version

How Do I Link menus to FrontPage Shared Borders

How Do I Use my designed menu on my web pages


Compile Properties

To read more info on a "Compile Properties" tab, please click on its respective link below:

Folders

Cross-Frame Support

Optimization

FrontPage Support


Compile Properties:  Folders

When compiling a menu as menuname.js, an awmData-menuname folder is also created under the same directory. This folder contains the necessary Javascript menu-building Libraries along with any images used by the compiled menu.

Instead of using the default awmData-menuname folder, you may use two separate custom folders containing the following elements:

Libraries Folder

awmlibX.js	(the required Javascript menu-building Libraries. These are the javascript files containing all the functions that build the menu and drive its behavior)

dot.gif	(a required image file used to implement the cross-browser rendering of the menu. If missing, a small line will appear on the left side of every menu item and the menu may not show properly in some browsers. Although it is an image, it should always reside inside the Libraries Folder, next to the Javascript menu-building Libraries)

Images Folder

.jpg or .gif files	(all images used by the menu, except of the "dot.gif" special image that resides in the Libraries Folder. If not uploaded, the menu will still display all items but without images. The missing image sign ("x") may also appear in place of those images)

Custom compile folders offer great flexibility when multiple menus are to be used inside the same web site. For example, you can use a custom "Libraries Folder" for all menus, so that scripts are downloaded and cached on the user's computer only once.

For single-menu implementations, we recommend that you keep the default folders as there is no obvious reason to change them (apart from naming preferences).

You can use relative paths too (eg: ../). If you do so, the folder location will be relative to the location of the compiled menuname.js file.

Examples:

Libraries Folder:	allmenusdata

Images Folder:	allmenusdata

Libraries Folder:	../allmenusdata

Images Folder:	../allmenusdata

Libraries Folder:	allmenuslibs

Images Folder:	allmenusimages

Libraries Folder:	../allmenuslibs

Images Folder:	../allmenusimages


Compile Properties:  Cross-Frame Support

Menus and submenus are DHTML elements. Unfortunately, the DHTML specifications in some older browsers do not allow an object to be displayed outside its defined frame. Respectively, a menu is not able to open its submenus outside its assigned frame.

To account for this browser restriction we implemented a solution where the Main Menu appears in one frame and all its Submenus appear in another frame.

To use this solution in a framed web site you need to do the following steps:

STEP 1. Go to Tools-> Compile Properties and check the "Enable Cross-Frame Support" box. You will have to give two pieces of information:

"Frame Name where the Submenus will open":

This is the name of the frame where the submenus will open (not the name of the html file that opens inside that frame).

Example:

Let's assume the following Frameset Definition inside the source code of your home page:

<frameset framespacing="0" border="0" cols="171,*" frameborder="0">

  <frame name="left" target="main" src="left_page.htm" scrolling="auto">

  <frame name="main" src="main_page.htm" target="_self">

  <noframes>

  <body>

  <p>You need a browser that supports frames to see this site </p>

  </body>

  </noframes>

</frameset>

Let's also assume that you want the Main Menu to appear on the left frame and its submenus on the main frame.

The proper value for the field "Frame Name where the Submenus will open" should therefore be:  main

"Submenus Positioning Offset":

This field should only be used if your frameset has more than two frames and one of these frames affects the position of submenus relative to their Main Menu.

The best way to understand the functionality of this property is to read the following example:

Definitions:

My = vertical distance from top edge of Main Menu (in pixels)

Sy = vertical distance from top edge of the "Item 2" submenu (in pixels)

Final_Sy = vertical distance from frame's top edge of the submenu (in pixels)

Offset = the value you enter in the "Submenus Positioning Offset" field (positive or negative number of pixels)

In a two-framed web page, the submenu of "Item 2" opens correctly at Sy pixels from the top edge. The script automatically calculates the Sy distance based on the My value.

However, in a three-framed web page of the following setting, the submenu will open far away from its parent item due to the calculated Sy distance. The only way to avoid this is to manually enter the expected height of the top-right frame. In this particular setting, the Offset needs to be a negative number so that the final Sy distance is smaller.

The exact formula is: Final_Sy = Sy + Offset

STEP 2. If the "Enable Cross-Frame Support" box is checked, the Compile Menu command creates two menu files instead of one:

the menuname.js file which contains the Main Menu only, and

the menuname_sub.js file which contains all the Submenus.

You need to link the menuname.js to the page where you want the Main Menu to appear, and the menuname_sub.js to the pages where you want the Submenus to appear.

Example:

Assuming that you use the following frameset:

  <frame name="left" target="main" src="left_page.htm" scrolling="auto">

  <frame name="main" src="main_page.htm" target="_self">

menuname.js should be linked to the left_page.htm,

menuname_sub.js should be linked to the main_page.htm and all other pages opening at the main frame.

Tip1:  If you have only created frames so that your navigation is always visible, there is a better way to achieve this. You can avoid having frames by using a "Drifty" menu at the left (or top) of your page. You may see how we implemented this on our web site: http://www.likno.com

Tip2:  For "horizontal" menus you may use "horizontal submenus" and still use frames, allowing a little space for the horizontal submenus to open.

Important Note!

Cross-frame support can only be used for menus positioned inside a top or left frame.

Menus positioned inside a bottom or right frame will not be able to open their submenus correctly. This implementation is not supported.


Compile Properties:  Optimization

This topic is described in detail in the "Optimize menus to improve building speed" section.


Compile Properties:  FrontPage Support

If you are a FrontPage user you can link your menu into a Shared Border so that you won't have to link it into each page separately.

Note: You should link the menu only to the Bottom Shared Border to make sure that you won't get into Netscape-trouble. The reason for this restriction is explained in the last section of this page.

How to use the Bottom Shared Border to display a menu in all pages:

1. Inside FrontPage, check the Bottom Shared Border box in all pages where you want the menu to appear.

(see notes below to understand why you should not choose the top, left or right shared border to insert the HTML menu-linking section)

2. Inside AllWebMenus, go to Tools-> Compile Properties-> FrontPage Support and check the "Support Shared Borders in FrontPage" box.

3. Close your Web in FrontPage so that all compile/link changes take effect.

4. Compile the menu at your WEB's root (not inside your _borders directory).

5. Use the "Link Compiled Menu to Web Page(s)" command to link the menu to your WEB's

_borders/bottom.htm file.

..and the menu should appear in all pages that use the Bottom shared border.

Why using the Bottom Shared Border does not affect the desired menu positioning on the page:

Since the menu floats on the page, its position is not determined by where you place the AllWebMenus linking code. Instead, its position is determined by the <Vertical Distance from Edge> and <Horizontal Distance from Edge> properties. So, position-wise it does not matter where you place the HTML menu-linking section. However, for Netscape-specific reasons it does matter that you not move this code from the end of the page! And the only way to achieve this with Shared Borders is to link the menu into the Bottom Shared Border and check the related box in Compile Properties.

For more info on how to achieve exact menu positioning you may read the "How Do I Position the menu relative to a page element" section.

Why choose the Bottom Shared Border only:

I.E. displays the menu perfectly regardless of which shared border is used.

However, Netscape will not do the same. This is why:

Netscape browsers do not function properly when NESTED tables are used because they will not render a table until they read the entire table (Netscape is not as flexible as IE on page redraws).

Therefore, it is not a good idea to nest tables like this:

<table>

<table>

blah, blah, code, code

</table>

</table

The reason has to do with Netscape taking forever to load the page and other problems. Rather, it is best to stack the tables like this:

<table>

blah, blah, code, code

</table>

<table>

blah, blah, code, code

</table>

When you use shared borders (let's say the TOP shared border), FrontPage converts your pages to table pages to separate the shared border content from your main pages. In FrontPage you will not see the "tables" - but only the content.

However, when you publish the page, FrontPage inserts the following code:

<!--msnavigation--><table border="0" cellpadding="0" cellspacing="0"

width="100"><tr><td>

THIS IS WHERE YOUR TOP SHARED BORDER CONTENT GOES

SO, THIS IS WHERE THE ALLWEBMENUS SECTION IS

</td></tr><!--msnavigation--></table>

<!--msnavigation--><table border="0" cellpadding="0" cellspacing="0"

width="100"><tr>

<!--msnavigation--><td valign="top">

THIS IS YOUR MAIN PAGE CONTENT <p>This is really the body of my page. END

MAIN PAGE

<!--msnavigation--></td></tr><!--msnavigation--></table>

So, as you can see above, the final result is: AllWebMenus section is moved inside a <table> </table> structure and this is where the problem in Netscape begins... It seems that the problem is related to how Netscape interprets unclosed tags. The AllWebMenus script uses tables (<table>), rows and cells (<tr>, <td>) to implement the menu items. While everything is very well declared and very well formatted inside the AllWebMenus script, it seems that Netscape creates problems when there are UNCLOSED table tags prior to the menu call (this is the "nested tables" problem explained above).

Checking the "Support Shared Borders in FrontPage" box takes care of this Netscape inefficiency and allows your menus to display properly in Netscape too.

See also

Compile Menu

How Do I Use my designed menu on my web pages

How Do I Position the menu relative to a page element


Command:  Open Tip of the Day on Startup

Open Tip of the Day on Startup

This is an option where you choose if the Tip of the Day window opens on startup or not.

By default, the Tip of the Day window opens on startup.


Command:  Open Preview Window on Startup

Open Preview Window on Startup

This is an option where you choose if the Preview Menu window opens on startup or not.

By default, the Preview Menu window opens on startup.


Command:  Help

Contents

Displays the contents of the help file. It also supports both keyword and full-text search.

Search for Help On...

Performs a keyword search on the help file.

How do I...

Gives advice on how to design menus and how to do particular tasks.

Tip of the Day

Shows a tip every time you start the AllWebMenus application. You can deactivate this feature by unchecking the "Show Tips at Startup" box.

Optimization Techniques

Gives advice on how to optimize the menu design to improve the menu-building speed.

How to Register

Displays information about the registration process.

Register

This is where you can register the program by typing the registration password. You will receive this password as soon as you complete the online registration found at http://www.likno.com/awmregister.html

Visit Likno on the Web

Visit our web site to contact us, get the latest information on design techniques and download more examples and styles.

About

Displays the About box of AllWebMenus. This is where you can find your unique Installation ID required for your registration.


Properties Overview

Properties are classified as follows:

According to the element they describe:

•	Global Properties

•	Main Menu Properties

•	Submenu Properties

•	Item Properties

According to the type of the feature they describe:

•	Style Properties

•	Content Properties


Global Properties

Global Properties specify features for the menu as a whole.

This is where you deal with issues like the following:

•	Should the user be able to relocate the menu by dragging its title?

•	Should the menu drift if the user scrolls vertically or horizontally?

•	Where should the menu appear?

•	Should the menu have higher priority over other page elements? (Z-Index property)

Global properties apply to the menu as a whole rather than to any specific element. Since they don't apply to an element, they cannot be characterized as Style or Content properties.

For help on a specific property, click on the imagemap below:

See also

Properties Overview


Main Menu Properties

Main Menu Properties handle the Main Menu only, which is the first level of menu items.

What is the difference between the Main Menu and the Submenu?

For help on a specific property, click on the imagemap below:

See also

Properties Overview

Submenu Properties


Submenu Properties

Submenu Properties refer to a group of items deriving from the same parent item. They specify the behavior and the appearance of the whole group of its child items rather than that of an individual item.

For help on a specific property, click on the imagemap below:

See also

Properties Overview


Item Properties

Item Properties deal with the behavior and the appearance of an individual item. An item property has three different values, one for each item state.

For help on a specific property, click on the imagemap below:

See also

Properties Overview

The Three Item states


Style Properties

The Style Properties are used to specify the element's look and behavior.

It is very handy to use the Pick & Apply functions to copy the Style Properties to similar properties.

The following list shows the Style properties in bold:

Main Menu/Submenu Properties	Property Type

Main Menu/Submenu Name	Content

Main Menu/Submenu Type	Content

PopUp  (Main Menu only)	n/a

Main Menu Appears- How  (Main Menu only)	n/a

Main Menu Unfolds Towards  (Main Menu only)	n/a

Submenu Opens - When  (Submenu only)	Style

Submenu Opens - Where  (Submenu only)	Style

Submenu Opens - At Distance (Submenu only)	Style

Submenu Opens - How  (Submenu only)	Style

Submenu Unfolds Towards  (Submenu only)	Style

Submenu Aligns with  (Submenu only)	Style

Title Contains	Style

Title Image	Content

Title Image Alignment	Style

Title Content Alignment	Style

Title Tooltip	Content

Title Cursor	Style

Title Padding	Style

Title Text Font	Style

Title Text Size	Style

Title Text Bold	Style

Title Text Italic	Style

Title Text Underlined	Style

Title Text Color	Style

Title BG Color	Style

Title Border Style 	Style

Title Border Width	Style

Title Border Color	Style

Main Menu/Submenu BG Color	Style

Main Menu/Submenu BG Image	Style

Main Menu/Submenu Border Style	Style

Main Menu/Submenu Border Width	Style

Main Menu/Submenu Border Color	Style

Distance Between Items	Style

Uniform Item Widths	Style

Uniform Item Heights	Style

Javascript Command on Appear	Content

Javascript Command on Disappear	Content

Item Properties	Property Type

Item Name	Content

Item Contains	Style

Item Image	Content

Item Image Alignment	Style

Item Content Alignment	Style

Item Tooltip	Content

Item Cursor	Style

Item Padding	Style

Item Text Font	Style

Item Text Size	Style

Item Text Bold	Style

Item Text Italic	Style

Item Text Underlined	Style

Item Text Color	Style

"Has Submenu" Image	Style

Item Border Style	Style

Item Border Width	Style

Item Border Color	Style

Status Bar Text	Content

Javascript Command	Content

URL	Content

Target Frame	Content

See also

Content Properties

Pick & Apply functions


Content Properties

The Content Properties are used to specify the element's content.

The following list shows the Content properties in bold:

Main Menu/Submenu Properties	Property Type

Main Menu/Submenu Name	Content

Main Menu/Submenu Type	Content

PopUp  (Main Menu only)	n/a

Main Menu Appears - How  (Main Menu only)	n/a

Main Menu Unfolds Towards  (Main Menu only)	n/a

Submenu Opens - When  (Submenu only)	Style

Submenu Opens - Where  (Submenu only)	Style

Submenu Opens - At Distance (Submenu only)	Style

Submenu Opens - How  (Submenu only)	Style

Submenu Unfolds Towards  (Submenu only)	Style

Submenu Aligns with  (Submenu only)	Style

Title Contains	Style

Title Image	Content

Title Image Alignment	Style

Title Content Alignment	Style

Title Tooltip	Content

Title Cursor	Style

Title Padding	Style

Title Text Font	Style

Title Text Size	Style

Title Text Bold	Style

Title Text Italic	Style

Title Text Underlined	Style

Title Text Color	Style

Title BG Color	Style

Title Border Style 	Style

Title Border Width	Style

Title Border Color	Style

Main Menu/Submenu BG Color	Style

Main Menu/Submenu BG Image	Style

Main Menu/Submenu Border Style	Style

Main Menu/Submenu Border Width	Style

Main Menu/Submenu Border Color	Style

Distance Between Items	Style

Uniform Item Widths	Style

Uniform Item Heights	Style

Javascript Command on Appear	Content

Javascript Command on Disappear	Content

Item Properties	Property Type

Item Name	Content

Item Contains	Style

Item Image	Content

Item Image Alignment	Style

Item Content Alignment	Style

Item Tooltip	Content

Item Cursor	Style

Item Padding	Style

Item Text Font	Style

Item Text Size	Style

Item Text Bold	Style

Item Text Italic	Style

Item Text Underlined	Style

Item Text Color	Style

"Has Submenu" Image	Style

Item Border Style	Style

Item Border Width	Style

Item Border Color	Style

Status Bar Text	Content

Javascript Command	Content

URL	Content

Target Frame	Content

See also

Style Properties


Property:  Movable

Allows the viewer to relocate the menu to a different position on the web page by using the 'drag and drop' technique.

When this feature is applied the user can drag the menu from its Title.

Tip:	Changing the <Movable> to "no" does not automatically change the <Title Cursor> from "move" to "default (arrow)". You may want to do this manually if you don't want the cursor to imply that the menu is movable.

Values:	yes/no

Applies to: 	Menu (Global Property)

Type:	n/a


Property:  Menu Drifts on Scroll

Controls the behavior of the menu when the viewer scrolls the page.

The menu follows the scrolling direction allowing the user to view it at all times. It stays on top of the contents and moves automatically by the scrolling step. In that way, the menu retains its position on the screen regardless of the shifting of contents caused by the scrolling.

Tip: 	It may be a good idea to combine it with the <Movable> property to offer more flexibility to users.

Values:	Yes - On Both Scrolls

Yes - On Vertical Scroll Only (default)

Yes - On Horizontal Scroll Only

No - Menu remains static

Applies to: 	Menu (Global Property)

Type:	n/a


Property:  Position Relative to

Specifies the corner where the menu is positioned or the edge where the menu is centered.

Note: To position the menu relative to a page element, please read the "How Do I Position the menu relative to a page element" section.

The corner/edge is only the base for the menu's positioning. Its precise position is specified by the <Horizontal Distance from Edge> and <Vertical Distance from Edge> properties. By using these 3 properties you can actually place the menu anywhere you like.

When an edge is selected instead of a corner, the menu is centered in that edge.

Values:	Top Left Corner

Top Right Corner

Bottom Left Corner

Bottom Right Corner

Left Edge - Vertically Centered

Right Edge - Vertically Centered

Top Edge - Horizontally Centered

Bottom Edge - Horizontally Centered

Applies to: 	Menu (Global Property)

Type:	n/a

See also

Horizontal Distance from Edge

Vertical Distance from Edge

How Do I Position the menu relative to a page element


Property:  Horizontal Distance from Edge

Specifies the menu's horizontal distance from the selected corner or edge.

The selected corner or edge, which is the reference point for the positioning, is defined by the <Position Relative to> property.

The horizontal distance does not apply when the <Position Relative to> property is set to "Top Edge - Horizontally Centered" or "Bottom Edge - Horizontally Centered".

Note: To position the menu relative to a page element, please read the "How Do I Position the menu relative to a page element" section.

Values:	a positive number in pixels

Applies to: 	Menu (Global Property)

Type:	n/a

See also

Position Relative to

Vertical Distance from Edge

How Do I Position the menu relative to a page element


Property:  Vertical Distance from Edge

Specifies the menu's vertical distance from the selected corner or edge.

The selected corner or edge, which is the reference point for the positioning, is defined by the <Position relative to> property.

The vertical distance does not apply when the <Position Relative to> property is set to "Left Edge - Vertically Centered" or "Right Edge - Vertically Centered".

Note: To position the menu relative to a page element, please read the "How Do I Position the menu relative to a page element" section.

Values:	a positive number in pixels

Applies to: 	Menu (Global Property)

Type:	n/a

See also

Position Relative to

Vertical Distance from Edge

How Do I Position the menu relative to a page element


Property:  Sticky Submenus

Specifies whether the submenus close when the mouse moves away from the menu area or remain open until the user clicks somewhere else on the page.

The default behavior for the submenus is to close when the mouse moves away from the menu area. If you change this property to "yes", the submenus will only close if the user clicks somewhere on the page instead.

Sticky submenus behave exactly like the submenus in the Windows "Start" menu. They close if the user clicks somewhere outside the menu area.

Values:	yes/no

Applies to: 	Menu (Global Property)

Type:	n/a


Property:  Z-Index

Assigns a z-index value to the menu.

The order that the different elements are located in the page determine if they appear in front of other elements or behind them.

In most cases, the menu will appear above all other page elements since the menu is inserted last and placed just before the </BODY> tag.

However, if a page element is assigned a z-index value, this element may appear above the menu and the menu contents will be covered. In that case, you will need to assign the menu a higher z-index value than the one used by the element.

By default, the menu is assigned a large z-index value (1000) so that no other element can cover its components.

Note for Flash or other objects:

<Z-index> will not work for some objects, such as the Flash Object.

To make the menu appear above these objects you need to do the following:

1. Go to the <object> tag

2. Add the following code into the tag:

<param name="WMode" value="Transparent">

The above solution does not apply for the SELECT element as it always gets the highest priority by the browser. Therefore, avoid placing such elements close to the area where the menu expands.

Values:	from -1000 to 1000 (0 implies no z-index assigned)

Applies to: 	Menu (Global Property)

Type:	n/a


Property:  Main Menu/Submenu Name

Specifies the name of the Main Menu/Submenu.

This name has two uses:

•	Identifies the element in the Menu Structure Pane at the left side.

•	Appears on the Title when the <Title Contains> is set to "yes".

Although blank names are not rejected, it is useful to name all elements so that they can be easily identified in the Menu Structure Pane. If you don't want to display the Title's name, you can do so by setting the <Title Contains> to "no".

Values:	Text  	(HTML tags are also accepted)

Example1:	Site Menu

Example2:	<b>More</b> Info

Example3:	More <br> Info	(very useful to break a long item name into more lines)

Applies to: 	Main Menu/Submenu

Type:	Content Property

See also

Title Contains


Property:  Main Menu/Submenu Type

Defines whether the Main Menu/Submenu is vertical or horizontal.

Main Menu can also be a horizontal menubar.

Values:

(the examples refer to the <Main Menu Type>)

•	Vertical

•	Horizontal

•	Horizontal Menubar (applies to Main Menu only)

This Main Menu is like a typical Windows-application menu: horizontal, covering all the width of the window even when the user resizes it.

Values:	Vertical

Horizontal

Horizontal Menubar (only for Main Menu)

Applies to: 	Main Menu/Submenu

Type:	Content Property


Property:  PopUp

Allows you to control the event which makes the menu visible.

In the default behavior the menu appears when the page opens.

If <PopUp> is set to "yes", the menu will not appear unless a custom event triggers its appearance at its specified position.

The event that triggers the appearance of the menu is the following Javascript function call:  awmShowMenu('menuname');

where menuname is the name used to compile the menu. This name can be found inside the AllWebMenus HTML menu-linking section of the page.

Examples:

You can use this function inside any page element.

For example, to make a menu appear...

...when passing over a text link:

<a href="#" onMouseOver="awmShowMenu('menuname');">Some Text</a>

...when clicking on a text link:

<a href="#" onMouseDown="awmShowMenu('menuname');">Some Text</a>

...when passing over an image:

<img src="..." onMouseOver="awmShowMenu('menuname');">

...when clicking on an image:

<img src="..." onMouseDown="awmShowMenu('menuname');">

Additional parameters:

More flexibility is allowed, by using additional parameters inside the awmShowMenu() function:

awmShowMenu('menuname',X,Y);

the menu is forced to appear X and Y pixels away from the left and top edge respectively, overriding its internal <Horizontal Distance from Edge> and <Vertical Distance from Edge> values.

awmShowMenu('menuname',null,null,'framename');

the menu appears inside a different frame than the one that contains the trigger. In this case, the menu should not be linked to the page that contains the trigger but to the page where the menu will appear (inside the frame 'framename').

awmShowMenu('menuname',X,Y,'framename');

both previous cases combined.

Note:

The PopUp menu will disappear when the mouse moves away from the menu area. To keep the PopUp menu visible until the user clicks somewhere on the page, you need to set the <Sticky Submenus> property to "yes".

More on menu positioning:

If you need to position your menu relative to a page element instead of a window corner or edge, you should do the following:

1. do not use the X,Y parameters in the awmShowMenu() function, as they will be ignored.

2. insert the <span> element close to your page element, as described in the "How Do I, Position the menu relative to a page element" section.

Values:	yes/no

Applies to: 	Main Menu (only)

Type:	n/a


Property:  Main Menu Appears - How

Specifies how the Main Menu appears on the page.

The Main Menu can show up in two ways: instantly or in a smooth unfolding manner.

Unfolding 1 and Unfolding 2 are two slightly different versions of the unfolding effect.

Values:	Instantly

Unfolding 1

Unfolding 2

Applies to: 	Main Menu

Type:	n/a

See also

Main Menu Unfolds Towards


Property:  Main Menu Unfolds Towards

Specifies the unfolding direction of the Main Menu if an "Unfolding" value has been selected for the <Main Menu Appears - How> property.

Values:	Right

Left

Upwards

Downwards

Applies to: 	Main Menu

Type:	n/a

See also

Main Menu Appears - How


Property:  Submenu Opens - When

Specifies when the submenu opens.

A submenu can show up in two ways: by passing over its parent item or by clicking on the item.

•	Passing over the item:

•	Clicking on the item:

Values:	On Mouse Over

On Mouse Click

Applies to: 	Submenu

Type:	Style Property


Property:  Submenu Opens - Where

Specifies where the Submenu opens relative to its parent submenu.

"Auto" is the most common value in this property, as it automatically decides where the submenu opens based on the available space at each side of its parent submenu.

This is how the "Auto" feature works:

•	If parent submenu is vertical, the Submenu opens on its right side unless it finds no available space and decides to open on the left side.

•	If parent submenu is horizontal, the Submenu opens below it unless it finds no available space and decides to open above it.

However, you may want to force the submenu to always open on a specific side of the parent submenu. This can be achieved with the following values:

"Always Right/Below parent submenu"

Depending on the type of the parent submenu, the submenu opens always to the right of a vertical submenu or below a horizontal submenu.

"Always Left/Above parent submenu"

Depending on the type of the parent submenu, the submenu opens always to the left of a vertical submenu or above a horizontal submenu.

Values:	Auto

Always Right/Below parent submenu

Always Left/Above parent submenu

Applies to: 	Submenu

Type:	Style Property

See also

Submenu Opens - At Distance


Property:  Submenu Opens - At Distance

Specifies how many pixels away from the parent submenu, the submenu opens.

This is the distance of the submenu positioning relative to its parent menu edge.

Examples:        or

Values:	From -100 to +100 pixels

Applies to: 	Submenu

Type:	Style Property

See also

Submenu Opens - Where


Property:  Submenu Opens - How

Specifies how the submenus open.

Submenus can show up in two ways: instantly or in a smooth unfolding manner.

Unfolding 1 and Unfolding 2 are two slightly different versions of the unfolding effect.

Values:	Instantly

Unfolding 1

Unfolding 2

Applies to: 	Submenu

Type:	Style Property

See also

Submenu Unfolds Towards


Property:  Submenu Unfolds Towards

Specifies the unfolding direction of the Submenu if an "Unfolding" value has been selected for the <Submenu Opens - How> property.

"Auto" is the most common value for this property, as it matches the unfolding direction with the side where the submenu opens relative to its parent submenu.

Note that the <Submenu Unfolds Towards> property is not the side where the submenu opens relative to its parent submenu. This side is specified by the <Submenu Opens - Where> property.

Values:	Auto

Right

Left

Upwards

Downwards

Applies to: 	Submenu

Type:	Style Property

See also

Submenu Opens - How

Submenu Opens - Where


Property:  Submenu Aligns with

Specifies how the Submenu aligns with its parent element.

"Item that opens the submenu" is the most common value in this property, as it automatically aligns the submenu with its parent item.

However, you may want to force the submenu to align with a specific edge of its parent submenu. This can be achieved with the following values:

"Top/Left Edge of parent submenu"

Depending on the type of the parent submenu, the submenu aligns with the top edge of a vertical submenu or with the left edge of a horizontal submenu.

"Bottom/Right Edge of parent submenu"

Depending on the type of the parent submenu, the submenu aligns with the bottom edge of a vertical submenu or with the right edge of a horizontal submenu.

"Centered to parent submenu"

The center of the submenu is aligned with the center of the parent submenu.

Values:	Item that opens the submenu

Top/Left Edge of parent submenu

Bottom/Right Edge of parent submenu

Centered to parent submenu

Applies to: 	Submenu

Type:	Style Property


Property:  Title Contains

Specifies whether the <Title Name> is displayed on the Title or not.

This property gives you the flexibility to display an image on the Title while hiding its text.

In addition, you can choose "Do not show Title"...

...and the menu appears with no Title

Values:	Both <Title Name> and <Title Image> (if any)

<Title Image> Only

Do not show Title

Applies to: 	Item

Type:	Style Property

See also

Main Menu/Submenu Name

Title Image


Property:  Title Image

Displays an image on the Title of the Main Menu or Submenu.

It can be combined with the <Title Contains> property to get the following results:

•	Title exists, displaying the <Main Menu/Submenu Name> property:

<Title Image>: 	"no_image"

<Title Contains>: 	"Both <Title Name> and <Title Image> (if any)"

•	Title exists, displaying the <Title Image> property:

<Title Image>:	selected image

<Title Contains>:	"<Title Image> Only"

•	Title exists, displaying both <Main Menu/Submenu Name> AND <Title Image> properties:

<Title Image>:	selected image

<Title Contains>:	"Both <Title Name> and <Title Image> (if any)"

(note: their relative positioning is determined by the <Title Image Alignment>)

•	Title does not exist:

<Title Image>:	"no_image"

<Title Contains>:	"Do not show Title"

As mentioned above, you can use the <Title Image Alignment> property to specify the relative positioning between the image and the text.

Note 1	It is known that Netscape cannot read images that contain spaces in their filenames! Therefore, always use "my_image.gif" or "myimage.gif" instead of "my image.gif".

Note 2	Avoid using filenames that contain special characters, like quotes ("), apostrophes ('), etc. In most cases these characters will produce an error.

Values:	An image file of the .gif or .jpg type

Applies to: 	Main Menu/Submenu

Type:	Content Property

See also

Title Image Alignment

Title Contains


Property:  Title Image Alignment

Specifies how the Title Image aligns with the Title's text (i.e., the element's name).

This is a relative alignment. The property has no effect if you choose not to display text or an image on the Title.

This property should not be confused with the <Title Content Alignment> which aligns all the content (both image and text) with the Title as a whole.

Values:	Above Text, Right of Text, Below Text, Left of Text

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Title Content Alignment

The two kinds of Alignment


Property:  Title Content Alignment

Specifies how the title's content aligns with the Title as a whole.

The content consists of both the element's name (<Main Menu/Submenu Name>) and the title's image (<Title Image>).

This property should not be confused with the <Title Image Alignment> property which specifies the relative positioning between the Title's image and the text.

Values:	Left, Center, Right

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Title Image Alignment

The two kinds of Alignment


Property:  Title Tooltip

Text that appears above the Title when the user pauses the mouse pointer over the Title.

Netscape 4.x limitation:

Netscape 4.x cannot show a tooltip when the <Title Cursor> is set to "default" value. It only shows a tooltip when the <Title Cursor> is set to "hand" (or to any other cursor, as it will be automatically displayed as "hand" due to another Netscape 4.x limitation on displaying cursors other than the "default" or the "hand" ones).

Values:	Text

Applies to: 	Main Menu/Submenu

Type:	Content	Property


Property:  Title Cursor

Allows you to change the shape of the cursor when the mouse passes over the Title.

Netscape 4.x limitation:

Netscape 4.x supports only the "default" and "hand" values. All other values are displayed as "hand" when viewed with Netscape 4.x browsers.

Values:	a cursor selection from a list of supported cursors

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title Padding

A number of pixels added between the Title's content and its edges.

Values:	a positive number in pixels

Example:	3

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title Text Font

Sets the font of the Title's text.

The selection box displays five generic font families (Serif, Sans-Serif, Cursive, Fantasy, Monospace) along with all fonts installed on your system.

For cross-platform compatibility, it is advisable to use the generic font families instead of any system-specific font. For example, if you use "Arial" and a specific platform does not have the Arial font, then the menu will use the browser's default font. But if you use "Sans Serif" instead of "Arial", the browser will use the appropriate Sans Serif font (in most cases it will be "Arial", but in platforms that do not have Arial it will be a similar font; not the default font)

Values:	Serif, Sans-Serif, Cursive, Fantasy, Monospace

and all fonts installed on your system

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title Text Size

Sets the font size of the Title's text.

Allows you to use either CSS sizing OR browser-relative sizing.

You need to click the  [image]  button to set values for this property.

Values:	CSS or browser-relative values

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title Text Bold

Specifies if the Title's text is displayed bold or not.

Values:	yes/no

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title Text Italic

Specifies if the Title's text is displayed Italic or not.

Values:	yes/no

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title Text Underlined

Specifies if the Title's text is displayed Underlined or not.

Values:	yes/no

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title Text Color

Sets the color of the Title's text.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Title BG Color

Fills the Title's background with a color.

If this is left blank, the lower background layer is displayed. See more on background layers.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

The different background layers


Property:  Title Border Style

Specifies the style of the Title's border.

This property refers to the Title only and should not be confused with the Main Menu/Submenu Border Style which applies to the whole Main Menu/Submenu.

Values:	none, solid, inset, outset

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Main Menu/Submenu Border Style


Property:  Title Border Width

Specifies the thickness of the Title's border.

Setting this to zero is equivalent to setting the Title Border Style to "none".

Values:	From 0 to 20

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Title Border Style


Property:  Title Border Color

Specifies the color of the Title's border, if any.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Title Border Style


Property:  Main Menu/Submenu BG Color

Fills the background of the Main Menu/Submenu with a color.

If this property is left blank and no background image is selected (<BG Image> is set to "no_image"), the background looks transparent. See more on background layers.

If a background image (<Main Menu/Submenu BG Image>) is selected, this property has no effect.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

The different background layers


Property:  Main Menu/Submenu BG Image

Displays an image on the background of the Main Menu/Submenu.

The image is always tiled on the background.

If "no_image" is selected, the <Main Menu/Submenu BG Color> is displayed on the background. See more on background layers.

Note 1	It is known that Netscape cannot read images that contain spaces in their filenames! Therefore, always use "my_image.gif" or "myimage.gif" instead of "my image.gif".

Note 2	Avoid using filenames that contain special characters, like quotes ("), apostrophes ('), etc. In most cases these characters will produce an error.

Values:	An image file of the .gif or .jpg type

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

The different background layers


Property:  Main Menu/Submenu Border Style

Specifies the style of the Main Menu/Submenu border.

This is the border that covers the whole Main Menu/Submenu area. It is not a border that applies to each item or the Title of that area. There are separate border properties for these elements which can co-exist with the Main Menu/Submenu Border.

Values:	none, solid, inset, outset

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Title Border Style

Item Border Style


Property:  Main Menu/Submenu Border Width

Specifies the thickness of the Main Menu/Submenu border.

Setting this to zero is equivalent to setting the <Main Menu/Submenu Border Style> to "none".

Values:	From 0 to 20

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Main Menu/Submenu Border Style


Property:  Main Menu/Submenu Border Color

Specifies the color of the Main Menu/Submenu border, if any.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Main Menu/Submenu

Type:	Style Property

See also

Main Menu/Submenu Border Style


Property:  Distance Between Items

Specifies the distance between the adjacent items of the Main Menu/Submenu.

Most conventional menus will have this set to zero.

By entering a non-zero value you create gaps between the items. In that way, you can have a "ladder" effect as shown below:

The background of the items is grey while the background of the Main Menu is transparent (not white).

Values:	A positive number in pixels

Applies to: 	Main Menu/Submenu

Type:	Style Property


Property:  Uniform Item Widths

Allows you to choose whether the widths of all items match the width of the widest one within the Main Menu/Submenu. The consideration of the largest width includes the width of the Title too.

Lets you decide if you want the widths of all items to match the width of the widest one in the Main Menu/Submenu.

The calculation of the largest width considers the width of the Title too.

The items may have different widths for several reasons, such as:

•	differences in fonts

•	existence of images within the items

If a Main Menu/Submenu of dissimilar items does not match your style preferences, you can use this property to take care of the dissimilarities by letting the program determine the optimal width for all items.

Note: In vertical submenus the item widths are always equal.

Therefore, the property applies only to "Horizontal" Main Menus/Submenus.

Example:

1st menu	The <Uniform Item Widths> is set to "no"

2nd menu	The <Uniform Item Widths> is set to "yes"

Values:	yes/no

Applies to: 	Main Menu/Submenu (Horizontal only)

Type:	Style Property

See also

Uniform Item Heights


Property:  Uniform Item Heights

Allows you to choose whether the heights of all items match the height of the tallest one within the Main Menu/Submenu. The consideration of the largest height includes the height of the Title too.

The items may have different heights for several reasons, such as:

•	differences in fonts

•	existence of images within the items

The appearance of a menu with different item heights may not match your style preferences. If this is the case, you can use this property to take care of dissimilarities by letting the program determine the optimal height for all items; and title too. The optimal height is determined on the submenu level, i.e. different submenus may have different optimal item heights.

Note: In horizontal type of menus the item heights are always equal.

Therefore, the property applies only to "Vertical" Main Menus/Submenus.

Example:

1st menu	The <Uniform Item Heights> is set to "no"

2nd menu	The <Uniform Item Heights> is set to "yes"

Values:	yes/no

Applies to: 	Main Menu/Submenu  (Vertical only)

Type:	Style Property

See also

Uniform Item Widths


Property:  Javascript Command on Appear

A javascript code to be executed upon appearance of the Main Menu/Submenu.

You can use more than one javascript commands, provided that you separate them with a semicolon (;).

Note! 	You may use only quotes (") or only apostrophes (') inside the text of the property but not both! Using both quotes and apostrophes will cause a javascript error.

Values:	Text     (any javascript command)

Example:	alert("Hello");

Applies to: 	Main Menu/Submenu

Type:	Content Property


Property:  Javascript Command on Disappear

A javascript code to be executed upon disappearance of the Main Menu/Submenu.

You can use more than one javascript commands, provided that you separate them with a semicolon (;).

Note! 	You may use only quotes (") or only apostrophes (') inside the text of the property but not both! Using both quotes and apostrophes will cause a javascript error.

Values:	Text     (any javascript command)

Example:	alert("Hello");

Applies to: 	Main Menu/Submenu

Type:	Content Property


Property:  Item Name

Specifies a name for the Item.

Although blank names are not rejected, it is useful to name all elements so that they can be easily identified in the Menu Structure Pane on the left side.

If you don't want the item to display the <Item Name>, you can set the <Item Contains> property to "Image Only".

Values:	Text     	(HTML tags are accepted too)

Example1:	Company Info

Example2:	<b>More</b> Info

Example3:	More <br> Info	(very useful to break a long item name into more lines)

Applies to: 	Item

Type:	Content Property

See also

Item Contains


Property:  Item Contains

Specifies whether the <Item Name> is displayed on the item or not.

This property gives you the flexibility to display an image on the item while hiding its text.

Values:	Both Name & Image

Image Only

Applies to: 	Item

Type:	Style Property

See also

Item Name

Item Image


Property:  Item Image

Displays an image on the Item.

It can be combined with the <Item Contains> property to get the following results:

•	Item displays only text (the <Item Name> value):

<Item Image>:	"no_image"

<Item Contains>:	"Both Name & Image"

•	Item displays only an image (the <Item Image> value):

<Item Image>:	selected image

<Item Contains>:	"Image Only"

•	Item displays both text and an image (both the <Item Name> and <Item Image> values):

<Item Image>:	selected image

<Item Contains>:	"Both Name & Image"

(note: their relative positioning is determined by the <Item Image Alignment>)

•	Item does not show up at all:

<Item Image>:	"no_image"

<Item Contains>:	"Image Only"

As mentioned above, you can use the <Item Image Alignment> property to specify the relative positioning between the image and the text.

Note 1	It is known that Netscape cannot read images that contain spaces in their filenames! Therefore, always use "my_image.gif" or "myimage.gif" instead of "my image.gif".

Note 2	Avoid using filenames that contain special characters, like quotes ("), apostrophes ('), etc. In most cases these characters will produce an error.

Values:	An image file of the .gif or .jpg type

Applies to: 	Item

Type:	Content Property

See also

Item Image Alignment


Property:  Item Image Alignment

Specifies the relative positioning between the image and the item's text.

This is a relative alignment.  The property has no effect if you choose not to display text or an image on the Item.

This property should not be confused with the <Item Content Alignment> which aligns all the content (both image and text) with the Item area as a whole.

Values:	Above Text, Right of Text, Below Text, Left of Text

Applies to: 	Item

Type:	Style Property

See also

Item Content Alignment

The two kinds of Alignment


Property:  Item Content Alignment

Specifies how the item's content aligns with the Item area as a whole.

The content consists of both the item's text (<Item Name>) and the item's image (<Item Image>).

This property should not be confused with the <Item Image Alignment> property which specifies the relative positioning between the item's image and its text.

Values:	Left, Center, Right

Applies to: 	Item

Type:	Style Property

See also

Item Image Alignment

The two kinds of Alignment


Property:  Item Tooltip

Text that appears above the item when the user pauses the mouse pointer over the item.

Netscape 4.x limitation:

Netscape 4.x cannot show a tooltip when the <Item Cursor> is set to "default" value. It only shows a tooltip when the <Item Cursor> is set to "hand" (or to any other cursor, as it will be automatically displayed as "hand" due to another Netscape 4.x limitation on displaying cursors other than the "default" or the "hand" ones).

Values:	Text

Applies to: 	Item	(on [Mouse Over] state only)

Type:	Content	Property


Property:  Item Cursor

Allows you to change the shape of the cursor when the mouse passes over the item.

Netscape 4.x limitation:

Netscape 4.x supports only the "default" and "hand" values. All other values are displayed as "hand" when viewed with Netscape 4.x browsers.

Values:	a cursor selection from a list of supported cursors

Applies to: 	Item	(on [Mouse Over] state only)

Type:	Style Property


Property:  Item Padding

A number of pixels added between the item's content and its edges.

Values:	a positive number in pixels

Example:	3

Applies to: 	Item

Type:	Style Property


Property:  Item Text Font

Sets the font of the item's text.

The selection box displays five generic font families (Serif, Sans-Serif, Cursive, Fantasy, Monospace) along with all fonts installed on your system.

For cross-platform compatibility, it is advisable to use the generic font families instead of any system-specific font. For example, if you use "Arial" and a specific platform does not have the Arial font, then the menu will use the browser's default font. But if you use "Sans Serif" instead of "Arial", the browser will use the appropriate Sans Serif font (in most cases it will be "Arial", but in platforms that do not have Arial it will be a similar font; not the default font)

Values:	Serif, Sans-Serif, Cursive, Fantasy, Monospace

and all fonts installed on your system

Applies to: 	Item

Type:	Style Property


Property:  Item Text Size

Sets the font size of the item's text.

Allows you to use either CSS sizing OR browser-relative sizing.

You need to click the  [image]  button to set values for this property.

Values:	CSS or browser-relative values

Applies to: 	Item

Type:	Style Property


Property:  Item Text Bold

Specifies if the item's text is displayed bold or not.

Values:	yes/no

Applies to: 	Item

Type:	Style Property


Property:  Item Text Italic

Specifies if the item's text is displayed Italic or not.

Values:	yes/no

Applies to: 	Item

Type:	Style Property


Property:  Item Text Underlined

Specifies if the item's text is displayed Underlined or not.

Values:	yes/no

Applies to: 	Item

Type:	Style Property


Property:  Item Text Color

Sets the color of the item's text.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Item

Type:	Style Property


Property:  "Has Submenu" Image

Adds an image to the item to emphasize the existence of a child submenu.

The image is always positioned on the right of the Item's content.

The <"Has Submenu" Image> is not part of the Item's content, but part of its style. This means that the image is included in the style properties and therefore it is handled by the Pick & Apply functions.

Note 1	It is known that Netscape cannot read images that contain spaces in their filenames! Therefore, always use "my_image.gif" or "myimage.gif" instead of "my image.gif".

Note 2	Avoid using filenames that contain special characters, like quotes ("), apostrophes ('), etc. In most cases these characters will produce an error.

Values:	An image file of the .gif or .jpg type

Applies to: 	Item

Type:	Style Property

See also:

Style Properties


Property:  Item Border Style

Specifies the style of the item's border.

This property refers to the Item only and should not be confused with the <Main Menu/Submenu Border Style> which applies to the whole Main Menu/Submenu.

Values:	none, solid, inset, outset

Applies to: 	Item

Type:	Style Property

See also

Main Menu/Submenu Border Style


Property:  Item Border Width

Specifies the thickness of the item's border.

Setting this to zero is equivalent to setting the <Item Border Style> to "none".

Values:	From 0 to 20

Applies to: 	Item

Type:	Style Property

See also

Item Border Style


Property:  Item Border Color

Specifies the color of the item's border, if any.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Item

Type:	Style Property

See also

Item Border Style


Property:  Item BG Color

Fills the item's background with a color.

If this property is left blank and no item background image is selected (i.e., <Item BG Image> is set to "no_image"), the lower background layer is displayed. See more on background layers.

If an item background image (<Item BG Image>) is selected, this property has no effect.

You can actually see the selected color along with its respective hexadecimal code. You can either enter the hexadecimal code or pick a color from the color dialog box which appears when clicking on the "..." button.

Values:	#000000 (Black) - #FFFFFF (White)

Applies to: 	Item

Type:	Style Property

See also

The different background layers


Property:  Item BG Image

Displays an image on the item's background.

The image is always tiled on the background.

If "no_image" is selected, the <Item BG Color> is displayed on the background. See more on background layers.

Similarly, the <Item BG Color> has no effect if an <Item BG Image> is used.

Note 1	It is known that Netscape cannot read images that contain spaces in their filenames! Therefore, always use "my_image.gif" or "myimage.gif" instead of "my image.gif".

Note 2	Avoid using filenames that contain special characters, like quotes ("), apostrophes ('), etc. In most cases these characters will produce an error.

Values:	An image file of the .gif or .jpg type

Applies to: 	Item

Type:	Style Property

See also

The different background layers


Property:  Status bar Text

Specifies the text appearing on the browser's status bar when the mouse passes over the Item.

Use this property to display a small text description for each item.

As implied by its definition, the property is only enabled on the Mouse Over item state.

Values:	Text

Applies to: 	Item

Type:	Content Property


Property:  Javascript Command

Specifies a Javascript Command to be executed when the item comes into a specific state.

Normal state:

It functions like a [Mouse Out] state. The Javascript Command will be executed when the mouse moves away from the item's area.

Mouse Over state:

The Javascript Command will be executed when the mouse passes over the item's area.

Mouse Click state:

The Javascript Command will be executed when the mouse clicks on the item's area. This does not cancel the <URL> property. You can set both a URL to open and a Javascript command to be executed when clicking on the Item.

You can use more than one javascript commands, provided that you separate them with a semicolon (;).

Note! 	You may use only quotes (") or only apostrophes (') inside the text of the property but not both! Using both quotes and apostrophes will cause a javascript error.

Values:	Text     (any javascript command)

Example:	alert("Hello");

Applies to: 	Item

Type:	Content Property


Property:  URL

Specifies the web page to be opened when clicking on the item.

You can use both absolute and relative paths.

If your .awm file was created using version 1.2 or earlier please read the FAQ section related to the URL property.

Absolute paths

The application considers the input string as an absolute path only if one of the following protocols are found in front of the string:

http://

https://

ftp://

mms://

mailto:

file:////servername/     	(if you access a server)

file:///driveletter|/  	(if you access a drive)

or file:///driveletter:/   	(if the above drive syntax is not supported by your network. You may need to try both and keep the one that works)

Valid examples of absolute paths:

http://www.likno.com

http://www.likno.com/faq.html

ftp://www.likno.com/downloads/AllWebMenus.exe

mailto:support@likno.com

file:////server1/testarea/test.html	(for intranet using a server)

file:///C|/testarea/test.html	            (for intranet using a hard drive)  or

file:///C:/testarea/test.html	(if the above syntax is not supported by your network)

Invalid examples of absolute paths:

www.likno.com

likno.com

(these strings will be parsed as relative paths and the URL will not open)

Relative paths

Both menu-relative and root-relative paths are allowed here.

The former is related to the folder where the compiled menu is located while the latter is related to the folder where the site root is located (and always starts with a slash "/"). While all types of paths successfully open their assigned pages when viewed on the server, the root-relative paths cannot resolve their assigned pages when viewed locally. On the contrary, the menu-relative paths do open their pages when viewed locally. Therefore, as there are no important differences between the two, it is advisable to use menu-relative paths.

As an example, let's say that the local root folder of your site is the c:\mysite folder and that the contents of your web site are:

| ----------------------------------------------- |

| c:\mysite\index.html                  |

| c:\mysite\company.html             |

|          ...                                    |

| c:\mysite\products\product.html  |

| ----------------------------------------------- |

Example 1:

Let's say that you compile your menu as c:\mysite\mymenu.js

For the item that opens the product page:

- The menu-relative URL is: 	products/product.html

- The root-relative URL is:	/products/product.html

For the item that opens the company page:

- The menu-relative URL is: 	company.html

- The root-relative URL is:	/company.html

Example 2:

Let's say that you compile your menu as c:\mysite\menufolder\mymenu.js

For the item that opens the product page:

- The menu-relative URL is: 	../products/product.html

- The root-relative URL is:	/products/product.html

For the item that opens the company page:

- The menu-relative URL is: 	../company.html

- The root-relative URL is:	/company.html

Anchors

A menu item can also link to a paragraph within a page:

Enter http://www.mysite.com/info.html#anchor in the URL property of the items and the menu can be used to navigate inside the www.mysite.com/info.html web page.

As implied by its definition, the property is only enabled on the Mouse Click state.

Note: 	Always use slashes instead of backslashes

(example:  ../users/~user10/user10.html  )

Values:	Text

Example1:	index.html

Example2:	index.html#anchor

Example3:	http://www.likno.com

Example3:	mailto:support@likno.com

Applies to: 	Item

Type:	Content Property

See also

FAQ section for upgrading from version 1.2 or earlier


Property:  Target Frame

Specifies the frame where the <URL> opens.

If you don't use frames then just leave this field blank or type new to open the URL into a new browser window.

Values:

Leave it blank to open the URL into the same frame where the menu is located (default for non-framed pages), or

type new to open the URL into a new browser window, or

enter the frame name to open the URL into that specific frame, or

type top to open the URL in the whole area of the current browser window (not to a specific frame).

Example with Frames:

Let's assume that we have the following Frameset Definition inside the source code of the home page:

<frameset framespacing="0" border="0" cols="171,*" frameborder="0">

  <frame name="left" target="main" src="left_page.htm" scrolling="auto">

  <frame name="main" src="main_page.htm" target="_self">

  <noframes>

  <body>

  <p>You need a browser that supports frames to see this site </p>

  </body>

  </noframes>

</frameset>

Let's also assume that we created a menu link into the left_page.htm page (opening in the left frame). We want the menu items to open their URLs inside the main frame.

As can be seen from the <frameset> tag, the frame where the main_page.htm opens has been assigned the following name:

main

This is exactly what you need to enter into the <Target Frame> property of the items. Do not get confused and use the content of the src attribute (eg: main_page); this will not work. You need to use the content of the name attribute (eg: main).

Values:	Text

Example1:	                        (remains blank - default value)

Example2:	main 	(the assigned frame name inside the frameset definition)

Example3:	new

Example4:	top

Applies to: 	Item

Type:	Content Property

See also:

URL


"How Do I" List
How Do I...

•	Find my Installation ID

•	Register

•	Optimize menus to improve building speed

•	Use my designed menu on my web pages

•	Make an invisible menu appear when hovering over an image

•	Create a transparent menu

•	Design a "ladder" menu

•	Highlight the selected item

•	Make items look like buttons

•	Transfer a style to other elements

•	Transfer a submenu to another parent item

•	Use images

•	Know if I need to recompile or relink my menus with a new version

•	Link menus to Frontpage Shared Borders

•	Position the menu relative to a page element

•	Use multiple menus on the same page


Find my Installation ID

Choose Help -> About inside your AllWebMenus installation.


Register

Registering AllWebMenus allows you to insert your menus into web pages and use them on the Internet. To obtain a registered license please follow these simple steps:

Step 1. Become a Registered User

•	Access the online registration page located at http://www.likno.com/awmregister.html

•	Click on your preferred method of payment and enter the necessary info in the order form

You will soon receive an e-mail containing instructions on how to get the Activation Code that unlocks your application.

Step 2. Activate your Installation

•	Choose Help -> Register AllWebMenus

•	Enter your Activation Code

Following these simple steps you will be a registered user and you will be able to take full advantage of the AllWebMenus features.

Methods of payment

There are many flexible payment options:

•	Credit Card Orders (all major credit cards accepted)

•	Phone Orders (toll-free)

•	Mail Orders (pay by check)

•	Fax Orders

•	Purchase Orders

All on-line transactions are protected by an extremely high level of encryption, the highest allowed by the U.S. law.


Optimize menus to improve building speed

There are two optimization techniques you may want to know when designing your menus:

Technique 1:

You can increase the menu-building speed if you use the same appearance in both the [Mouse Over] and [Mouse Click] Item States.

This is possible if you check the "Ignore Mouse Click State" box inside the Optimization tab, found at:

Tools-> Compile Properties-> Optimization

In most menu designs, clicking on an item just opens a page inside the same window. Therefore the [Mouse Click] state will only be observed for a second or so. In these cases, checking the "Ignore Mouse Click State" box can be a very good idea.

On the other hand, if you have medium-sized menus that appear very quickly you may not want to lose the flexibility of a 3rd item state. Obviously, there is a performance/features tradeoff here and you are able to choose what fits you best.

Note: If you want to use this optimization technique for your final, compiled menus, it is important that you keep the respective box checked prior to compilation.

Technique 2:

As a general rule, prefer to create more submenus with a few items (no more than 12 or 15) than create less submenus with a lot of items.


Use my designed menu on my web pages

To use a menu in your web pages you must take the following four steps:

Step 1. Compile the menu

Step 2. Link the compiled menu to your web pages

Step 3. Upload the necessary menu files

Step 4. Upload the web pages that contain the menu link

The previous steps are needed for the creation of a new menu which is not linked to your web pages. Not all steps are needed for the following common objectives:

Situation

Menu is already compiled and uploaded

Web pages are already linked to the compiled menu and uploaded

Objective 1

Update the menu (apply a different appearance or add new items)

Steps needed

1 & 3

Steps not needed

2 & 4 (because the pages already contain the link and are uploaded)

Objective 2

Add the menu link to additional web pages (eg: newly created ones)

Steps needed

2 & 4 to the new pages only

Steps not needed

1 & 3 (because the menu remains the same)

See also

Compile Menu

Link Compiled Menu to Web Page(s)

How Do I Know if I need to recompile or relink my menus with a new version


Make an invisible menu appear when hovering over an image

1. Set the <PopUp> property to "yes"

2. Change the <img> tag of the image to the following:

<img src="..." onMouseOver="awmShowMenu('menuname');">

See also

PopUp


Create a transparent menu

Set all background colors to "Transparent"

Set all background images to "no_image"

Optional: Set all border styles to "none"


Design a "ladder" menu

Set a non-zero <Distance Between Items> in the Main Menu/Submenu

Set the <Main Menu/Submenu BG Color> to "Transparent"

Set the <Main Menu/Submenu BG Image> to "no_image"

See also

Property: Distance Between Items


Highlight the selected item

Set a different background/text color in the "Mouse Over" item state than in the "Normal" item state,

or

Set a different border style/width in the "Mouse Over" item state than in the "Normal" item state.


Make items look like buttons

Use a different Border style/width in the different item states.

Eg: Use "solid" in Normal item state and "inset" in Mouse Over item state.


Transfer a style to other elements

1. Select the element of your preferred style

2. Pick its style (Ctrl+P or Style menu)

3. Select the element to which the style should be transferred

4. Apply style (Ctrl+A or Style menu)

Repeat steps 3-4 to "paint" more elements with your preferred style.


Transfer a submenu to another parent item

1. Select the submenu

2. Cut the submenu (this applies to its children too)

3. Select the new parent item

4. Paste the submenu


Use images

Menus can contain images in the following ways:

As background in Main Menu/Submenus

As background in Items

As part of the Titles' content

As part of the Items' content

As "Has Submenu" images, emphasizing the existence of a submenu linked to a parent item.

Images should be in gif or jpg.

Images can also be animated gifs.

Note!

Image filenames should not contain spaces because Netscape will not recognize them properly.


Know if I need to recompile or relink my menus with a new version
How do I Know if I need to recompile or relink my menus with a new version

Quick Help:

1. This new version requires that you recompile all your menus that were previously compiled with version 2.0 Build #456 and below.

2. This new version requires that you relink only your menus that were previously linked with version 2.0 Build #450 and below.

Help in details:

A new version may be released for any of the following reasons:

- improved user-interface and overall functionality of the application,

- improved HTML menu-linking section that is inserted into the web pages,

- improved Javascript menu-building Libraries that incorporates support for new browsers or support for new AllWebMenus features.

It is evident that you should follow all new releases closely in order to update your existing menus with the latest additions and improvements.

However, not all new versions require you to recompile or relink your existing menus.

To help you determine whether these actions are necessary, we use a different version series for each of the three components that comprise the overall AllWebMenus solution:

- the application 	(Application)

- the Javascript menu-building Libraries	(Libs)

- the HTML menu-linking section	(HTML)

A new AllWebMenus version may (or may not) come with new Libs or a new HTML section. This can be determined by the version number of each component. If the new component has a larger version than the one you are currently using then action needs to take place.

Current Version History

Date	Application	Libs	 	     HTML

04/16/02	v2.0.460	#124 (new)	     [2]

04/05/02	v2.0.458	#120 	     [2]

02/23/02	v2.0.456	#118 	     [2]

02/12/02	v2.0.454	#116 	     [2]

02/01/02	v2.0.452	#112     	     [2] (new)

06/15/01	v1.3.360	n/a	     n/a

earlier	older versions	n/a	     n/a

Based on the version history you can determine whether you need to take any action on your existing menus or not. The following examples describe this in detail:

Example 1

Date	Application	Libs	     HTML

future	v2.3.900	#804 (new)	     [4] (new)

now	v2.0.452	#112 	     [2]

•	#804 is larger than #112 -> you need to recompile your existing menus.

•	[4] is larger than [2] -> you need to relink your recompiled menus to your pages.

Example 2

Date	Application	Libs	   HTML

future	v2.3.900	#804 (new)	   [2] (no change)

now	v2.0.452	#112 	     [2]

•	#804 is larger than #112 -> you need to recompile your existing menus.

•	the version of the HTML did not change -> no relinking is necessary.

Example 3

Date	Application	Libs	   HTML

future	v2.3.900	#112 (no change)  [2] (no change)

now	v2.0.452	#112 	     [2]

•	no recompilation is necessary.

•	no relinking is necessary.

(the new release has changes only in the user-interface or the functionality of the application)

Where can I find the version for each AllWebMenus component?

Application:

1. Open AllWebMenus

2. Go to Help->About

3. The version is right below the AllWebMenus word

Javascript menu-building Libraries:

1. Open any one of the awmlibX.js javascript libraries (located inside the awmData-menuname directory) inside a text editor.

2. The first line should be:

//****** AllWebMenus Libraries Version #XXX ******

3. The #XXX is the version of the Javascript menu-building Libraries

HTML menu-linking section:

1. Open your menu-containing pages and view their html source

2. Find the following variable inside the AllWebMenus HTML Section:

var MenuLinkedBy='AllWebMenus [X]'

3. The [X] is the version of the HTML menu-linking section

Notes:

All users upgrading from version 1.3 and below need to recompile and relink their menus.

For menus compiled and linked with version 1.3.358 or below, you should not forget to upload the awmmenupath.gif file too (non-existent in those older versions).

Tip:

Some new versions do not require that you recompile your existing menus, even if their menu-building Libraries are new. If this is stated in the new application description, then you only need to do the following:

1. Go to the "libraries" folder inside your AllWebMenus installation

2. Copy all the new awmlibX.js libraries

3. Paste them inside the awmData-menuname directories of your existing menu implementations. This should replace the older libraries.

This tip is quite useful in multiple-menu implementations that use the same awmData-menuname folder. You can avoid multiple compilations by simply copying the new libraries inside the awmData-menuname folder, always provided that the new application description states this clearly.

See also

Compile Menu

Link Compiled Menu to Web Page(s)


Link menus to FrontPage Shared Borders

This topic is described in detail in the "Compile Properties, FrontPage Support" section.


Position the menu relative to a page element

There are two ways to position your menu in your pages:

1. Edge-Relative Positioning  (default):

The menu is positioned on the page based on the three following properties:

<Position Relative to>

<Horizontal Distance from Edge>

<Vertical Distance from Edge>

2. Positioning relative to a Page Element:

The menu uses an invisible page element to position itself. You just need to add the following element at the exact position where you want your menu to appear:

<style>.awmAnchor {position:relative}</style><span id='awmAnchor-menuname' class='awmAnchor'></span>

where menuname is the name of the specific menu to be placed at the <span> area. The <span> element does not occupy space on the page.

How it works:

The menu positions itself using its Edge-Relative Positioning values unless the <span> element is detected somewhere in the page.

In this case, the menu ignores its internal Edge-Relative Positioning and matches its top-left corner with the top-left corner of the element.

Remember that the menu is always floating. It appears over the page contents, not inside them. It does not push other elements away; it just covers them. Therefore, for the Main Menu not to cover other page elements, you should force the <span> element to occupy space on the page. In this case, the <span> element should have the following syntax:

<style>.awmAnchor {position:relative}</style><span id='awmAnchor-menuname' class='awmAnchor'><table width=XX height=YY><td></td></table></span>

where the XX and YY define the area that you want your menu to occupy. Optimally, this area should match the Main Menu area.

Alternatively, you can simply insert the span tag into a table cell, which should have enough room for the Main Menu to appear.

How to achieve exact positioning in all browsers:

Some browsers may show the <span> element in a slightly different position than others (some pixels off). This can be easily solved by using the awmOffset variable for the browser you want to calibrate.

Each browser has two variables for the X and Y offset. The available variables to use are the following:

awmIEOffsetX

awmIEOffsetY

awmNS6OffsetX

awmNS6OffsetY

awmNS4OffsetX

awmNS4OffsetY

awmOperaOffsetX

awmOperaOffsetY

awmIEMacOffsetX

awmIEMacOffsetY

Therefore, if you want the menu to appear 5 pixels higher in Netscape 6 and 12 pixels righter in Opera, you should use the following code inside your HTML:

<script>

awmNS6OffsetY=-5;

awmOperaOffsetX=12;

</script>

Obviously, you should place this code before your AllWebMenus HTML menu-linking section on the page.

Important Note: Do not try to place the menu on the page by moving its "HTML menu-linking section" from the end of the page. Instead, use the <span> element technique to achieve this.

See "Correct Placement of HTML menu-linking section" for more info.

Note 2: Netscape is case-sensitive. Therefore be careful to use the correct capitalization for "menuname". For example if your menu is called NavBar.js, then you should have 'awmAnchor-NavBar' inside the span element (not 'awmAnchor-navbar').


Use multiple menus on the same page

You can use more than one menu on the same page if you compile and link these menus with different names.

Example:

1. Compile menu1.js and link it to the page

2. Compile menu2.js and link it to the page

Two HTML menu-linking sections will be created inside the html of the page. One for menu1.js and a different one for menu2.js (the order is not important).

How it works:

Let's say that you want to link a menu called "menu3.js" to a page. These are the actions taken place by AllWebMenus:

Does an HTML menu-linking section already exist for "menu3.js"?

Yes	Replace the old HTML menu-linking section with the new one

No	Insert a new HTML menu-linking section for "menu3.js" into the page

Comments:

It is obvious from the above example that an additional menu will not be added in your page if its name already exists inside that page. So, you need to be careful not to use the same name for different menus even if they are located in different directories.

Multiple menus can take advantage of the "Tools-> Compile Properties: Folders" capability so that a common "Scripts/Images Folder" is used instead of many separate ones.

You can have as many menus as you like inside the same page but you should be careful not to over do it, as performance may be affected.

See also

Compile Properties: Folders


The Alternative URL

AllWebMenus creates dynamic menus that work both in Internet Explorer and Netscape Navigator of versions 4.0 and later, Opera included.

But what about users that may have older browsers? Their browsers may not support Dynamic HTML.

To account for this case, you should specify an alternative URL where the user will be automatically redirected if he or she uses a browser other than the ones mentioned above. Such page may simply be the web page without the menu, containing additional links to account for the lack of the menu's navigation easiness.

"Where do I specify the Alternative URL?"

The Alternative URL can be specified as an option at the Link Compiled Menu to Web Pages process.

The use of an alternative URL is not required.

See also

Link Compiled Menu to Web Pages


The three Item States

The items may look different when certain events occur. You can therefore use a different design to emphasize the event of an item getting the focus or the event of the mouse clicking on the item.

This is implemented by applying a different value to the properties for each one of the following states:

Normal state

Specifies how the item looks when the mouse is away from the item.

See Item1 on Normal state:

Mouse Over state

Specifies how the item looks when the mouse is over the item.

See Item1 on Mouse Over State:

Mouse Click state

Specifies how the item looks when the mouse clicks on the item.

See Item1 on Mouse Click State:

Now, take a look at the Item Properties to see how the different design of each state was actually implemented:

You may have noticed that most properties keep the same value in all item states. It is therefore very useful to enter the property value only once. This is how the [image] button can make our life easier; it copies the property value of the "Normal" state to its "Mouse Over" and "Mouse Click" states.


The two kinds of Alignment

There are two kinds of alignment: The Content Alignment and the Image Alignment.

Content consists of both text and image, if any. This "group" is properly aligned on the element (Item or Title) by the "Content Alignment".

"Image Alignment" is used to specify the position of the image relative to the text.

Examples:

Content Alignment:	Center

Image Alignment:	Right of Text

Content Alignment:	Right

Image Alignment:	Left of Text

Content Alignment:	Right

Image Alignment:	Above Text

See also

Item Content Alignment

Item Image Alignment

Title Content Alignment

Title Image Alignment


The different background layers

There are three backgrounds:

1.	The Submenu background, that applies to the area covered by the submenu elements.

2.	The Title background, that applies to the area of the specific Title

3.	The Item background, that applies to the area of the specific Item.

A background can be either filled with a color or with an image*. If the <BG Image> and the <BG Color> are set to "no_image" and "Transparent" respectively, the background will be transparent and the lower background will be displayed.

The top-down order of the background layers is as follows:

1. Item BG Image

2. Item BG Color

3. Submenu BG Image

4. Submenu BG Color

5. Web page

*except of the Title background that may only be filled with a color (no BG image for the Title)

See the following example:

•	Main Menu has a grey background.

The following background rules apply:

Title has a black background

=> black covers grey

Item1 has a yellow background

=> yellow covers grey

Item2 and Item4 have transparent backgrounds

=> Main Menu's grey is displayed

Item3 has a blue background on "Mouse Over" state

=> blue covers grey

•	Submenu5 has a transparent background.

The following BG rules apply:

Title has a black background

=> black covers transparency

Item6 and Item7 have transparent backgrounds

=> web page is displayed


The Pick & Apply feature

The Pick and Apply functions handle the look and behavior of the elements rather than their contents. They are used to "paint" similar elements with a selected (picked) style.

By using these two functions, you can design an element exactly the way you like and then apply its style to other similar elements without affecting their contents (i.e. text and/or image). This is very handy when you need to make the same change in the look of many elements.

The Pick & Apply functions handle the Style Properties only.

See also

Pick Style

Apply Style


The difference between Main Menu and Submenu

The Main Menu is like a Submenu, consisting of the first group of items that form the initial menu. Therefore, it cannot be called a "submenu" since it does not derive from a parent item.

Apart from the naming problem, there are also some differences that distinguish it from a Submenu:

•	The Main Menu cannot be Cut or Deleted

•	Both Main Menu and Submenus can be Horizontal or Vertical but only Main Menu can be a Horizontal Menubar.

•	Main Menu does not have the following properties that apply only to Submenus:

Submenu Opens - When

Submenu Opens - Where

Submenu Opens - At Distance

Submenu Aligns with


The Element Clipboard

This is where an element (and its children) is stored after performing a Cut or a Copy. The clipboard understands whether the element is an Item or a Submenu and will perform a Paste according to the following:

Element Clipboard -> Selection

Action

•	Item -> Item

   Pastes the clipboard's Item after the selected Item.

•	Item -> Submenu

   Pastes the clipboard's Item at the top of the selected Submenu.

•	Submenu -> Item

   Pastes the clipboard's Submenu as a child of the selected Item.

•	Submenu -> Submenu

   n/a. A Submenu can only be linked to an Item.

See also

Copy & Paste Item/Submenu


The Javascript menu-building Libraries

These are the javascript files containing all the functions that build the menu and drive its behavior. They are named awmlibX.js and reside inside the "awmData-mainmenu" directory which is created upon the Compile Menu process.

Their input is the compiled menu file (mainmenu.js). Therefore, the mainmenu.js represents the definition of the compiled menu whereas the awmlibX.js javascript libraries constitute the engine that generates the menu based on its definition.


The HTML menu-linking section

This is the AllWebMenus code added in the HTML of the page during the menu-linking process. This section looks like the following one:

<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->

<img name='awmMenuPathImg-menu' id='awmMenuPathImg-menu' src='./awmmenupath.gif' alt=''>

<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='452'; awmAltUrl='';</script>

<script src='menu.js' language='JavaScript1.2' type='text/javascript'></script>

<script type='text/javascript'>awmBuildMenu();</script>

<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->


Troubleshooting

This is a collection of quick tips to avoid trouble.

Compile Menu - Link Menu process:

•	It is critical that you do not forget to upload the awmmenupath.gif and the awmData-menuname directory along with the menuname.js file after you compile your menu.

•	You can compile the menu anywhere you like within your site's directory structure. This decision should not be affected by the location of the pages you want to link the menu to.

For example, if you want to link the menu into a Dreamweaver template, you are not required to compile the menu into the Templates directory. On the contrary, we do not advise you to do so as you will have to upload the Templates directory on the server too.

In general, simply compile your menu into your root directory or into a manually-created subdirectory and you will be able to link it to any page, shared border, template or library of that web site directory structure you want.

•	If you use FrontPage, the menu should not be compiled inside the  _borders  folder or any other special folders used by the authoring tool to manipulate common objects. The obvious reason is that these folders are not uploaded on the server when publishing the site. Instead, compile the menu in the root or in any other manually-created subdirectory.

Font selection:

For cross-platform compatibility, it is advisable to use the generic font families instead of any system-specific font. For example, if you use "Arial" and a specific platform does not have the Arial font, then the menu will use the browser's default font. But if you use "Sans Serif" instead of "Arial", the browser will use the appropriate Sans Serif font (in most cases it will be "Arial", but in platforms that do not have Arial it will be a similar font; not the default font)

Filenames:

•	It is known that Netscape cannot read images that contain spaces in their filenames! Therefore, always use "my_image.gif" or "myimage.gif" instead of "my image.gif".

•	Since version 1.3.356, spaces in the compiled menu name are not allowed as they are not parsed properly by some browsers, such as Netscape. As an example, use "main_menu.js" or "mainmenu.js" instead of "main menu.js".

•	Avoid using filenames that contain special characters, like quotes ("), apostrophes ('), etc. In most cases these characters will produce an error.

Note on <Javascript Command> syntax:

You may use only quotes (") or only apostrophes (') inside the text of the property but not both! Using both quotes and apostrophes will cause a javascript error.

Note on <URL> syntax:

Always use slashes instead of backslashes

(example:  ../users/~user10/user10.html  )

Menu above Flash or other objects:

The <Z-Index> property will not work for some objects, such as the Flash Object.

To make the menu appear above these objects you need to do the following:

1. Go to the <object> tag

2. Add the following code into the tag:

<param name="WMode" value="Transparent">

The above solution does not apply for the SELECT element as it always gets the highest priority by the browser. Therefore, avoid placing this element close to the area where the menu expands.

Netscape 4.x limitation:

Netscape 4.x cannot show a tooltip when the <Item Cursor> is set to "default" value. It only shows a tooltip when the <Item Cursor> is set to "hand" (or to any other cursor, as it will be automatically displayed as "hand" due to another Netscape 4.x limitation on displaying cursors other than the "default" or the "hand" ones).


Correct Placement of the menu-linking HTML Section
Correct Placement of the HTML menu-linking section

It is important that the AllWebMenus HTML menu-linking section is placed immediately before the </BODY> tag and not somewhere else. This allows for the floating menus to appear properly on the page without being dismantled by other page elements (such as tables etc.), mostly in Netscape browsers.

How it works:

When inserting a menu into a web page, something similar to the following code is added just before the </BODY> tag:

<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** -->

<img name='awmMenuPathImg-menu' id='awmMenuPathImg-menu' src='./awmmenupath.gif' alt=''>

<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='452'; awmAltUrl='';</script>

<script src='menu.js' language='JavaScript1.2' type='text/javascript'></script>

<script type='text/javascript'>awmBuildMenu();</script>

<!-- ******** END ALLWEBMENUS CODE FOR menu ******** -->

This HTML section should always remain there no matter where you want the menu to appear. Why?

Since the menu floats on the page, its appearing position is not determined by where you place the AllWebMenus HTML menu-linking section but by the <Vertical Distance from Edge> and <Horizontal Distance from Edge> properties. Therefore, it does matter that you do not move the HTML Section from the end of the page!

What about Includes, Libraries, Templates, etc.?

The same rule applies to includes, libraries and templates. If you want to have a menu into a library or an include then you should make sure that:

1. the menu is always at the very end of the library or include and

2. the library or include is the last element of the page, just before the </body> tag.

If both conditions are satisfied, the resulting page will have the AllWebMenus HTML section at the very end of the page and no problems in Netscape will occur.

What about Frontpage Shared Borders?

A similar logic applies to the use of FrontPage Shared Borders.

This topic is best described in the "Compile Properties, FrontPage Support" section.


Frequently Asked Questions

I have an older version of AllWebMenus. How do I upgrade my installation to take advantage of the new features, the improved script and the different menu generation process of version 2.0?

The following instructions involve upgrades from v1.1, v1.2 or v1.3 to v2.0. They are not required for upgrades to new builds of the same version (2.0).

1. Download the latest distribution and install it over the older one.

2. Open your *.awm file (eg: mymenu.awm) and compile it as mymenu.js (note: the name is an example, you can use any name you like for the compiled menu).

3. Link the compiled mymenu.js file to your web pages.

4. Upload the following elements to your web site:

- the mymenu.js file

- the awmData-mymenu directory and the awmmenupath.gif file (which should be located and uploaded at the same directory with the mymenu.js file)

- all web pages processed in step 3 and therefore contain a link to the compiled menu (which should be a few lines of code).

Note that the old awmData directory found at v1.1 and v1.2 can now be deleted as it is not needed anymore.

Important note on the "URL" property for .awm files created with version 1.2 or earlier:

The older versions created a menu entity (i.e. the awmData subdirectory) in every directory where the pages were located. Therefore, there was no actual difference between "document-relative" links and "menu-relative" links in the URL property (eg: "../info.html")

The new version creates a single compiled menu for all pages, regardless of where these pages are located inside the site's directory structure. Therefore, all relative links are now related to the directory where the compiled menu is located. In that manner, the old "../info.html" value may not link to the proper page now and it may have to be changed to "info.html" (or whatever needed).

Obviously, you will not need to do any changes if you have been using absolute paths inside the URL property (eg: http://www.likno.com).

See more info on the <URL> property here

My menu works fine when viewed locally but does not appear when viewed on the server. What have I done wrong?

You have forgotten to upload the associated awmData-menuname directory or the awmmenupath.gif file along with the compiled menu or you have uploaded them in the wrong directory.

Click here to read more about this procedure

How can I optimize my menu design to get the best possible menu-building speed?

Click here to read important notes on the Performance Optimization

How can I set the width of the submenu items to a fixed size?

This is not possible; we deliberately kept it like this to preserve the cross-browser functionality. One of the top priorities of AllWebMenus is to ensure that a menu will be displayed properly in both IE and Netscape, PC or Macintosh version.

Having this in mind, it can be easily realized that there are different renderings of the same menu in different browser settings. The same menu may be rendered 50 pixels wide in one setting while 75 pixels wide in another.

This is why the use of a "fixed width size" property could lead to menus working fine in some settings (the ones you really test) while looking bad in other settings (the ones you may not test).

Concluding, the submenu's width is not fixed but rather gets calculated on-the-fly so that every item is displayed properly given the user's browser settings.

The border is very close to the submenu's text. How can I change this?

As noted above, the submenu width is determined on-the-fly based on the widest submenu item. Therefore, if you want some "breathing" space between the text and the border, you may just add a space (or more) at the beginning and the end of the widest item. Alternatively, you may use the <Item Padding> property to get some breathing space around all the four edges of the item.

Can I use HTML tags inside the Items and Titles?

Yes, you can use any HTML tag you like inside the <Item Name> and <Submenu Title> properties. This is very useful when you want to break an Item Name into several lines. As the menu in our web site shows, the "Frequently Asked Questions" item is broken into three lines by assigning the value "Frequently <br> Asked <br> Questions" to the Item Name property.

Can a menu item link to a paragraph within a web page?

Yes, just enter http://www.mysite.com/info.html#anchor in the <URL> property of the items and the menu can be used to navigate inside the info.html web page.

I have two different menus for different html pages. How do I properly use the different compiled menus and their associated awmData-menuname directories?

Let's assume the following file structure:

c:\mysite\pageA.html

c:\mysite\pageB.html

c:\mysite\pageC.html

c:\mysite\pageD.html

(the  c:\mysite  directory is the root of the site)

and the following designed menus:

menu1.awm   (to be used by pageA and pageB)

menu2.awm   (to be used by pageC and pageD)

1. We compile menu1.awm into the menu1.js file.

This action creates the following elements into the c:\mysite\ folder:

-the menu1.js file

-the awmmenupath.gif file

-the awmData-menu1 directory which contains the javascript libraries and all images used by menu1 (if any)

2. We compile menu2.awm into the menu2.js file.

This action creates the following elements into the c:\mysite\ folder:

-the menu2.js file

-the awmmenupath.gif file

-the awmData-menu2 directory which contains the javascript libraries and all images used by menu2 (if any)

3. We link the menu1.js file to pageA and pageB

4. We link the menu2.js file to pageC and pageD

5. We upload the following elements to the root of our web site:

-the menu1.js file

-the awmData-menu1 directory

-the menu2.js file

-the awmData-menu2 directory

-the awmmenupath.gif file (this is common for both menus)

-the pageA.html file

-the pageB.html file

-the pageC.html file

-the pageD.html file

6. This completes the process for all menus and pages.


Specifies how the item looks when the mouse is away from the item.

See also

The Three Item states


Specifies how the item looks when the mouse is over the item.

See also

The Three Item states


Specifies how the item looks when the mouse clicks on the item.

See also

The Three Item states


Most properties keep the same value in all item states. It is therefore very useful to enter the property value only once. This is how the [image] button can make life easier; it copies the property value of the "Normal" state to the "Mouse Over" and "Mouse Click" states.

See also

The Three Item states