AllWebMenus Help

Transcription

AllWebMenus Help

User's Guide
© 2002 Likno, all rights reserved
AllWebMenus v2.0
Bringing Cross-Browser Web Site Navigation to a New Era
by Likno
Likno is pleased to announce the release of AllWebMenus v2.0, the second generation follow-up to its very
successful predecessor AllWebMenus. AllWebMenus v2.0 is the web site navigation solution that allows the
design of complex web menus in a totally visual and friendly way. Web developers are now able to enrich their
web sites with impressive script-based navigation menus without the knowledge of a single DHTML or
Javascript command.
AllWebMenus resolves all existing DHTML incompatibilities across the DHTML-enabled browsers (IE, NN,
Opera, etc.) and offers peace of mind to the professional web developer by producing truly cross-browser
navigation menus. This process is transparent to the web developer who enjoys the design of cool navigation
menus without bothering for the technicalities lying behind.
AllWebMenus was introduced and became popular because of its easy and friendly way in which users create
menus using an intuitive WYSIWYG technique. The new version of 2.0 brings in new functionality and a large
number of added features.
AllWebMenus v2.0 allows the web developer to assign a large number of properties to the menu and its
entities. To mention some, the menu can be vertical or horizontal, it can be movable, stay visible while
scrolling, contain static or animated images, borders, colors and much more. There is also a collection of
predefined styles in the Style Gallery that can help you build a menu very fast by letting the Style Gallery take
care of its appearance. Finally, a valuable new feature that we believe will be greatly appreciated by the
professional web designer is the ability to use javascript commands on every possible event triggered by any
menu element.
In addition to its menu-design capabilities, AllWebMenus uses a simple, step-by-step process that makes it
easy to compile and link menus to the web in only seconds. There is even a solution for older browsers that do
not support DHTML; an alternative (menu-free) web page can be optionally specified so that these browsers
are automatically redirected there.
AllWebMenus v2.0 also includes:
- Full Frame support and capability for multiple menus on the same page
- Full and transparent collaboration with Templates, Libraries, FrontPage Shared Borders, and more
- Two flexible ways for exact menu positioning; relative to window corners or relative to any page element
- Complete help for all properties and commands, plus context-sensitive help
- A Live Example for every single property demonstrating its specific function and form
- Complete control on the behavior of each individual submenu by specifying How, When and Where it opens
- Three different item states available for each feature: the [Normal], [Mouse Over] and [Mouse Click] state
AllWebMenus has been well received by both customers and reviewers, with favorable reviews coming from
Tucows, WDVL, WebAttack and many others. The best way for someone to realize the richness of the
AllWebMenus design capabilities is to look at some menu samples located at
http://www.likno.com/examples.html
The present manual will assist all our users in taking the most out of AllWebMenus and create fantastic menus
for their websites.
The possibilities are endless!
AllWebMenus User's Guide
All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, or
mechanical, including photocopying, recording, taping, or information storage and retrieval systems - without the
written permission of the publisher.
Products that are referred to in this document may be either trademarks and/or registered trademarks of the
respective owners. The publisher and the author make no claim to these trademarks.
While every precaution has been taken in the preparation of this document, the publisher and the author assume no
responsibility for errors or omissions, or for damages resulting from the use of information contained in this
document or from the use of programs and source code that may accompany it. In no event shall the publisher and
the author be liable for any loss of profit or any other commercial damage caused or alleged to have been caused
directly or indirectly by this document.
The javascript code used by the AllWebmenus application is property of Likno. You may use this code only as part of
the AllWebMenus software for creating web menus. Any unauthorized use, transmission, transformation, facsimile,
or copying of any means (electronic or not) is strictly prohibited.
Removal of the present copyright notice is prohibited.
Printed: March 2002
Special thanks to:
We would like to give special thanks to David Aronberg for preparing this manual. The suggestions and
comments of Michelle Stephens were taken into account at all stages of this project and we appreciate her
patience with us. Lucy Hooper has been a great team member and her secretarial skills are indispensable.
Special thanks are also due to Ingrid Newman and Sabuhi Chadrey for proofreading the manual at its
various stages.
Finally we would like to thank all of our users and customers that have contributed their comments and
suggestions for improving AllWebMenus and the services we offer. It is our aim to listen to all of them
carefully in order to bring the best possible result for them. We couldn't have done without you guys!
Contents
I
Table of Contents
Part I Introduction
6
1 What is AllWebMenus
................................................................................................................................... 6
2 What's new!
................................................................................................................................... 7
3 Why Register
................................................................................................................................... 10
4 Terminology
................................................................................................................................... 11
5 About Likno
................................................................................................................................... 13
Part II User Interface
16
1 Main window
...................................................................................................................................
layout
16
2 Keyboard...................................................................................................................................
shortcuts
16
Part III Commands
20
1 Command:
...................................................................................................................................
File
20
2 Command:
...................................................................................................................................
Edit
21
3 Item
................................................................................................................................... 22
Command:
Command:
Command:
Command:
Add Item
.......................................................................................................................................................... 22
Delete..........................................................................................................................................................
Item
22
Move Item
..........................................................................................................................................................
Up
23
Move Item
..........................................................................................................................................................
Down
23
4 Submenu................................................................................................................................... 23
Command: Add Submenu
.......................................................................................................................................................... 23
Command: Delete..........................................................................................................................................................
Submenu
24
5 Style
................................................................................................................................... 24
Command:
Command:
Command:
Command:
6 Tools
Pick Style
.......................................................................................................................................................... 24
Apply Style
.......................................................................................................................................................... 25
Create..........................................................................................................................................................
New Style from Menu
25
Open Style
..........................................................................................................................................................
Gallery
26
................................................................................................................................... 28
Command: Preview
..........................................................................................................................................................
Menu
28
Command: Compile
..........................................................................................................................................................
Menu
28
Command: Link Compiled
..........................................................................................................................................................
Menu to Web Pages
30
Compile Properties.......................................................................................................................................................... 32
Compile Properties
......................................................................................................................................................... 32
Compile Properties:
.........................................................................................................................................................
Folders
32
Compile Properties:
.........................................................................................................................................................
Cross-Frame Support
33
Compile Properties:
.........................................................................................................................................................
Optimization
35
Compile Properties:
.........................................................................................................................................................
FrontPage Support
35
Options
.......................................................................................................................................................... 37
Command: Open
.........................................................................................................................................................
Tip of the Day on Startup
37
Command: Open
.........................................................................................................................................................
Preview Window on Startup
37
7 Command:
...................................................................................................................................
Help
37
I
II
Part IV Properties
40
1 Properties
...................................................................................................................................
Overview
40
2 Property groups
................................................................................................................................... 40
Global Properties .......................................................................................................................................................... 40
Main Menu Properties
.......................................................................................................................................................... 41
Submenu Properties
.......................................................................................................................................................... 42
Item Properties .......................................................................................................................................................... 44
3 Property types
................................................................................................................................... 45
Style Properties .......................................................................................................................................................... 45
Content Properties.......................................................................................................................................................... 47
4 Properties
...................................................................................................................................
Description
48
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Movable.......................................................................................................................................................... 48
Menu Drifts
..........................................................................................................................................................
on Scroll
49
Position..........................................................................................................................................................
Relative to
49
Horizontal
..........................................................................................................................................................
Distance from Edge
50
Vertical ..........................................................................................................................................................
Distance from Edge
51
Sticky Submenus
.......................................................................................................................................................... 51
Z-Index .......................................................................................................................................................... 52
Main Menu/Submenu
..........................................................................................................................................................
Name
53
Main Menu/Submenu
..........................................................................................................................................................
Type
53
PopUp .......................................................................................................................................................... 54
Main Menu
..........................................................................................................................................................
Appears - How
56
Main Menu
..........................................................................................................................................................
Unfolds Towards
56
Submenu
..........................................................................................................................................................
Opens - When
56
Submenu
..........................................................................................................................................................
Opens - Where
57
Submenu
..........................................................................................................................................................
Opens - At Distance
58
Submenu
..........................................................................................................................................................
Opens - How
58
Submenu
..........................................................................................................................................................
Unfolds Towards
58
Submenu
..........................................................................................................................................................
Aligns with
59
Title Contains
.......................................................................................................................................................... 60
Title Image
.......................................................................................................................................................... 60
Title Image
..........................................................................................................................................................
Alignment
61
Title Content
..........................................................................................................................................................
Alignment
62
Title Tooltip
.......................................................................................................................................................... 62
Title Cursor
.......................................................................................................................................................... 62
Title Padding
.......................................................................................................................................................... 63
Title Text
..........................................................................................................................................................
Font
63
Title Text
..........................................................................................................................................................
Size
63
Title Text
..........................................................................................................................................................
Bold
64
Title Text
..........................................................................................................................................................
Italic
64
Title Text
..........................................................................................................................................................
Underlined
64
Title Text
..........................................................................................................................................................
Color
64
Title BG..........................................................................................................................................................
Color
65
Title Border
..........................................................................................................................................................
Style
65
Title Border
..........................................................................................................................................................
Width
66
Title Border
..........................................................................................................................................................
Color
66
Main Menu/Submenu
..........................................................................................................................................................
BG Color
66
Main Menu/Submenu
..........................................................................................................................................................
BG Image
67
Main Menu/Submenu
..........................................................................................................................................................
Border Style
67
Main Menu/Submenu
..........................................................................................................................................................
Border Width
68
Main Menu/Submenu
..........................................................................................................................................................
Border Color
68
Contents
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
Property:
III
Distance..........................................................................................................................................................
Between Items
68
Uniform..........................................................................................................................................................
Item Widths
69
Uniform..........................................................................................................................................................
Item Heights
70
Javascript
..........................................................................................................................................................
Command on Appear
71
Javascript
..........................................................................................................................................................
Command on Disappear
71
Item Name
.......................................................................................................................................................... 71
Item Contains
.......................................................................................................................................................... 72
Item Image
.......................................................................................................................................................... 73
Item Image
..........................................................................................................................................................
Alignment
73
Item Content
..........................................................................................................................................................
Alignment
74
Item Tooltip
.......................................................................................................................................................... 74
Item Cursor
.......................................................................................................................................................... 75
Item Padding
.......................................................................................................................................................... 75
Item Text
..........................................................................................................................................................
Font
75
Item Text
..........................................................................................................................................................
Size
76
Item Text
..........................................................................................................................................................
Bold
76
Item Text
..........................................................................................................................................................
Italic
76
Item Text
..........................................................................................................................................................
Underlined
76
Item Text
..........................................................................................................................................................
Color
77
"Has Submenu"
..........................................................................................................................................................
Image
77
Item Border
..........................................................................................................................................................
Style
78
Item Border
..........................................................................................................................................................
Width
78
Item Border
..........................................................................................................................................................
Color
78
Item BG..........................................................................................................................................................
Color
79
Item BG..........................................................................................................................................................
Image
79
Status bar
..........................................................................................................................................................
Text
80
Javascript
..........................................................................................................................................................
Command
80
URL
.......................................................................................................................................................... 81
Target Frame
.......................................................................................................................................................... 83
Part V How Do I...
86
1 "How Do ...................................................................................................................................
I" List
86
2 Find my INSTALLATION
...................................................................................................................................
ID
86
3 Register ................................................................................................................................... 86
4 Optimize ...................................................................................................................................
menus to improve building speed
87
5 Use my designed
...................................................................................................................................
menu on my web pages
87
6 Make an invisible
...................................................................................................................................
menu appear when hovering over an image
88
7 Create a transparent
...................................................................................................................................
menu
88
8 Design a ...................................................................................................................................
"ladder" menu
89
9 Highlight ...................................................................................................................................
the selected item
89
10 Make items
...................................................................................................................................
look like buttons
89
11 Transfer a...................................................................................................................................
style to other elements
89
12 Transfer a...................................................................................................................................
submenu to another parent item
89
13 Use images
................................................................................................................................... 89
14 Know if I ...................................................................................................................................
need to recompile or relink my menus with a new version
90
15 Link menus
...................................................................................................................................
to FrontPage Shared Borders
92
16 Position the
...................................................................................................................................
menu relative to a page element
92
III
IV
17 Use multiple
...................................................................................................................................
menus on the same page
94
Part VI What is...
96
1 The Alternative
...................................................................................................................................
URL
96
2 The three...................................................................................................................................
Item States
96
3 The two kinds
...................................................................................................................................
of Alignment
97
4 The different
...................................................................................................................................
background layers
98
5 The Pick ...................................................................................................................................
& Apply feature
99
6 The difference
...................................................................................................................................
between Main Menu and Submenu
100
7 The Element
...................................................................................................................................
Clipboard
100
8 The Javascript
...................................................................................................................................
menu-building Libraries
100
9 The HTML
...................................................................................................................................
menu-linking section
101
Part VII FAQ and Tips
104
1 Troubleshooting
................................................................................................................................... 104
2 Correct Placement
...................................................................................................................................
of the menu-linking HTML Section
105
Part VII Frequently Asked Questions
Index
108
111
Introduction
Part
I
6
1
Introduction
1.1
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).
Introduction
7
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.
1.2
What's new!
Legend:
+
means added feature
*
means improved/changed feature
means bug fixed
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
- Macintosh bugs fixed
- 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)
8
+ 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 topleft 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>
Introduction
9
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>
* 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
10
1.3
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.
Introduction
1.4
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]
11
12
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
Introduction
13
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 )
1.5
About Likno
Likno 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:
[email protected]
Our web site is located at http://www.likno.com
User Interface
Part
II
16
2
User Interface
2.1
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.
2.2
Keyboard shortcuts
There are several shortcuts defined for quicker access to frequently used functions:
· F1
User Interface
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
17
Commands
Part
III
20
3
Commands
3.1
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.
Commands
3.2
21
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.
22
3.3
Item
3.3.1
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
3.3.2
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.
Commands
23
See also
Add Item
3.3.3
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
3.3.4
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
3.4
Submenu
3.4.1
Command: Add Submenu
Add Submenu
Creates a submenu for the selected item.
24
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
3.4.2
Command: Delete Submenu
Delete Submenu
Deletes the selected submenu along with all its child elements.
See also
Add Submenu
3.5
Style
3.5.1
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.
Commands
25
The Pick Style command does not store any Content properties.
See also
Apply Style
3.5.2
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
3.5.3
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
26
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
3.5.4
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:
Commands
· 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
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
27
28
3.6
Tools
3.6.1
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
in the application toolbar or
in the Preview Menu window. The flag will then return to green.
3.6.2
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)
Commands
29
Step 4. Upload the web pages that contain the menu link
(note: steps 2 & 4 are not necessary if you have alreadylinked 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 versionwith an improvedHTML 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 awmDatamenuname 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\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
30
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 Use my designed menu on my web pages
3.6.3
Command: Link Compiled Menu to Web Pages
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:
Commands
31
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
32
How Do I Link menus to FrontPage Shared Borders
3.6.4
Compile Properties
3.6.4.1
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
3.6.4.2
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:
Commands
33
Libraries Folder:
allmenusdata
Images Folder: allmenusdata
Libraries Folder:
../allmenusdata
Images Folder: ../allmenusdata
Libraries Folder:
allmenuslibs
Images Folder: allmenusimages
Libraries Folder:
../allmenuslibs
Images Folder: ../allmenusimages
3.6.4.3
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.
34
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="main" src=" main_page.htm" target="_self">
menuname.js should be linked to the left_page.htm,
Commands
35
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.
3.6.4.4
This topic is described in detail in the "Optimize menus to improve building speed " section.
3.6.4.5
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
36
"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>
</table>
<table>
</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:
<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></table>
<table border="0" cellpadding="0" cellspacing="0"
width="100"><tr>
<td valign="top">
THIS IS YOUR MAIN PAGE CONTENT <p>This is really the body of my page. END
MAIN PAGE
</td></tr></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
Commands
37
3.6.5
Options
3.6.5.1
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.
3.6.5.2
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.
3.7
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.
38
About
Displays the About box of AllWebMenus. This is where you can find your unique Installation ID
required for your registration.
Properties
Part
IV
40
4
Properties
4.1
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
4.2
Property groups
4.2.1
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
Properties
4.2.2
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?
See also
Properties Overview
Submenu Properties
41
42
4.2.3
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.
Properties
See also
Properties Overview
43
44
4.2.4
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.
See also
Properties Overview
The Three Item states
Properties
4.3
Property types
4.3.1
Style Properties
45
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
Item Contains
Content
Style
46
Item Image
Item Image Alignment
Item Content Alignment
Item Tooltip
Item Cursor
Item Padding
Item Text Font
Item Text Size
Item Text Bold
Item Text Italic
Item Text Underlined
Item Text Color
"Has Submenu" Image
Item Border Style
Item Border Width
Item Border Color
Status Bar Text
Javascript Command
URL
Target Frame
Content
Style
Style
Content
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Content
Content
Content
Content
See also
Content Properties
Pick & Apply functions
Properties
4.3.2
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 Type
PopUp (Main Menu only)
Main Menu Appears - How (Main Menu only)
Main Menu Unfolds Towards (Main Menu only)
Submenu Opens - When (Submenu only)
Submenu Opens - Where (Submenu only)
Submenu Opens - At Distance (Submenu only)
Submenu Opens - How (Submenu only)
Submenu Unfolds Towards (Submenu only)
Submenu Aligns with (Submenu only)
Title Contains
Title Image
Title Tooltip
Title Cursor
Title Padding
Title Text Font
Title Text Size
Title Text Bold
Title Text Italic
Title Text Underlined
Title Text Color
Title BG Color
Title Border Style
Title Border Width
Title Border Color
Main Menu/Submenu BG Color
Distance Between Items
Uniform Item Widths
Javascript Command on Appear
Javascript Command on Disappear
Content
Content
n/a
n/a
n/a
Style
Style
Style
Style
Style
Style
Style
Content
Style
Style
Content
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Content
Content
Item Properties
Property Type
Item Name
Item Contains
Item Image
Item Tooltip
Content
Style
Content
Style
Style
Content
47
48
Item Cursor
Item Padding
Item Text Font
Item Text Size
Item Text Bold
Item Text Italic
Item Text Underlined
Item Text Color
"Has Submenu" Image
Item Border Style
Item Border Width
Item Border Color
Status Bar Text
Javascript Command
URL
Target Frame
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Style
Content
Content
Content
Content
See also
Style Properties
4.4
Properties Description
4.4.1
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
Properties
4.4.2
49
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.
4.4.3
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:
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
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
50
Left Edge - Vertically Centered
Right Edge - Vertically Centered
Top Edge - Horizontally Centered
Bottom Edge - Horizontally Centered
Applies to:
Type:
n/a
See also
Horizontal Distance from Edge
Vertical Distance from Edge
4.4.4
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".
Values:
a positive number in pixels
Applies to:
Type:
n/a
See also
Properties
51
Position Relative to
4.4.5
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".
Values:
Applies to:
Type:
n/a
See also
Position Relative to
4.4.6
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.
52
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.
4.4.7
Values:
yes/no
Applies to:
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 zindex 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:
Type:
n/a
Properties
4.4.8
53
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:
Example2:
Example3:
Site Menu
<b>More</b> Info
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
4.4.9
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)
54
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
4.4.10 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:
Properties
55
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
56
4.4.11 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
4.4.12 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
4.4.13 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:
Properties
57
· Clicking on the item :
Values:
On Mouse Over
On Mouse Click
Applies to:
Submenu
Type:
Style Property
4.4.14 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
58
4.4.15 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
4.4.16 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
4.4.17 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
Properties
59
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
4.4.18 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
60
4.4.19 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
Title Image
4.4.20 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"
Properties
61
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 Contains
4.4.21 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
The two kinds of Alignment
62
4.4.22 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
4.4.23 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:
ContentProperty
4.4.24 Property: Title Cursor
Allows you to change the shape of the cursor when the mouse passes over the Title.
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
Properties
63
4.4.25 Property: Title Padding
A number of pixels added between the Title's content and its edges.
Values:
Example:
3
Applies to:
Main Menu/Submenu
Type:
Style Property
4.4.26 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 systemspecific 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
4.4.27 Property: Title Text Size
Sets the font size of the Title's text.
You need to click the
button to set values for this property.
Values:
CSS or browser-relative values
Applies to:
Main Menu/Submenu
Type:
Style Property
64
4.4.28 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
4.4.29 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
4.4.30 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
4.4.31 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
Properties
65
4.4.32 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.
the "..." button.
Values:
Applies to:
Main Menu/Submenu
Type:
Style Property
See also
The different background layers
4.4.33 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
66
4.4.34 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
4.4.35 Property: Title Border Color
Specifies the color of the Title's border, if any.
the "..." button.
Values:
Applies to:
Main Menu/Submenu
Type:
Style Property
See also
Title Border Style
4.4.36 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.
the "..." button.
Properties
Values:
Applies to:
Main Menu/Submenu
Type:
Style Property
67
See also
4.4.37 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
image.gif".
Note 2
Values:
Applies to:
Main Menu/Submenu
Type:
Style Property
See also
4.4.38 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:
Applies to:
Main Menu/Submenu
Type:
Style Property
68
See also
Title Border Style
Item Border Style
4.4.39 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
4.4.40 Property: Main Menu/Submenu Border Color
Specifies the color of the Main Menu/Submenu border, if any.
the "..." button.
Values:
Applies to:
Main Menu/Submenu
Type:
Style Property
See also
4.4.41 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
Properties
69
"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
4.4.42 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
2nd menu
The <Uniform Item Widths> is set to "no"
The <Uniform Item Widths> is set to "yes"
70
Values:
yes/no
Applies to:
Main Menu/Submenu (Horizontal only)
Type:
Style Property
See also
4.4.43 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
2nd menu
The <Uniform Item Heights> is set to "no"
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
Properties
71
4.4.44 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
Example:
alert("Hello");
Applies to:
Main Menu/Submenu
Type:
Content Property
(any javascript command)
4.4.45 Property: Javascript Command on Disappear
A javascript code to be executed upon disappearance of the Main Menu/Submenu.
(;).
Note!
Values:
Text
Example:
alert("Hello");
Applies to:
Main Menu/Submenu
Type:
Content Property
4.4.46 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
Example1:
Example2:
Company Info
<b>More</b> Info
(HTML tags are accepted too)
72
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
4.4.47 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
Properties
73
4.4.48 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
image.gif".
Note 2
Values:
Applies to:
Item
Type:
Content Property
See also
4.4.49 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
74
(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
4.4.50 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
4.4.51 Property: Item Tooltip
Text that appears above the item when the user pauses the mouse pointer over the item.
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
Values:
Text
Applies to:
Item
Type:
ContentProperty
(on [Mouse Over] state only)
Properties
75
4.4.52 Property: Item Cursor
Allows you to change the shape of the cursor when the mouse passes over the item.
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
Type:
Style Property
(on [Mouse Over] state only)
4.4.53 Property: Item Padding
A number of pixels added between the item's content and its edges.
Values:
Example:
3
Applies to:
Item
Type:
Style Property
4.4.54 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.
Values:
Serif, Sans-Serif, Cursive, Fantasy, Monospace
and all fonts installed on your system
Applies to:
Item
Type:
Style Property
76
4.4.55 Property: Item Text Size
Sets the font size of the item's text.
You need to click the
button to set values for this property.
Values:
CSS or browser-relative values
Applies to:
Item
Type:
Style Property
4.4.56 Property: Item Text Bold
Specifies if the item's text is displayed bold or not.
Values:
yes/no
Applies to:
Item
Type:
Style Property
4.4.57 Property: Item Text Italic
Specifies if the item's text is displayed Italic or not.
Values:
yes/no
Applies to:
Item
Type:
Style Property
4.4.58 Property: Item Text Underlined
Specifies if the item's text is displayed Underlined or not.
Values:
yes/no
Applies to:
Item
Type:
Style Property
Properties
77
4.4.59 Property: Item Text Color
Sets the color of the item's text.
the "..." button.
Values:
Applies to:
Item
Type:
Style Property
4.4.60 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
image.gif".
Note 2
Values:
Applies to:
Item
Type:
Style Property
See also:
Style Properties
78
4.4.61 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:
Applies to:
Item
Type:
Style Property
See also
4.4.62 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
4.4.63 Property: Item Border Color
Specifies the color of the item's border, if any.
the "..." button.
Values:
Applies to:
Item
Type:
Style Property
Properties
79
See also
Item Border Style
4.4.64 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.
the "..." button.
Values:
Applies to:
Item
Type:
Style Property
See also
4.4.65 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
image.gif".
Note 2
Values:
Applies to:
Item
80
Type:
Style Property
See also
4.4.66 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
4.4.67 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.
(;).
Note!
Values:
Text
Example:
alert("Hello");
Applies to:
Item
Type:
Content Property
Properties
81
4.4.68 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:[email protected]
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\company.html
|
|
...
|
| c:\mysite\products\product.html |
82
| ----------------------------------------------- |
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:
company.html
/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:
../products/product.html
/products/product.html
For the item that opens the company page:
../company.html
/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:
Example2:
Example3:
Example3:
index.html
index.html#anchor
http://www.likno.com
mailto:[email protected]
Applies to:
Item
Type:
Content Property
See also
FAQ section for upgrading from version 1.2 or earlier
Properties
83
4.4.69 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 nonframed 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="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:
Example2:
Example3:
Example4:
main
new
top
Applies to:
Item
Type:
Content Property
(remains blank - default value)
(the assigned frame name inside the frameset definition)
84
See also:
URL
How Do I...
Part
V
86
5
How Do I...
5.1
"How Do I" List
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
·
5.2
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.
5.3
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.
How Do I...
87
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.
5.4
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, t here 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.
5.5
Use my designed menu on my web pages
To use a menu in your web pages you must take the following four steps:
Step
Step
Step
Step
1. Compile the menu
2. Link the compiled menu to your web pages
3. Upload the necessary menu files
4. Upload the web pages that contain the menu link
88
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
5.6
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
5.7
Create a transparent menu
Set all background colors to "Transparent"
Set all background images to "no_image"
Optional: Set all border styles to "none"
How Do I...
5.8
89
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
5.9
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.
5.10
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.
5.11
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.
5.12
1. Select the submenu
2. Cut the submenu (this applies to its children too)
3. Select the new parent item
4. Paste the submenu
5.13
Use images
Menus can contain images in the following ways:
90
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.
5.14
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 #452 and below. Also, 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.
2. This new version requires that you relink all 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
How Do I...
Date
02/23/02
02/12/02
02/01/02
06/15/01
earlier
Application
v2.0.456
v2.0.454
v2.0.452
v1.3.360
older versions
Libs
#118 (new)
#116
#112
n/a
n/a
91
HTML
[2]
[2]
[2] (new)
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
future
now
Application
Libs
v2.3.900
#804 (new)
v2.0.452
#112
HTML
[4] (new)
[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
future
now
Application
Libs
v2.3.900
#804 (new)
v2.0.452
#112
HTML
[2] (no change)
[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
future
now
Application
Libs
HTML
v2.3.900
#112 (no change) [2] (no change)
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
92
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 menubuilding 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 awmDatamenuname folder, always provided that the new application description states this clearly.
See also
Compile Menu
5.15
Link menus to FrontPage Shared Borders
This topic is described in detail in the "Compile Properties, FrontPage Support" section.
5.16
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
How Do I...
93
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;
94
</script>
Obviously, you should place this code before your AllWebMenus menu-linking code 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.
5.17
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
What is...
Part
VI
96
6
What is...
6.1
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
6.2
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:
What is...
97
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
button can make our life easier; it
copies the property value of the "Normal" state to its "Mouse Over" and "Mouse Click" states.
6.3
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:
Image Alignment:
Center
Right of Text
Content Alignment:
Right
98
Image Alignment:
Left of Text
Content Alignment:
Image Alignment:
Right
Above Text
See also
6.4
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 backgroundthat may only be filled with a color (no BG imagefor the Title)
See the following example:
What is...
99
· 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
6.5
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
100
6.6
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 - At Distance
Submenu Aligns with
6.7
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
6.8
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
What is...
101
generates the menu based on its definition.
6.9
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:

<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>

FAQ and Tips
Part
VII
104
7
FAQ and Tips
7.1
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:
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.
FAQ and Tips
105
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 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
7.2
Correct Placement of the menu-linking HTML 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:

<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>

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
106
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
Part
VII
108
8
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
109
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:\m ysite\pageA.html
c:\m ysite\pageB.html
c:\m ysite\pageC.html
c:\m ysite\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
110
-the awmmenupath.gif file
-the awmData-menu 2 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-menu 2 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.
Index
Index
-FFAQ 108
File 20
-""Has Submenu" Image
-GGlobal Properties
6
Compile Menu 28
Compile Properties 32
Compile Properties: Cross-Frame Support 33
Compile Properties: Folders 32
Compile Properties: FrontPage Support 35
35
Content Properties 47
Copy Item/Submenu 21
Correct Placement of the menu-linking HTML
Section 105
Create a new style in Style Gallery
25
Cut Item/Submenu
21
-DDelete a menu style from Style Gallery
Delete Item 22
Delete Submenu 24
Display Name in Title
60
Distance Between Items 68
Edit
Exit
21
20
40
-H-
-C-
-E-
108
77
-AAbout Likno 13
Add Item 22
Add Submenu 23
AllWebMenus information
Apply Style 25
111
26
Help 37
Horizontal Distance from Corner 92
Horizontal Distance from Edge 50
How Do I 86
Create a transparent menu 88
Design a "ladder" menu 89
Find my LICENSE ID
86
89
Know if I need to recompile or relink my menus
with a new version 90
Link menus to Frontpage Shared Borders 92
Make an invisible menu appear when hovering
over an image 88
Make items look like buttons 89
Optimize menus to improve building speed 87
92
Register 86
89
89
Use images 89
Use multiple menus on the same page 94
Use my designed menu on my web pages 87
-IItem
Item
Item
Item
Item
Item
Item
Item
BG Color
79
BG Image
79
Border Color 78
Border Style 78
Border Width
78
Contains 72
Content Alignment
Cursor 75
74
112
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Image 73
Image Alignment
Name 71
Padding 75
Properties 44
Text Bold 76
Text Color 77
Text Font 75
Text Italic 76
Text Size 76
Text Underlined
Tooltip 74
-N-
73
New
-O76
-JJavascript Command 80
Javascript Command on Appear 71
Javascript Command on Disappear 71
16
-LLayout 16
License ID
86
Link Compiled Menu to Web Pages
Open 20
Open Preview Window on Startup 37
Open Style Gallery 26
Open Submenus - How 58
Open Submenus - When 56
Open Tip of the Day on Startup 37
Optimization techniques 87
Optimize menus 87
-PPaste Item/Submenu
21
Pick Style 24
PopUp 54
Position Relative to 49
Preview Menu 28
Properties Overview
40
-KKeyboard shortcuts
20
-R30
-MMain Menu Appears - How 56
Main Menu Properties 41
Main Menu Unfolds Towards 56
Main Menu/Submenu BG Color 66
67
68
Main Menu/Submenu Border Style 67
68
53
Main Menu/Submenu Type 53
Main window layout 16
Menu Drifts on Scroll
49
Movable
48
Move Item Down 23
Move Item Up 23
Re-compile a menu compiled with version 1.3.358 or
below 28
Register 86
Registration 86
-SSave
20
Save As 20
Shortcuts 16
Status bar Text 80
Sticky Submenus 51
Style Gallery
26
Style Properties 45
Submenu Aligns with 59
Submenu Opens - At Distance 58
57
Submenu Properties 42
Submenu Unfolds Towards 58
Index
The three Item states 96
What's new! 7
Why Register 10
-TTarget Frame
83
Terminology 11
Title BG Color 65
Title Border Color
66
Title Border Style 65
Title Border Width
66
Title Contains 60
62
Title Cursor
62
Title Image
60
61
Title Padding 63
Title Text Bold 64
Title Text Color
64
Title Text Font 63
Title Text Italic
64
Title Text Size 63
Title Text Underlined 64
Title Tooltip 62
Troubleshooting 104
-ZZ-Index
-UUniform Item Heights
70
Uniform Item Widths
69
Update a menu style in Style Gallery
URL 81
26
-VVertical Distance from Corner 92
Vertical Distance from Edge 51
-WWhat is 96
The alternative web page 96
The difference between Main Menu and
Submenu 100
The different background layers 98
The Element Clipboard
100
The HTML menu-linking section 101
The Javascript menu-building Libraries
The Pick & Apply feature 99
100
52
97
113

AllWebMenus Help

Transcription

Similar documents

July, 1993 - Stumpf Welding Supplies

View our Events Brochure

Setting an Android Device to AutoFill Password Fields in

brightsign xd smart menu board

Published in Western Horseman - July, 2001

Customize Your Profile - Division of Student Affairs

Happy Hour Menu - Toulouse Petit

Tektronix TDS 210 Quick Start

Untitled - CooGiE`s Cafe Santa Monica

TALLULA PRIVATE EVENTS | FREQUENTLY ASKED QUESTIONS