AllWebMenus Manual

User's Guide

© 2000-2014 Likno Software, all rights reserved

AllWebMenus The Complete Tool for Powerful and Effective Web Site Navigation by Likno

Likno Software is proud to have developed AllWebMenus, the most versatile system available for your web site navigation needs. After years of rigorous development, AllWebMenus brings you a full set of features which make cross-browser menu-making easier for the professional and amateur web developer. Additionally, new browser versions are continuously supported, making AllWebMenus the most complete cross-browser menu-making tool available. 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! The Likno Software team

AllWebMenus User's Guide © 2000-2014 Likno Software, all rights reserved 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 Software. 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: 13-Jan-14

Special thanks to: 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!

I

AllWebMenus User's Guide

Table of Contents 2

Part I Introduction

1 What is AllWebMenus ................................................................................................................................... 2 2 What's new

................................................................................................................................... 5

3 LITE vs. PRO ................................................................................................................................... - Where do they differ? 5 4 Why Register ................................................................................................................................... 6 5 Terminology ................................................................................................................................... 7 6 About

................................................................................................................................... 9

12

Part II Menus in 5 Easy Steps

1 Step 1: Creating ................................................................................................................................... your menu 12 2 Step 2: Linking ................................................................................................................................... your menu to your web page 12 3 Step 3: Positioning ................................................................................................................................... your menu inside your web pages 13 4 Step 4: Uploading ................................................................................................................................... your menu 14 5 Step 5: Saving ................................................................................................................................... your work 14

16

Part III User Interface

1 Main window................................................................................................................................... layout 16 2 Keyboard shortcuts ................................................................................................................................... 19

22

Part IV Commands

1 Command: File ................................................................................................................................... 22 2 Command: Edit ................................................................................................................................... 23 3 Command: View ................................................................................................................................... 24 4 Structure

................................................................................................................................... 24

Command: Add .......................................................................................................................................................... Item - Before Selected Command: Add .......................................................................................................................................................... Item - After Selected Command: Add .......................................................................................................................................................... Child Item (in Submenu Group) Command: Add .......................................................................................................................................................... Separator Command: Move .......................................................................................................................................................... Item Up Command: Move .......................................................................................................................................................... Item Down Command: Move .......................................................................................................................................................... Item Left Command: Move .......................................................................................................................................................... Item Right Command: Delete .......................................................................................................................................................... Item Command: Delete .......................................................................................................................................................... Entire Submenu Group Command: Change .......................................................................................................................................................... Item/Group to Hidden/Visible

5 Theme

24 25 25 25 26 26 26 27 27 27 27

................................................................................................................................... 28

Command: Apply .......................................................................................................................................................... Theme to Menu Command: Save .......................................................................................................................................................... Custom Theme Command: Export .......................................................................................................................................................... all Custom Themes Command: Import .......................................................................................................................................................... to Custom Themes

28 29 29 30

© 2000-2014 Likno Software, all rights reserved

Contents

II

Command: Open .......................................................................................................................................................... Example Menu Project

6 Tools

30

................................................................................................................................... 30

Command: Refresh .......................................................................................................................................................... Menu Preview Command: Compile .......................................................................................................................................................... Menu Command: Project .......................................................................................................................................................... Properties Compile Properties ......................................................................................................................................................... Compile Properties: ......................................................................................................................................... Folders Compile Properties: ......................................................................................................................................... Menu Structure Source Compile Properties: ......................................................................................................................................... Menu Genre (at "Menu Editor" interface) Compile Properties: ......................................................................................................................................... SEO Compile Properties: ......................................................................................................................................... Cross-Frame Support Compile Properties: ......................................................................................................................................... Optimization Compile Properties: ......................................................................................................................................... Menu-Linking Code in Tags Compile Properties: ......................................................................................................................................... FrontPage Support Compile Properties: ......................................................................................................................................... Advanced Scripting Compile Properties: ......................................................................................................................................... Custom Variables Compile Properties: ......................................................................................................................................... RTL Languages Support Compile Properties: ......................................................................................................................................... Menu Printing Compile Properties: ......................................................................................................................................... Link & Run Other Likno Projects Preview Panel ......................................................................................................................................................... Settings Project Info ......................................................................................................................................................... Settings Command: Link .......................................................................................................................................................... Compiled Menu to Web Pages Command: External .......................................................................................................................................................... Multi Editing Command: Import .......................................................................................................................................................... FrontPage Navigation Structure Create Sitemaps .......................................................................................................................................................... Command: ......................................................................................................................................................... Create Generic Sitemap Command: ......................................................................................................................................................... Create Google Sitemap Command: ......................................................................................................................................................... Create ROR Sitemap Command: Batch .......................................................................................................................................................... Compile Multiple Projects Command: Customize .......................................................................................................................................................... General ......................................................................................................................................................... Defaults ......................................................................................................................................................... Preview Panel Settings ......................................................................................................................................... Project Info Settings ......................................................................................................................................... RTL Languages......................................................................................................................................... Support Menu-Linking Code ......................................................................................................................................... in Tags

30 31 33 34 34 36 40 46 48 50 51 51 53 54 58 58 59 59 60 60 61 71 74 74 75 76 77 77 77 78 79 79 79 79

Part V Command: Add-ins

81

Part VI Command: Help

83

Part VII Properties

85

1 Properties Overview ................................................................................................................................... 85 2 Property groups ................................................................................................................................... 86 Group Properties .......................................................................................................................................................... Item Properties ..........................................................................................................................................................

86 87

3 Property types ................................................................................................................................... 88 Style Properties .......................................................................................................................................................... Content Properties ..........................................................................................................................................................

88 89

4 Properties Description ................................................................................................................................... 91 Property: Header .......................................................................................................................................................... Text

91

© 2000-2014 Likno Software, all rights reserved

II

III

AllWebMenus User's Guide 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: Property: Property: Property: Property: Property: Property: Property: Property: Property: Property: Property: Property: Property: Property:

Header .......................................................................................................................................................... Image Positioning .......................................................................................................................................................... Movable .......................................................................................................................................................... Menu .......................................................................................................................................................... Floats on Scroll Sticky .......................................................................................................................................................... Submenus Show .......................................................................................................................................................... Item or Group on Appear Header .......................................................................................................................................................... Tooltip Footer .......................................................................................................................................................... Text Footer .......................................................................................................................................................... Image Footer .......................................................................................................................................................... Tooltip Z-Index .......................................................................................................................................................... Keyboard .......................................................................................................................................................... Navigation Responsive .......................................................................................................................................................... Menu Visible .......................................................................................................................................................... When PopUp .......................................................................................................................................................... Javascript .......................................................................................................................................................... Command on Appear Javascript .......................................................................................................................................................... Command on Disappear Assigned .......................................................................................................................................................... Style Type .......................................................................................................................................................... Has .......................................................................................................................................................... Header Has .......................................................................................................................................................... Footer Appears .......................................................................................................................................................... - Where Appears .......................................................................................................................................................... - Aligned with Appears .......................................................................................................................................................... - How Disappears .......................................................................................................................................................... - How Opacity .......................................................................................................................................................... Group .......................................................................................................................................................... Background Color Group .......................................................................................................................................................... Background Tile Image Group .......................................................................................................................................................... Padding Group .......................................................................................................................................................... Border Group .......................................................................................................................................................... Rounded Corners Group .......................................................................................................................................................... Shadow Distance .......................................................................................................................................................... Between Items Group .......................................................................................................................................................... Minimum Width Item .......................................................................................................................................................... Text Item .......................................................................................................................................................... Image Item .......................................................................................................................................................... Link Item .......................................................................................................................................................... Link Target Item .......................................................................................................................................................... Status Bar Text Item .......................................................................................................................................................... Tooltip Item .......................................................................................................................................................... Has Separator Item .......................................................................................................................................................... Javascript Command Item .......................................................................................................................................................... Open Modal Window Item .......................................................................................................................................................... Content Alignment Item .......................................................................................................................................................... Text Font Item .......................................................................................................................................................... Text Size Item .......................................................................................................................................................... Text Decoration Item .......................................................................................................................................................... Text Color Item .......................................................................................................................................................... Padding Item .......................................................................................................................................................... Text Margin Item .......................................................................................................................................................... Border Item .......................................................................................................................................................... Rounded Corners Item .......................................................................................................................................................... Shadow Item .......................................................................................................................................................... Background Color

92 92 102 102 103 104 109 110 111 111 112 112 112 114 115 116 116 117 117 123 124 125 125 127 128 129 129 130 130 131 131 133 134 135 135 137 138 140 142 142 143 143 144 146 146 147 147 148 148 148 148 149 151 152

© 2000-2014 Likno Software, all rights reserved

Contents Property: Property: Property: Property: Property: Property: Property: Property: Property:

IV

Item .......................................................................................................................................................... Background Image 1 Item .......................................................................................................................................................... Background Tile Image Item .......................................................................................................................................................... Background Image 2 Item .......................................................................................................................................................... Size Item .......................................................................................................................................................... Foreground Image Item .......................................................................................................................................................... Floating Image Item .......................................................................................................................................................... "Has Submenu" Image Item .......................................................................................................................................................... Cursor Item .......................................................................................................................................................... Tooltip Style

Part VIII How Do I...

153 154 156 157 157 158 159 159 160

165

1 "How Do I" ................................................................................................................................... List 165 2 Find my INSTALLATION ................................................................................................................................... ID 165 3 Purchase/Activate ................................................................................................................................... 166 4 Use AllWebMenus ................................................................................................................................... with my favorite Web Authoring tool 167 5 Link menus................................................................................................................................... to FrontPage Shared Borders 167 6 Position the................................................................................................................................... menu relative to a page element 167 7 Specify which ................................................................................................................................... pages contain a menu, using the FrontPage interface 167 8 Use multiple ................................................................................................................................... menus on the same page 168 9 Optimize menus ................................................................................................................................... to improve building speed 169 10 Create a Site ................................................................................................................................... Map from my menu structure 170 11 Replace the................................................................................................................................... default right-click menu used by the browser 170 12 Import a FrontPage ................................................................................................................................... Navigation Structure into AllWebMenus 171 13 Make my submenus ................................................................................................................................... appear *in front* of Flash Objects, Java Applets or Select Boxes 171 14 Make my menus ................................................................................................................................... appear *under* modal boxes, slideshows, lightbox dialogs, etc. 174 15 Show a specific ................................................................................................................................... item (or submenu) as selected (highlighted) when loading the page 174 16 Use my designed ................................................................................................................................... menu on my web pages 175 17 Create a transparent ................................................................................................................................... menu 175 18 Make items................................................................................................................................... look like buttons 176 19 Transfer a style ................................................................................................................................... to other elements 176 20 Transfer a submenu ................................................................................................................................... group to another parent item 176 21 Setup the Compile ................................................................................................................................... Properties of an older version awm project 176 22 Customize a ................................................................................................................................... menu with "sliding" submenu groups 177

Part IX What is...

183

1 The three Item ................................................................................................................................... States 183 2 The two kinds ................................................................................................................................... of Alignment 184 3 The Assigned ................................................................................................................................... Style and Available Styles 185 4 The Image Manager ................................................................................................................................... 194 5 The Alternative ................................................................................................................................... URL 197 6 The different ................................................................................................................................... background layers 198 7 The Paste Values ................................................................................................................................... feature 199

© 2000-2014 Likno Software, all rights reserved

IV

V

AllWebMenus User's Guide 8 The difference ................................................................................................................................... between Main Menu and Submenu 199 9 The Element ................................................................................................................................... Clipboard 199 10 The Javascript ................................................................................................................................... menu-building Libraries 200 11 The HTML menu-linking ................................................................................................................................... code 200 12 The Internet................................................................................................................................... Explorer Information Bar Warning 201

Part X FAQ and Tips

206

1 Troubleshooting ................................................................................................................................... 206 2 Correct Placement ................................................................................................................................... of the menu-linking HTML code 207 3 Updating all................................................................................................................................... properties when changing the Web Site Root folder 208 4 "Full Admin................................................................................................................................... rights" and the activation process 209 5 Mouse Click................................................................................................................................... state ignored 210

Part XI Frequently Asked Questions Index

213 215

© 2000-2014 Likno Software, all rights reserved

Introduction

Part

I

2

AllWebMenus User's Guide

1

Introduction

1.1

What is AllWebMenus Create Menus in 5 Easy Steps

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 (like Firefox, Internet Explorer, Google Chrome, Opera, Mozilla, Konqueror, Safari and more). 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 DHTML-enabled browsers!

Major Features Include: Compile and link menus to your web pages in no time and without any code required. Supported Authoring Tools: Adobe Dreamweaver with free Extension FrontPage with free Add-In and Navigation Structure import into AllWebMenus NetObjects Fusion with free component Adobe Golive Visual InterDev HomeSite HotDog HTML Kit 1st Page 2000 CoffeeCup HTML Editor Cool Page CuteHTML and many more... Import FrontPage Navigation Structures into AllWebMenus. Create Site Maps straight from the Menu Structure of menus.

© 2000-2014 Likno Software, all rights reserved

Introduction

3

Create menus fast by using pre-designed menu styles from the Theme Gallery. Use multiple menus in the same page. (version PRO only) Use many flexible ways to position your menus: Either using window coordinates or attaching it to any element inside the page. Create menus for use inside framed web sites. Use complete help for all properties and procedures. Press F1 while you are on a property to immediately receive Quick Help for that property. 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 ( property). Specify Javascript Commands to be executed when clicking on menu items. Specify Javascript Commands to be executed when a submenu appears/disappears or even when the Main Menu appears/disappears. Use both vertical and horizontal submenus at any possible combination. Use Titles on submenus and allow the user to drag the menu from its Title. Choose "How", "When" and "Where", any submenu appears. Use "Distance Between Items" and assign a "Status Bar Text" for each item. ...and many more (view the complete properties listing for more info).

Short list of new features added on version 5: (see updated, full list online) - Improved interface and design with many functional additions - Slide Menus (aka "sliding menus" or "slide-in menus") are now available. - Use your own HTML code on selected menu items to achieve enhanced formatting or advanced functionality, from a simple working link, up to forms, flash objects, search boxes, even full-scale web pages! (supported through the enhanced property) - Vertical Scrollbar for vertical Groups now available (supported through the enhanced property)

© 2000-2014 Likno Software, all rights reserved

4

AllWebMenus User's Guide

- Multiple Rows and Columns on submenus now available (also supported through the enhanced property) - The Horizontal Menubar feature now available for both Main Menu and Submenu Groups along with several enhancements (supported through the enhanced property) - New submenu appearance effects added with the ability to set custom appearance time delays (supported through the enhanced “Submenu Group Appears” property) - New submenu disappearance effects added with the ability to set custom disappearance time delays (supported through the new “Submenu Group Disappears” property) - More stylish dhtml menu Themes are now included in the installation for free. - New Examples of Javascript Menu Projects added. - The property is completely re-designed and enhanced with a new positioning option added; you can now easily position your dhtml menu relative to an image existent in your pages. - Ability to use custom variables instead of actual text in certain text-related properties has been added, allowing for more “dynamic” content in javascript menus. - 20 new Textures added in Image Gallery. - 20 new Buttons added in Image Gallery. - 54 new Bullets and Arrows added in Image Gallery. - 40 Icons now available into the new "Icons" Category of Image Gallery. - The Apply Theme dialog now allows you to view and choose Themes based on their ("Horizontal" or "Vertical" or "Vertical Sliding"), facilitating your theme selection goals. - Complete HTML is now available on every item, allowing you to show anything you like inside the item, like flash objects or even forms. (supported through the enhanced property) - Different colors on each border side (top, right, bottom, left) now available (supported through the enhanced property) - The Overline and Strikethrough options are now available for the item text. (supported through the enhanced property) - A "Refresh" button now appears at the top-right corner of any property when its values are edited.

© 2000-2014 Likno Software, all rights reserved

Introduction

5

- The "Menu Positioning" shortcut has been added. - The "Manual Trigger Groups - Get ID and Trigger Code" feature of the property is completely re-designed and enhanced, allowing for advanced positioning effects. - The "Ignore script in Preview Pane" option has been added in the 'Project Properties -> Advanced Scripting' form. - The "Change Item to Hidden/Visible" command has been added. - IE6 fix on select boxes (combos) now comes with more options to cover all cases (https websites for example). - The Main Menu Size now appears in Preview Pane, so that you have an estimation of how large the dhtml menu will render in actual browser. - The "Add Item Before" action now available when building the Javascript Menu Structure. …and many more!

---------Watch online demos on important features of AllWebMenus

1.2

What's new Please check the new features, enhancements and fixes of AllWebMenus by visiting the following page online: http://www.likno.com/whatsnew.html (PRO version) Note: We do not maintain a separate "what's new" section for the LITE version, as changes related to the LITE-supported features are also included in the LITE version.

1.3

LITE vs. PRO - Where do they differ? The LITE version is for the home user who wants to use simple, yet truly cross-browser menus, only for his or her personal web site. The PRO version is for the professional user who wants to implement feature-rich cross-browser menus, for as many web sites as needed. Both LITE and PRO versions use the same optimized menu-building libraries, allowing the LITE user to enjoy the same cross-browser support as the PRO user does. Both AllWebMenus LITE and AllWebMenus PRO share the same engine of extra optimized menu-building libraries. You can select among many menu styles and features for your menus, with the cross-browser, cross-platform assurance carried by AllWebMenus.

© 2000-2014 Likno Software, all rights reserved

6

AllWebMenus User's Guide

The main differences between AllWebMenus LITE and AllWebMenus PRO are found in the user interface – which was simplified with the use of menu styles for LITE users – and some of the properties which are available for the menu implementation. The following is a comparison table that displays the differences in the features and properties supported by AllWebMenus and AllWebMenus PRO: Features Use of images Multiple menus Import FrontPage Navigation Structure Create sitemaps Custom compile folders Cross-Frame support Menu Optimization FrontPage Support Support for advanced positioning method 2

LITE.............PRO no..................yes no..................yes yes................yes yes................yes no..................yes no..................yes yes................yes yes................yes no..................yes

* LITE version does not support different styles for different items, as the PRO version does. Many similar elements have a common style as specified in the Style Editor. In specific, there are four different style categories that define the appearance of the following menu elements: · The Main Menu area · The Items of the Main Menu (same style is applied to all Main Menu items) · The Submenu areas (same style is applied to all Submenus) · The Items of all submenus (same style is applied to all Submenu items)

To see the differences on all properties between LITE and PRO, please click on the following sections: Group Properties Item Properties See also Properties Overview

1.4

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 6 months and free updates for 1 year after registering your AllWebMenus installation. The compiled menus are fully functional in all major browsers. Apart from removing this restriction, there are many more good reasons to register your license: · Reliability: You get more than 10 years of accumulated experience in our javascripts development. · Support: You get quick and thorough answers from our dedicated support team plus detailed documentation.

© 2000-2014 Likno Software, all rights reserved

Introduction

7

· Value-added services: You get free monitoring of your menus (optional) and get notified when their scripts are outdated due to enhancements in technology. Build your menus and worry no more! · Growth: Your registration fee is invested in the rapid growth of AllWebMenus. More powerful features will be available to you.

1.5

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

Header/Footer Header is the top part of a Main Menu/Submenu. Bottom applies for the Footer.

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]

© 2000-2014 Likno Software, all rights reserved

8

AllWebMenus User's Guide

Ex: Submenu4 is a child of Item2 Ex: Item5 is a child of Submenu4 Ex: Item6 is a child of Submenu4 Parent of element [A] The element from which the element [A] directly derives

Ex: Item2 is the parent of Submenu4 Ex: Submenu4 is the parent of Item5 Ex: Submenu4 is the parent of Item6 Theme Gallery A collection of ready-made themes to apply to your menus. See also: Apply Theme to menu Style The appearance and behavior properties of the element. Multiple items may use the same style. Content The specific text, image, etc. 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" folder:

© 2000-2014 Likno Software, all rights reserved

Introduction

9

This is the folder where the following elements are placed upon compilation: - the awmlibX.js menu-building libraries and a dot.gif file (when the default "Javascript Menu" Genre is used) or just the awmcsslib.js menu-building library (when the "CSS Menu" Genre is used instead). - the images used in the menu design (if any), located at a separate "Menu images" subfolder of the "awmdata" folder. The dot.gif image file: (applies to the "Javascript menu" Genre only) This is a required file used to implement the cross-browser rendering of the menu. It is located inside the awmdata 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. You also have the option to include the "dot.gif" image file inside the "Menu images folder". Read here when and why. Implementations of the "CSS Menu" Genre do not need this file and do not produce it upon compilation. The awmlibX.js, "Javascript menu-building Libraries": (click here for definition) The "menu-linking code": (click here for definition)

1.6

About Likno Software is a software development company dedicated to creating 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_page.html For sales questions you may contact us at [email protected]. Our web site is located at http://www.likno.com Note: In case you came here to find your Installation ID, it can be found at the "Help -> Enter Activation Code" command of the application menu, as shown below:

© 2000-2014 Likno Software, all rights reserved

10

AllWebMenus User's Guide

© 2000-2014 Likno Software, all rights reserved

Menus in 5 Easy Steps

Part

II

12

AllWebMenus User's Guide

2

Menus in 5 Easy Steps

2.1

Step 1: Creating your menu Step 1 Creating your menu is quite easy: - A new item can be added by right clicking with your mouse in the place where you want the Item and pressing the "Add Item" selection in the menu that is displayed. - A new submenu group is added by right clicking the Item that will have the submenu and pressing on the "Add Submenu Group to Item" selection. - By highlighting an item you can view on the right panel the full set of its properties in each of the three states of the menu (Normal, On Mouse Over and On Mouse Click). You can modify each of the properties by clicking on the appropriate property box and entering the value that suits your needs. This will allow you to fully customize the menu. ---------Watch online demos on important features of AllWebMenus

2.2

Step 2: Linking your menu to your web page Step 2 The process of linking the produced menu to your web pages is remarkably simple: The first thing you need to do is Compile the menu that you have created. This can be done by selecting Tools->Compile Menu. If you have not specified your "Site_Root folder" already, the form "Compile Properties->Folders & Files" will appear asking you to specify the folder where your web site is locally stored. This is where your menu will be compiled. The compilation creates the file and a set of library files that make up the full set of javascript scripts that will run when your menu is displayed. After you compile the menu you will need to "Link" it to your web pages. You can do this by selecting Tools->Link Menu. The process of "linking" basically allows you to select the HTML documents that will carry the menu, and places the AllWebMenus Linking section at the beginning of those files. This linking section gives instructions to the web browser on the necessary files that will create your menu and points to the right directories for the images that you may have included in your menu. Always make sure that the AllWebMenus menu-linking section is not inserted within table tags ( ...you have to use the following: Examples: A menu (compiled as "menu.js") is attached to a table using the following code:

) or tags, as you may have problems with some browsers. The most safe position for the menu-linking code is at the beginning of the page, right after the tag. Note: AllWebMenus collaborates with all the common Web Authoring tools. In order to find out how your favorite Web Authoring tool integrates with AllWebMenus please visit our special on-line section at http://www.likno.com/web_authoring_tools.html Frontpage Shared Borders users should check the "Support Shared Borders" checkbox (found in Tools -> Project Properties -> Compile Properties->FrontPage Support) and always link to the bottom shared border, irrespective of where the menu will appear on the page. ---------Watch online demos on important features of AllWebMenus © 2000-2014 Likno Software, all rights reserved Menus in 5 Easy Steps 2.3 13 Step 3: Positioning your menu inside your web pages Step 3 After linking your menu to your pages, you may easily position it at your preferred spot using any of the following methods: Window-Relative Positioning (default method) Menu is positioned relative to a corner or edge of the browser window. Element-Relative Positioning (positioning relative to a Page Element) Menu is positioned next to a selected element of the page, after inserting a section at that particular position. All methods are explained thoroughly in the "How Do I -> Position the menu relative to a page element" section. Important Note! Do not move the "AllWebMenus menu-linking code" from the beginning of the page! (i.e. from right after the tag) If you do so, you may have problems with some browsers! If you cannot do otherwise, make sure that you check this option in "Project Properties": (use this option only if you have to) Positioning is implemented using the two positioning methods, not by moving this section from the beginning of the page. See Correct Placement of the menu-linking code for more info on why the position of the menu-linking code is irrelevant from the actual position where the menu is specified to appear. ---------Watch online demos on important features of AllWebMenus © 2000-2014 Likno Software, all rights reserved 14 2.4 AllWebMenus User's Guide Step 4: Uploading your menu Step 4 Once you have compiled and linked your menu to your pages, you will need to upload the files to your web server. The files created by AllWebMenus during the compilation phase are: ./menuname.js ./awmdata/ ./awmdata/dot.gif ./awmdata/*.js ./awmdata/menuname (folder) [image file, if "Javascript Menu" Genre is used] [all javascript library files] [folder with all image files used by the menu] where: ./ menuname denotes the current directory denotes the name you have chosen for the menu when you compiled All those files have to be uploaded to your web server using your favorite FTP tool. Make sure that the directory structure is kept exactly the same as is displayed here and also pay careful attention in order to keep the case of the files when they are uploaded. You have also to make sure that the files are placed in the same location relative to your HTML files as they are locally, in order for the directories that were automatically set in the AllWebMenus linking section to point to the right structure on your web server. ---------Watch online demos on important features of AllWebMenus 2.5 Step 5: Saving your work Step 5 Your menu can be saved in an awm project file so you can use/edit it in the future. Just use File->Save or File->Save As for this process. Once your file is modified you will need to compile it again (but not link it) and upload the new menuname.js file to your web server. The awmdata folder needs to be re-uploaded only if you re-compile your menu with a newer AllWebMenus version (since it may contain updated menu-building libraries) OR you have added or altered images used by your menu. ---------Watch online demos on important features of AllWebMenus © 2000-2014 Likno Software, all rights reserved User Interface Part III 16 AllWebMenus User's Guide 3 User Interface 3.1 Main window layout The AllWebMenus Main window uses two tabbed sections: The Menu Editor Tab This section is split into four 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 (Group, Item) · The Help Tips Pane This is where a short description is displayed to provide quick help on the selected property. · The Menu Preview Pane This is where your menu can be previewed in a WYSIWYG IE browser. © 2000-2014 Likno Software, all rights reserved User Interface The Properties Pane includes all available properties which are grouped into two categories. The Content Properties and Style Properties: © 2000-2014 Likno Software, all rights reserved 17 18 AllWebMenus User's Guide The Style Editor Tab This section is split into four panes: · The Available Styles Pane This is where the available styles can be selected for further editing. · The Properties Pane This is where the properties of the selected style are edited. The Pane changes its content according to the type of the selected style (Group, Item). · The Help Tips Pane This is where a short description is displayed to provide quick help on the selected property. · The Menu/Style Preview Pane This is where your menu OR the selected style can be previewed in a WYSIWYG IE browser. If a group style is selected the preview pane displays the group along with the item that was previously selected. © 2000-2014 Likno Software, all rights reserved User Interface 3.2 Keyboard shortcuts There are several shortcuts defined for quicker access to frequently used functions: · F1 Provides context sensitive help for each property · F12 Opens the Preview Menu window · Ctrl + F12 Opens the Compile Menu window · Shift + Ctrl + F12 © 2000-2014 Likno Software, all rights reserved 19 20 AllWebMenus User's Guide Opens the "Link Compiled Menu to Web Pages" window · Ctrl + Z Undo · Ctrl + Y Redo · Ctrl + N Creates a new AllWebMenus structure · Ctrl + O Opens an .awm menu project · Ctrl + S Saves the current AllWebMenus structure · Ctrl + X Cuts the selected element · Ctrl + C Copies the selected element · Ctrl + V Pastes the selected element · Ctrl + A Pastes the values of the selected element only © 2000-2014 Likno Software, all rights reserved Commands Part IV 22 AllWebMenus User's Guide 4 Commands 4.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 project. The AllWebMenus files are found under the .awm extension. Save Saves the current menu project into an *.awm file. Save As Saves the current menu structure with a different filename. Open Example Menu Project Opens a list of example projects to select and load to the application. Export Project Exports the loaded project in order to move it to other PCs without having problems with the file paths of the linked images. Exporting the project adds all linked images into a single folder, called "menuname-assets", which is located next to the exported .awm file. Note that this action does not affect the file paths of the loaded .awm project. Your loaded .awm project continues to use the existing image paths. Import Project (PRO only) Imports the menu structure from another project (.awm) into the current project. © 2000-2014 Likno Software, all rights reserved Commands 23 Exit Closes the AllWebMenus application. 4.2 Command: Edit Undo Lets you undo the last action you made. Redo Lets you "cancel" an Undo action. Cut Copies the selected element (Group or Item) to the Element Clipboard and then deletes it from the menu structure. Copy Copies the selected element to the Element Clipboard. If the selected element has any children (i.e. elements linked to it) the copy will also apply to them. This means that the element clipboard will contain both the element and its child elements too. See an example: Paste 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: © 2000-2014 Likno Software, all rights reserved 24 AllWebMenus User's Guide Since groups are always linked to items, a group will not be pasted when the selected element is also a group. Paste Values Lets you paste the values of the copied element to the selected element (does not create a new element in the menu structure). You can always select a subset of the copied values to paste to your target elements. Note that you can only paste to elements that are similar to the copied element; i.e. if you copied an item you can only paste its values to other items, not to groups. 4.3 Command: View This command lets you hide or show certain panels that may be useful but not required for the use of the program. While we do recommend that you keep these panels visible you may hide them if your monitor space is limited. The panels that can be hidden are the following: · Help Tips panel · Menu Editor Preview panel · Style Editor Preview panel 4.4 Structure 4.4.1 Command: Add Item - Before Selected Adds a new item in the menu structure before the selected item. The new item can always be placed somewhere else by using the Move Item Up/Down/Left/Right or the Cut/Paste functions. See also Add Item - After Selected © 2000-2014 Likno Software, all rights reserved Commands 25 Delete Item 4.4.2 Command: Add Item - After Selected Adds a new item in the menu structure after the selected item. If the selected element is an item, the new item is placed below it. The new item can always be placed somewhere else by using the Move Item Up/Down or the Cut/Paste functions. See also Add Item - Before Selected Delete Item 4.4.3 Command: Add Child Item (in Submenu Group) Creates a submenu group for the selected item and adds a child item to it. Since submenu groups are always linked to items, your selection should be an item to perform this operation. You can always transfer the new submenu group to another parent item by using the Cut & Paste functions. See also Delete Submenu 4.4.4 Command: Add Separator Adds a separator on the selected item. For more information on how this works read the topic. © 2000-2014 Likno Software, all rights reserved 26 AllWebMenus User's Guide 4.4.5 Command: Move Item Up Moves the selected item up by one position. This action will not move the item outside its parent group. This can be easily done by using the "Move Item Left/Right" OR the "Cut and Paste" functions instead. See also Move Item Down Move Item Left Move Item Right 4.4.6 Command: Move Item Down Moves the selected item down by one position. This action will not move the item outside its parent group. This can be easily done by using the Cut and Paste functions instead. See also Move Item Up Move Item Left Move Item Right 4.4.7 Command: Move Item Left Moves the selected item one level up, as sibling of the parent item. This action moves the item outside its parent group. See also Move Item Right Move Item Up Move Item Down © 2000-2014 Likno Software, all rights reserved Commands 4.4.8 27 Command: Move Item Right Moves the selected item one level down, as child of the previous item. This action moves the item outside its parent group, into a new submenu group of the parent. See also Move Item Left Move Item Up Move Item Down 4.4.9 Command: Delete Item Deletes the selected item from the menu structure. If the selected item has any child elements, the child elements are deleted as well. See also Add Item 4.4.10 Command: Delete Entire Submenu Group Deletes the selected submenu group along with all its child elements. 4.4.11 Command: Change Item/Group to Hidden/Visible Toggles the status of an Item or Group from Visible to Hidden and vice versa. A hidden item or group does not show up in the compiled menu and it is shown in the Menu Structure © 2000-2014 Likno Software, all rights reserved 28 AllWebMenus User's Guide as grey: 4.5 Theme 4.5.1 Command: Apply Theme to Menu Opens the Theme Gallery to choose from a collection of predefined themes and apply it to your menu. This action replaces all styles used in your menu with the styles contained in the theme. Therefore, your menu appearance changes while its content remains intact ("Content Properties"): When choosing a theme you also have the following option: (version PRO only) © 2000-2014 Likno Software, all rights reserved Commands 29 This option let's you decide whether you want the custom style values to be removed (and be replaced by the style properties of the applied theme) or keep these style values intact. The default behavior for these customizations (if any) is to be removed. As an example of style customization, see the property below which has been customized for a particular item: To read about opening an EXAMPLE project (2nd tab) click here. See also Export New Theme Command: Open Example Menu Project 4.5.2 Command: Save Custom Theme Creates a new theme (custom) based on the appearance of your Available Styles found in the Style Editor. · The theme's Main Menu Group will get the "Main Group Style" appearance and its items the "Main Items Style" appearance. · The 2nd level groups (first submenus) of the theme will get the "Sub Groups Style" appearance and their items the "Sub Items Style" appearance. · The 3nd level groups (further submenus) of the theme will get the "Sub Groups Style+" appearance and their items the "Sub Items Style+" appearance. You can also view and apply your new theme to existing menus by using the Apply Theme to Menu command. Custom themes are shown with an asterisk at their end (*). For more information on how to create your own custom themes, view instructions online. See also Apply Theme to Menu 4.5.3 Command: Export all Custom Themes Custom themes (the ones you save) can be exported, so that you keep them as a backup or import them to another AllWebMenus installation. © 2000-2014 Likno Software, all rights reserved 30 AllWebMenus User's Guide Custom themes are the ones you create (not provided by Likno Software) and have an asterisk at their end (*). See also Apply Theme to Menu 4.5.4 Command: Import to Custom Themes Custom themes (the ones you have saved and exported before) can be imported to your AllWebMenus installation. Custom themes are the ones you create (not provided by Likno Software) and have an asterisk at their end (*). See also Apply Theme to Menu 4.5.5 Command: Open Example Menu Project Opens a list of example projects to select and load to the application. Note that the Example Menu Project is not a Theme, which you can apply to your loaded menu. This means that your loaded project will have to close and the example project will open instead. You can then start building a new menu based on the example. If you want to view the properties of the example project without closing your loaded project, you can check the following option: To read about applying a THEME to your menu (1st tab) click on the link below. See also Command: Apply Theme to Menu Command: File 4.6 Tools 4.6.1 Command: Refresh Menu Preview Displays the menu design on a WYSIWYG IE browser pane. 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 the bottom message colored in red. © 2000-2014 Likno Software, all rights reserved Commands To show the latest changes in your menu design, press F12 or click the toolbar or the 31 icon in the application button in the Menu Preview window. The preview will then be updated. Note that you can have your preview automatically updated every time you make a change to the menu by checking the related check box at the options below: Just have in mind that this is not recommended for very large menus as the automatic refresh may slow down the application response to your actions. You also have a shortcut to ignore the Style values of the [Mouse Click] state for increasing your menu-building speed. Please read the Optimization Techniques for more info on this option. Note on Item Text property and Preview: If you use "HTML Formatting" on an item and you refer to local images or other assets there (eg: src="image1.png") the Preview Pane cannot show them (but actual website will, if in proper relative position). Still, there is a way for the Preview Pane to also show them: you can add these assets into a "projectname-assets" folder, located in the same folder where the project is located (eg: "menu-assets"). 4.6.2 Command: 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) © 2000-2014 Likno Software, all rights reserved 32 AllWebMenus User's Guide Step 2. Link the compiled menu to your web pages using the related AllWebMenus command Step 3. Upload the necessary menu files and folders (see a description of these elements below) Step 4. Upload the web pages that contain the menu link (note: steps 2 & 4 are not necessary if you have already linked the menu to your web pages and you only want to update your menu. They may be necessary if you are using a new AllWebMenus version with improved menu-linking code) How it works: When compiling a menu as menu.js, the following elements are created inside the same directory: 1. The core menu.js Javascript file. 2. The awmdata directory (or your custom directory as defined in Project Properties > Compile Properties > Folders & Files > Advanced). This directory contains the necessary Javascript menu-building Libraries (awmlibX.js or awmcsslib.js) along with any images used by the compiled menu. The awmdata directory (and its contents) is required and must always reside in the same directory with the menu.js file. Therefore, it is critical that you do not forget to upload the awmdata directory along with the menu.js file! Example Let's say that the local root folder of your site is the c:\mysite folder and that the contents of your web site are: | -------------------------------------------- | | c:\mysite\index.html | | c:\mysite\companyinfo.html | | ... | | c:\mysite\faq.html | | ---------------------------------------------| You now design a menu in AllWebMenus, called mysitemenu.awm, and you compile it into a file called c:\mysite\mymenu.js. Your local web site now contains: | ------------------------------------------------------------------ | | c:\mysite\index.html | | c:\mysite\companyinfo.html | | ... | | c:\mysite\faq.html | | c:\mysite\mymenu.js | | c:\mysite\awmdata\awmlibX.js | | c:\mysite\awmdata\dot.gif | | c:\mysite\awmdata\mymenu\image1.gif | | ... | | c:\mysite\awmdata\mymenu\image8.jpg | | ------------------------------------------------------------------ | The elements in bold should be uploaded on the server in the same directory structure where they are locally created. If you don't upload them or you misplace them on the server, the menu will produce a run-time error and will fail to appear due to the following reasons: © 2000-2014 Likno Software, all rights reserved Commands 33 · 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 directory: the mymenu.js file will not be able to call the necessary awmdata\*.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 folder. 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, 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. Note for "CSS Menu" Genre implementations: The awmlibX.js and dot.gif files are produced when the default "Javascript Menu" Genre is used. In "CSS Menu" Genre implementations, the awmcsslib.js menu-building library is produced instead. 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 & Files Compile Properties: Cross-Frame Support Compile Properties: Optimization Compile Properties: FrontPage Support How Do I Use my designed menu on my web pages 4.6.3 Command: Project Properties Allows you to specify the following properties and options for your loaded menu project: Preview Panel Settings Project Info Settings Compile Properties Folders & Files © 2000-2014 Likno Software, all rights reserved 34 AllWebMenus User's Guide Cross-Frame Support Optimization FrontPage Support Advanced Scripting Custom Variables RTL Languages Support 4.6.3.1 Compile Properties To read more info on a "Compile Properties" topic, please click on its respective link below: Folders & Files Menu Structure Source SEO Cross-Frame Support Optimization Menu-Linking Code in Tags FrontPage Support Advanced Scripting Custom Variables RTL Languages Support Menu Printing 4.6.3.1.1 Compile Properties: Folders Here you specify the output folders and files to be created when compiling your menu project. The Site_Root folder is the location where your web site (your main index page) is locally stored. It is also referred as the "Site Root" folder in other applications. It is very important that you specify the correct folder here, as it is used in both the compile process and in the item property for browsing the site pages. The Compiled menu name is the name of the javascript file that is generated when you compile the menu. It defaults to menu.js but you may as well change it to something else. Note that you can use multiple menus in the same website by having different projects compiling menus under different "Compiled menu name" properties. Once you setup your "Site_Root folder", you are able to edit the "Compiled subfolders" which include © 2000-2014 Likno Software, all rights reserved Commands 35 the following: (version PRO only) Menu file subfolder This specifies a custom subfolder in your web site where your menu will be compiled. The default folder where the menu gets compiled is the Site Root of your web site. Note that the folder needs to exist prior to selecting it. When compiling a menu a default awmdata 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 folder, you may use two separate custom folders for the following entities: Javascript libraries subfolder 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 in the default "Javascript Menu" Genre implementations. Read more below. There is no apparent reason to change the menu-building libraries folder, so we recommend that you keep the default awmdata value. Menu images subfolder .jpg, or .gif files(all images used by the menu, except of the "dot.gif" special image that resides in the "Javascript 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 folders may be required when two or more menus are used in the same web site and images from both menus use the same names. This is the usual situation that may require you to have a different subfolder for the produced images (default behavior). Custom folders may contain relative paths too (eg: ../). If you do so, the folder location will be relative to the location of the compiled menuname.js file. Examples: Libraries Folder: Images Folder: awmdata awmdata/menu Libraries Folder: Images Folder: allwebmenusdata allwebmenusdata/menu Libraries Folder: Images Folder: ../allwebmenusdata ../allwebmenusdata/menu Libraries Folder: Images Folder: allwebmenuslibs allwebmenusimages © 2000-2014 Likno Software, all rights reserved 36 AllWebMenus User's Guide Libraries Folder: Images Folder: ../allwebmenuslibs ../allwebmenusimages The 'Place "dot.gif" in' option The file "dot.gif" is 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 file, it is inserted inside the "Javascript libraries" folder (eg: "awmdata") by default. This is absolutely fine for the vast majority of server settings. However, in some rare server settings you may need to have it inserted into the "Menu images" subfolder by using the related 'Place "dot.gif" in' option. In that way all images are placed together and only javascripts remain inside the "awmdata" folder. On what rare cases is this option useful? See below an email sent by a customer: > Hello, > > I realize that after compiling a menu, the dot.gif file is always > placed in the same folder as the library files. Unfortunately, our web > host demands separation of image files (e.g., jpeg, gif) from > executable files (e.g., html, js, etc.) in different folders. > > What is the best way to accomplish this? This is exactly the case where the customer should change the option from default to "Menu images folder". Note: The dot.gif is used on "Javascript Menu" Genre implementations only. Implementations of the "CSS Menu" Genre do not need this file and do not produce it upon compilation, so this option has no effect when this Genre is used. 4.6.3.1.2 Compile Properties: Menu Structure Source Here you specify how your menu is populated with menu items (and submenus). Option 1: using the project's structure, i.e. items that you add to your AllWebMenus project. These items are fetched from its compiled project's file (default option), OR Option 2: "on-the-fly", using items fetched from the loaded page that shows the menu. Option 1: Populate menu inside this project, with items specified in Menu Structure (default) With this option your menu uses the structure you create and edit within the AllWebMenus application. © 2000-2014 Likno Software, all rights reserved Commands 37 When you compile, this structure gets embedded to a single javascript file and all pages linking to this file use that menu structure. Contrary to the option: - You do not have to add menu items ( HTML code) on every single page of your website. When you make a change to the structure, you just re-compile and re-upload the related files to your server and you are done. - The menu appearance can also use *custom*, item-specific style values (besides the styles of Style Editor). - The menu appears faster (gets built while the page is still loading, not after). - You can achieve SEO by either linking a sitemap HTML file to your home page (or to any other page indexed by search engines), OR still adding the code to your pages (from option 2). If you use the UL/LI code in your pages, do not get confused and think that the menu will ignore the "within project" items and populate itself using that UL/LI code. As long as you have checked the "Populate menu inside this project" option (1st option), the code serves only for SEO purposes; not for populating the menu. Option 2: Populate menu inside your page, through UL/LI items With this option your menu *ignores* the project's menu structure (which is located in a javascript file) and rather builds its structure "on-the-fly", based on elements added (by you) in your page's HTML code. This method has the following characteristics: - Search engines can crawl your menu structure on any page where your menu is shown. However, this can still be achieved through a single sitemap file (see how), so this should not necessarily be the reason to use that option. - You can use a different menu structure on different pages. Since the menu is built "on-the-fly", based on tags inside your pages' HTML code, you can have different tags on different pages. - The menu appearance is based on the standard styles of the project's Style Editor only. Any *custom*, item-specific style values are *ignored*. - The project's structure is still used in "Menu Preview Pane" in order to show you sample items when designing your menu (but it is not used on your actual pages, as this is substituted by your items found there). - The menu always appears after the page is fully loaded. Example: Home Item 1 Item 2 © 2000-2014 Likno Software, all rights reserved 38 AllWebMenus User's Guide Item 2.1 Item 2.1.1 Item 2.1.2 Item 2.1.3 Item 2.1.4 Item 2.2 Item 3 The above HTML structure represents the following menu structure: Notes: - If you cannot use the "id" attribute in your HTML (in "WordPress" for example), you can use the "class" attribute instead: - The "id" attribute is not required if you choose the "1st UL/LI structure found in page" population option and make sure that the UL/LI structure that specifies the menu items is before any other UL/LI structure in the page (or it is just the only one). How the population method works: The AllWebMenus engine parses the structure that uses the same ID as the one specified within the AllWebMenus project (usually this defaults to "awmULLI-menu", unless you compile your menu with a different name or you change it manually). Each represents a submenu (group), each represents an item. The tag contains the URL that the item opens when clicked. The appearance of all items is specified within AllWebMenus, not through your website's CSS. In © 2000-2014 Likno Software, all rights reserved Commands 39 particular, the styles in Style Editor are used to create your menu theme (appearance/behavior). This is why the tags are not shown as underlined (for example) or using your website's CSS definition. Your items are formatted based on the "HTML - Formatting" mode (see different modes), therefore you can still make some changes in appearance through HTML. The last Main Menu item in the sample code shows this (it uses an tag on its last 2 words). Note that in this mode, the mouse handling of the HTML tags you use within an tag is ignored (it is passed to the AllWebMenus engine instead). Finally, you can also utilize the "HTML - Full" mode (see different modes) if you want to have full control even for the mouse events (note: this may not work for all HTML combinations!). The last item of the "Item 2" submenu in the sample code shows this: Manual styling.. Here is a link. Item is rendered in "Full HTML" mode If you use the above code in a menu, you will see that the tag renders the "link" text based on your website's CSS (underlined for example) and is clickable, while the rest of the item area is not clickable. AllWebMenus decides automatically if the "HTML - Full" mode applies or not, based on the following rule: Is the tag the only content within the ? YES example: Home => the item is rendered based on the "HTML - Formatting" mode (tags are used only for formatting, not for actions) NO example: This is a link. => the item is rendered based on the "HTML - Full" mode (tags are used both for CSS-based formatting AND actions) IMPORTANT NOTE when triggering the "HTML - Full" mode! Not all HTML tags can work in combination with the engine's own styling, so avoid using complex customizations through the "HTML - Full" mode. Support cannot be given for problems when using this mode, as the feature is strongly intended for use with simple items (like Home ). About the "display:none;" style attribute: The AllWebMenus engine automatically hides the structure when it detects it, so that these links do not visually interfere with the contents of the page (the structure is used to populate the menu, which is then displayed instead of the links). The "display:none;" attribute on the 1st tag is used additionally, so that the structure is hidden for a period of some milliseconds before AllWebMenus detects it and hides it with its own method. While it is good to keep this attribute so that you do not see the structure "appear/disappear" for some milliseconds, you may decide not to keep it if you wish your links to be visible on browsers © 2000-2014 Likno Software, all rights reserved 40 AllWebMenus User's Guide that do not support javascript (or have it disabled). Keep in mind however that this way the structure will always be visible until the menu starts loading (in the majority of users that do have javascript on their browsers). 4.6.3.1.3 Compile Properties: Menu Genre (at "Menu Editor" interface) Here you specify how your menu functions: - as a "Javascript menu" (feature-rich, all available features/options in AllWebMenus supported) OR - as a "CSS menu" (light, Section 508/WCAG compliant, works even with javascript disabled, not all features/options supported) This option is located at the "Menu Editor" tab of the AllWebMenus main interface: The "Javascript menu" Genre implementation is the default one. It is the one that uses all features and options of the AllWebMenus interface. While feature-rich, it has some technical limitations: - it cannot be Section 508/WCAG compliant, i.e. screen readers cannot read the text in menu items, convert it to audio and play it to the visually impaired, © 2000-2014 Likno Software, all rights reserved Commands 41 - it uses a little "heavier" code than the "CSS menu" one, due to the more features it supports (like submenu opening/closing effects etc.), - it requires that javascript is enabled on the browser (typical nowadays). Contrary to the "Javascript menu", the "CSS menu" Genre implementation is designed so that: - it is Section 508/WCAG compliant (required by certain governmental agencies), - it uses "lighter" code, due to the less features it supports (lack of submenu opening/closing effects etc.), - it is still functional when the javascript is disabled on the browser (degrades gracefully and still functions as a menu). If you choose to use the "CSS menu" Genre implementation for any of the above advantages, just be aware that some features and options of the default "Javascript menu" cannot be supported (due to its lighter code and limited javascript). Below is a list of all properties and their applicability (or not) in "CSS menu" implementations: General features and "CSS Menu": Menu Structure © 2000-2014 Likno Software, all rights reserved The "CSS menu" Genre implementation requires that you use the "UL/LI" population method only, so that search engines and screen readers can parse the menu items (which are the "LI" elements): 42 AllWebMenus User's Guide Available Styles A "CSS menu" uses the 6 styles of the Style Editor for its appearance. No style customizations can be specified per item (something that you can do with a "Javascript menu"), since the "CSS menu" uses the "UL/LI" population method only. In that population method the style of each item ("LI" element) is based on its level on the menu: "Main item", OR "Submenu Item (2nd level)", OR "Submenu Item+ (3rd level and beyond)". © 2000-2014 Likno Software, all rights reserved Commands Content Properties © 2000-2014 Likno Software, all rights reserved 43 Similarly to the "custom Style values", none of the content properties is used by the online menu since this is populated by the "LI" elements on page instead (the preview does use them though, just for previewing purposes). 44 AllWebMenus User's Guide Mouse Click state Not applicable. The values of the "Mouse Over" state is used when the user clicks on an item. Group Style Properties and "CSS Menu": Assigned Style Applicable, you can assign one of the 3 generic group styles. However, no customizations per individual group are applicable. Type Only the "Horizontal/Vertical" option is applicable. Everything else does not apply to the online menu. This means that none of the options contained in the "Horizontal" or "Vertical" tabs are applicable, as well as the "Sliding" option. A CSS menu has "Uniform Items" by default, so this option is not applicable too. Has Header Applicable Has Footer Applicable Appears - Where (submenus only) Semi-applicable. The "edge" option is not applicable (submenus always appear at the right edge of parent group, or bottom edge if parent group is horizontal). The "distance" option however is applicable. Appears - Aligned with (submenus only) Semi-applicable. The "section" and "edge" options are not applicable (submenus always align with the right edge of parent item, or bottom edge if parent item is horizontal). The "alignment offset" option however is applicable. Appears - How Not applicable. Submenus always appear immediately, "on Mouse Over", without effects. Disappears - How Not applicable. Submenus are always non-sticky and disappear without effects. Opacity Applicable. Some browsers (IE) cascade the CSS opacity value to all the following submenu levels, so it is recommended to use opacity only at the Main level. Background Color Applicable. Background Tile Image Applicable. Padding Applicable. Border Applicable. © 2000-2014 Likno Software, all rights reserved Commands 45 Rounded Corners Applicable. Distance Between Items Applicable. Width Not applicable. The width of the group is determined by the "Item Size" property of its items. Item Style Properties and "CSS Menu": Assigned Style Applicable, you can assign one of the 3 generic item styles. However, no customizations per individual item are applicable. Content Alignment Applicable. Text Font Applicable. Text Size Applicable. Text Decoration Applicable. Text Color Applicable. Padding Applicable. Text Margin Not applicable. Border Applicable. Rounded Corners Applicable. Background Color Applicable. Background Image 1 Applicable. Background Tile Image Applicable. Background Image 2 Applicable. Size Applicable (when non "Auto"). The "Auto" value is not supported by CSS (needs javascript), so both "width" and "height" needs to be explicitly specified in pixels. AllWebMenus will not let you compile if you forget these values to "Auto" in any of the 3 Item Styles, since a "CSS menu" cannot use javascript to calculate the size of all items on-the-fly. © 2000-2014 Likno Software, all rights reserved 46 AllWebMenus User's Guide Foreground Image Not applicable. Floating Image Not applicable. "Has Submenu" Image Applicable. Cursor Not applicable. Project Properties and "CSS Menu": Folders & Files Applicable. The "dot.gif" option is not applicable (not used in CSS menus). Menu Structure Source Applicable, only the "UL/LI" option. Cross-Frame Support Not applicable. Optimization Not applicable. All "Mouse Click" values are always ignored. Menu-Linking Code in Tags Not applicable. FrontPage Support Not applicable. Advanced Scripting Not applicable. Custom Variables Not applicable. RTL Languages Support Not applicable. Menu Printing Not applicable. 4.6.3.1.4 Compile Properties: SEO Here you can generate code to use for search engine optimization purposes. You can apply any of the following two methods, or even both (combined): Sitemap-based SEO © 2000-2014 Likno Software, all rights reserved Commands 47 On-page SEO Sitemap-based SEO: Search engines will crawl your menu links through a single sitemap file that they find on your website. Use the "Generic Sitemap" button to create a sitemap based on your menu structure. A simple .html file will be exported that contains all your menu items along with their links (as tags). Then, just add a "sitemap" link on your index page (or any other page crawled by search engines) that links to that file and your most important pages of your website (those in your menu) will be indexed by the search engine crawlers, without any hassles! Additionally, you may also use the "Google Sitemap" or "ROR Sitemap" to provide more info for certain search engines. With this method (compared to the "on-page SEO" method) you do not need to add a lot of HTML code to your page (other than just adding a simple link to the sitemap file). On-page SEO: Search engines will crawl your menu links through HTML code that you add to your pages. Use the "View sample code" button to see how your HTML code should be structured. As you can see there, your menu links are presented as standard tags. Therefore, search engines will index them automatically whenever they crawl a page that contains the related HTML code. Example: Home Item 1 Item 2 Item 2.1 Item 2.1.1 Item 2.1.2 Item 2.1.3 Item 2.1.4 Item 2.2 Item 3 © 2000-2014 Likno Software, all rights reserved 48 AllWebMenus User's Guide Through the above HTML, search engines will index all pages referenced by the tags. Notes: - Some people believe that this method provides a little better SEO (compared to the "sitemap-based SEO"), as the links are followed directly from a major page rather than indirectly from a sitemap page. However, some other people believe that this method may not be as effective, since this list of links should be inevitably hidden from the user (through the "style" element on the first ). We provide you with both methods to choose the one (or both) that you believe will be most effective for your website. - Using the "on-page SEO" method does not require you to also use the " option" in the Menu Structure Source property. These are independent from each other. Actually, if you do so, your menu will be populated "on-the-fly" (based on the code you use for SEO purposes), while you may not want this to happen. So, you can use the "Populate menu inside this project" option there and still use the "on page SEO" method. 4.6.3.1.5 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 on one frame and all its Submenus appear on another frame. You can view an on-line demo on how to implement cross-frame menus at http://www.likno.com/demos.html You can also view an actual cross-frame implementation at http://www.likno.com/examples/demo_frames.html To use our solution on a framed web site you need to do the following steps: STEP 1. Go to Tools-> Project Properties > 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 appear": This is the name of the frame where the submenus will open (not the name of the html file that opens inside that frame!). A Wizard has been created to help you retrieve the proper name for your selected frame. Example: Let's assume the following Frameset Definition inside the source code of your home page: <body> <p>You need a browser that supports frames to see this site </p> © 2000-2014 Likno Software, all rights reserved<br /> <br /> Commands<br /> <br /> 49<br /> <br /> </body> 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 (not main_page.htm !) "Submenus Positioning Offset": This field should only be used if your frameset has more than two frames and one of these frames affects the position of submenus relative to their Main Menu. The best way to understand the functionality of this property is to read the following example: Definitions: My = vertical distance from top edge of Main Menu (in pixels) Sy = vertical distance from top edge of the "Item 2" submenu (in pixels) Final_Sy = vertical distance from frame's top edge of the submenu (in pixels) Offset = the value you enter in the "Submenus Positioning Offset" field (positive or negative number of pixels) In a two-framed web page, the submenu of "Item 2" opens correctly at Sy pixels from the top edge. The script automatically calculates the Sy distance based on the My value. However, in a three-framed web page of the following setting, the submenu will open far away from its parent item due to the calculated Sy distance. The only way to avoid this is to manually enter the expected height of the top-right frame. In this particular setting, the Offset needs to be a negative number so that the final Sy distance is smaller. The exact formula is: Final_Sy = Sy + Offset © 2000-2014 Likno Software, all rights reserved 50 AllWebMenus User's Guide STEP 2. Provided that 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: menuname.js should be linked to the left_page.htm, menuname_sub.js should be linked to the main_page.htm and all other pages opening at the main frame. Tip1: If you have only created frames so that your navigation is always visible, there is a better way to achieve this. You can avoid having frames by using a "Floating" menu at the left or top of your page. To view an on-line example on how to avoid frames using the "Floating" feature, you may click on the link below: http://www.likno.com/examples/example_frames_floating.html Tip2: For "horizontal" menus you may use "horizontal submenus" and still use frames, allowing a little space for the horizontal submenus to open. Important Notes! 1. Using the cross-frame feature for menus placed on right frames: Submenus always open at the left side of the target frame. While this is normal behavior for menus placed on left frames, it is not as good for menus placed on right frames (eg: Arabic or Hebrew framed web sites). If you have a right-to-left, framed web site, and the Main Menu is placed on the right frame, then you need to enter the following code into the "Advanced Scripting" property: var awmRightToLeftFrame=2; Only if you use this variable will the submenus appear at the right side of the left frame (target frame for the submenus). Otherwise, the submenus will appear at the left side of the left frame (default behavior). 2. Do not use html files with a system default name like top.html, as it appears that it conflicts with conventional default target names top, new, parent, etc... 4.6.3.1.6 Compile Properties: Optimization This topic is described in detail in the "Optimize menus to improve building speed" section. © 2000-2014 Likno Software, all rights reserved Commands 51 4.6.3.1.7 Compile Properties: Menu-Linking Code in Tags In this Compile Property you inform AllWebMenus if the menu-linking code is a direct child of the tag (default behavior) OR it "sits" inside additional tags (like

, , , etc.). Why should you do this? By default, the AllWebMenus "automatic linking" process inserts the menu-linking code at the beginning of the page's HTML main code, right after the tag (and outside any other tags). The same you should also do if you choose to add the code manually. This allows the menu to be generated in the background while the browser still loads the rest of the page, hence it appears fast. However, depending on the CMS or website builder you use, you may not be able to insert the menu-linking code there. In such a case: - If the menu-linking code is placed differently but is still a direct child of the tag, you do not need to change the default "No, outside tags" option. - If the menu-linking code is placed differently but is not a direct child of the tag (i.e. it is also within other tags), you need to set the option to "Yes, within tags". Otherwise, your menu may appear broken in certain browsers! By using the "Yes, within tags" value, the menu engine starts building the menu only after the entire page is fully loaded. With this technique, the existence of any nested tags do not break the building and rendering of the menu. The only minimal "effect" of this option is that your menu appears after the page is fully loaded, not as quickly as with the "No, outside tags" option. However, this is very minimal and unnoticeable in most cases, as the menu files are cached after visiting the first page that contains them. Note on positioning: - The menu-linking code does not determine where the menu appears on page (this is specified through the property). Therefore, moving it from right AFTER the tag will have no effect on menu positioning. Note on case: You may see this property disabled. This happens when the property is set to the " items" value. Why? This value requires that the page must be fully loaded before the menu can be rendered on page. Therefore the "Menu-Linking Code in Tags" defaults to "Yes" (which has the "fully load" requirement), regardless of the selection made. It is enabled again only if you change the "Menu Structure Source" to the "Use project's structure" value. See also Menu-linking code 4.6.3.1.8 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 trouble with certain browsers. The reason for this restriction is explained in the last section of this © 2000-2014 Likno Software, all rights reserved 52 AllWebMenus User's Guide 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 menu-linking code) 2. Inside AllWebMenus, go to Tools-> Project Properties > 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. Note! The _borders directory is set to be hidden by Frontpage. In order to work with the files in this directory you will need to change a setting in your "Folder Options" of your Windows Explorer, as illustrated below: Following the steps above, the menu appears in all pages containing the Bottom shared border. © 2000-2014 Likno Software, all rights reserved Commands 53 The exact positioning of the menu is determined by other properties (see paragraph below). (note: the presence of the menu-linking code inside the Bottom shared border does not necessarily mean that the menu appears in all pages containing the Bottom shared border. You may want some of these pages not to show the menu. To achieve this behaviour, you should compile the menu using the "Element-relative positioning" method on the property and make sure that you do not include the menu-positioning code on these pages. With this way the menu will not appear on the page.) Why linking the menu to the Bottom Shared Border does not affect the desired position of the menu on the page: Since the menu floats on the page, its position is not determined by where you place the AllWebMenus menu-linking code (i.e. the code inserted when using the "Link Compiled menu" command). Instead, its position is determined by the and properties, or by the menu-positioning code that you may have inserted at the desired location on page. So, position-wise it does not matter where you place the menu-linking code (where you link the menu). However, for cross-browser 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 by using the related menu-positioning code you may read the "How Do I Position the menu relative to a page element" section. See also How Do I Position the menu relative to a page element Compile Menu How Do I Use my designed menu on my web pages 4.6.3.1.9 Compile Properties: Advanced Scripting In this Compile Property you can specify additional javascript code to be inserted into the menu.js file upon compilation of the menu. This additional code will be executed every time the menu appears on page (i.e. every time the menu srcipt is running). An experienced developer can integrate several javascript effects inside the menu.js file. You can imagine that this extends the AllWebMenus functionality dramatically, since the menu.js runs in all the pages of your web site. Your scripts may produce javascript errors in the Preview pane if they rely on information located at your actual web pages. In this case it is recommended that you check the "Ignore script in Preview pane" so that they do not run at preview mode. The scripts *do* run on your actual web pages. Note 1: Do not use the tags. The menu.js is already a javascript file. Note 2: This feature is for advanced users only! You may produce Javascript Errors if you do not include valid code here. © 2000-2014 Likno Software, all rights reserved 54 AllWebMenus User's Guide 4.6.3.1.10 Compile Properties: Custom Variables In this Compile Property you can specify default strings for any custom variable (eg: ) you have added to applicable properties. See examples below or an additional example online. A custom variable is a javascript variable whose value you can update in your web page (through javascript) in order to alter the menu properties where they are used, based on your conditions or preferences. · The syntax of a custom variable is (whichever you prefer): OR · The applicable properties where a custom variable can be used are: ITEM PROPERTIES: GROUP PROPERTIES:

element, instead of the following...

The same technique applies if the chosen element is different, such as: SPAN (the most generic element):   TD:

© 2000-2014 Likno Software, all rights reserved

96

AllWebMenus User's Guide

Link: Menu attached to this link. Image (you can also add the id to an image but it is recommended to use the 3rd option instead): DIV:

 

Special note for positioning implemented with AllWebMenus v4.0 and below (do not read if your existing menus are created and positioned with version 4.1 and above) Prior to AllWebMenus v4.1 the following code was used for positioning:   It is ok to continue using the above code on your pages as it already contains the required Anchor ID parameter for positioning. In case you were using OFFSETS inside the code, please bear in mind that these OFFSETS are now passed into the menu.js file instead of the above positioning code. Therefore, in order for your OFFSETS not to be *double-counted*, please make sure that you remove the following code from your html pages:

We strongly recommend that you view the related "Live Example" of this property, as it shows most possible combinations on actual HTML pages.

Note: Main Menu is floating - reserve space on your layout: Remember that a DHTML 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 arrange for sufficient room on your layout so that the Main Menu appears there. For example, for an horizontal menu of about 440 pixels wide and 44 pixels tall, you could use the following HTML code: You can view an on-line example about this at http://www.likno.com/examples/example_positioning.html. © 2000-2014 Likno Software, all rights reserved

Properties

97

Option 3: Attaching the menu to an image existent in your pages

This option is similar to the previous option ("relative to an element") but the "element" is an image that already exists in your pages (example: logo.gif) and no extra code in your pages is required (i.e. no "Anchor ID" needs to be added). You only specify the filename of the image (which should always exist in your pages!) and your positioning is complete.

Method 2: Manually trigger Main Menu or any Group on user action (PRO version only)

With this method you have the ability to make the Main Menu or even individual groups popup by adding extra code on elements of your page. It is a very flexible method that can be used for achieving any of the following: - Keep your entire menu hidden until an event occurs (eg: a menu popups when you put your mouse over an image or link). You can even replace the default right-click menu of your browser with your own menu! (see "How Do I, Replace the default right-click menu used by the browser" topic) - Let actual elements of your page (images, links, etc.) be the ones that trigger the submenus instead of Main Menu items. In this case, you have total control of the layout of your page as you do not need to keep room for a rectangle where the Main Menu appears. You can even create cyclical menus with this method! View online example In order to get the required code that specifies which group appears and how its appearance is triggered, you need to click on the related link:

This action opens a window from where you can produce the proper code to add to your pages. Each group is assigned a unique id upon its creation which is enclosed in curled brackets. As shown

© 2000-2014 Likno Software, all rights reserved

98

AllWebMenus User's Guide

below, the id of the Main Menu Group is gr0.

This id will be used within the provided code to trigger the appearance of the group. For example: In this example, we specify that the group with id gr2 of the menu with compiled name menu should popup over the same element (this) when the user puts the mouse over the image. The complete Trigger Code is generated based on the parameters that we choose on the form:

© 2000-2014 Likno Software, all rights reserved

Properties

99

Implementation Notes: - The "Trigger Code generator" form does not have any effect on your compiled menu or page but only serves the purpose of providing the correct syntax of the code that should be added to your page. It is then your responsibility to add the provided code correctly on the page element(s) of your choice. - As with the "Automatically show Main Menu on page load" positioning, any group can be attached to any element you like, such as images, links, table cells, divs, spans, etc. - The "Positioning Element" (where the popup appears) can be different from the "Triggering Element". For example, a link can trigger the appearance of a popup menu over an image that is placed somewhere else in the page:

blah blah blah...

click here!

more blah blah blah...

- After a group appears, what makes it disappear again?" By default, a popup group disappears (hides) when the mouse moves in and then out from its area. To keep the popup group open even if the mouse moves away from its area you need to set the property to "yes". In this case, the popup group will close only when the user clicks somewhere on the page or triggers a different popup group of the same menu. In case you want to hide an open group without entering into its area first, you can trigger the awmHideGroup(); function that hides all open groups from the page, as shown on the example below:
100

AllWebMenus User's Guide

onmouseover="awmShowGroup('menu-gr2',0,3,0,0,this);" onmouseout="awmHideGroup();"> - You can use the awmHideMenu(); function to hide all menus (groups) that are open on the page. The function can also contain the menu name as parameter awmHideMenu(menuname); in case you have multiple menus on page and you want to hide the open groups of a particular menu only. An example of using this function to hide a menu when passing over an image is the following: - In the rare case that the AllWebMenus menu-linking code is not at the beginning of the page (as in FrontPage implementations for example), you will need to declare the awmShowGroup(); function (and awmHideMenu(); if used) in the HEAD section of your HTML page (between the and tags) as shown below: - You can show the same single menu on different page elements, using different values (or "Text", "Tooltip" values) on its items per element.

How? Through the Custom Variables feature (click the link to read more).

Information that relates to both Methods Depending on your HTML structure of your pages, some browsers may render the menu in a slightly different position than others (some pixels off). In the rare situation that this occurs, you can easily fix this by using the Browser-specific Offsets feature, which is located at the property:

© 2000-2014 Likno Software, all rights reserved

Properties

101

For each browser (or family of browsers) there are two variables that adjust the menu positioning horizontally (X) or vertically (Y) for that particular browser: The following example shows how to use these variables: Let's assume that the Opera browser shows your menu 5 pixels lower compared to any other browser. In this case you need to enter the value [ -5 ] to the "Vert. Offset (Y)" of the "Opera" option. This variable will force the menu to appear 5 pixels higher in Opera only, thus fixing the problem. Important notes! · Do not move the "AllWebMenus menu-linking code" from the beginning of page (i.e. from right after the tag). If you do so, you may have problems with certain browsers! Positioning is implemented using the positioning options found at the property, not by moving the menu-linking section from the beginning of the page. See Correct Placement of menu-linking code for more info on why the position of the menu-linking code is irrelevant from the actual position where the menu is specified to appear. · Do not use extensions inside the id variable (such as ".js" or ".awm"). correct syntax: id='awmAnchor-mymenu' incorrect syntax: id='awmAnchor-mymenu.js' · Many browsers are case-sensitive. Therefore be careful to use the correct capitalization for " menuname". For example if your menu is called NavBar.js, then you should have 'awmAnchor-NavBar' inside the span element (not 'awmAnchor-navbar').

© 2000-2014 Likno Software, all rights reserved

102

AllWebMenus User's Guide

· If using the element, please note that the   character is not required but recommended. You can replace the   with any other content you may like (such as other text or an image). While it is not required, we recommend that you do not leave the area empty, as this will cause positioning problems in OPERA, as well as in older browsers when certain code combinations are used. Please bear in mind that the menu floats over the span area and therefore it covers part or all of the content inserted there.

Applies to:

Group (Main Menu only)

Type:

n/a

See also Correct Placement of menu-linking code How Do I, Replace the default right-click menu used by the browser

7.4.4

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 Header (if a Header exists). To enable the Header you need to set the style property to "Yes, Show Header". If the subproperty of the property is set to "Auto", then the cursor will show as "move" when positioned on the Header.

7.4.5

Values:

yes/no

Applies to:

Group (Main Menu only)

Type:

n/a

Property: Menu Floats on Scroll Controls the behavior of the menu when the viewer scrolls the page.

© 2000-2014 Likno Software, all rights reserved

Properties

103

The menu can follow 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. There are two options for the floating feature. 1. The "Constant Floating" option, which makes the menu "float" all the way through the page towards the scrolling direction. 2. The "Advanced Floating" option, which allows for more customization (such as floating behavior within specific sections of the page) and for different and interesting navigation cases within the page. This feature requires an extra Add-in. To see the capabilities of this additional option please view some of the available online Use Cases of the "Advanced Floating Menu Add-in".

7.4.6

Note:

Due to technical reasons, this feature is not available on "Sliding Menu" implementations (i.e. sliding menus cannot float on scroll).

Applies to:

Group (Main Menu only)

Type:

n/a

Property: Sticky Submenus Specifies whether the submenus close when the mouse moves away from the menu area or remain open until the user clicks somewhere else on the page. The default behavior for the submenus is to close when the mouse moves away from the menu area. If you change this property to "sticky", the submenus will only close if the user clicks somewhere on 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 (on the page) OR hovers over another item within the same group. Options [1] and [2] below show some new interesting variations of "sticky" submenus. By unchecking the default check on option [1] you can have the last opened submenu always visible, regardless of what the user does on the rest of the page. By also unchecking the default check on option [2] you can simulate a TAB-like behavior for the menu, as at least one submenu will always remain open no matter what happens on page or menu (see "XP Tabs" online example).

© 2000-2014 Likno Software, all rights reserved

104

7.4.7

AllWebMenus User's Guide

Values:

Non-sticky/Sticky

Applies to:

Group

Type:

n/a

Property: Show Item or Group on Appear When the menu initially appears on the page, you can have an item shown as "selected" (highlighted) or a group appear open. See an online example: http://www.likno.com/examples.html?example=show_item_group_on_appear This property is found in the "Main Menu Group" properties:

There are 3 options to achieve this:

Option 1 (automatically, item selected based on URL)

(applies for item highlighting only) Check this option and the menu will display as selected (highlighted) the first item whose property matches the URL of the loaded page (if more than one menu item links to the same page (URL) then only the 1st matching item will be highlighted). For more info on how this feature works click here. What if a URL uses parameters? Should their values also be matched (or ignored)? Example: http://www.mysite.com/products.html?product=231&affiliate=762&start=2 In this case, you have the following 3 options:

© 2000-2014 Likno Software, all rights reserved

Properties

1. *Fully match* the URL (consider parameter values too)

2. *Ignore all* parameter values (match only the non-parameters part of the URL)

3. *Ignore specific* parameters only: [affiliate, start] (for multiple parameters use commas)

Option 2 (manually, standard item/group in all pages using the menu)

© 2000-2014 Likno Software, all rights reserved

105

106

AllWebMenus User's Guide

(applies for both item and group highlighting) Check this option and the menu will display as selected (highlighted) the specific item or group that you choose from the interface. The item or group is specified by its unique ID, which is found here:

In this example, if you want to show "Main Item 2" as selected you need to use its ID "it1", as demonstrated below:

If the specified item is within a submenu group then you can choose whether its submenu will also appear selected/open or not, through this property:

You may also use a group ID (instead of an item ID) if you just want to show your menu with a submenu already open (but without any of its items being selected).

Option 3 (manually, custom item/group per page through a page variable)

(applies for both item and group highlighting) This allows you to control which item shows as selected (or which group appears open) dynamically through the HTML of your web page.

© 2000-2014 Likno Software, all rights reserved

Properties

107

You do not have to check any option in the interface, just add the following code in a single line before the menu-linking code of your web page (the menu constructor): where: menuname is the name of the compiled file without the ".js" extension ( example: if you compile as "menu.js" then use menu as the value for that parameter ) ID is the ID of the item (or group) that will appear as initially selected, and can be found here:

( example: it4 OR gr2 ) Over_Click is a number that applies for item IDs only (not group IDs) and specifies whether the "Mouse Over" or "Mouse Click" state is used to show the item as selected. Note that this parameter is optional and the default value is 1. It takes the value "1" or "2" (without quotes): 1 for "Mouse Over" 2 for "Mouse Click" Show_Submenu is a number that applies for item IDs only (not group IDs) and specifies whether the submenu of the highlighted item (if it has one) should also expand. Note that this parameter is optional and the default value is 1. It takes the value "0" or "1" (without quotes): 0 to leave the submenu closed 1 to also expand the submenu

Examples for an item: This means: The item with ID "it1" from the menu compiled as "menu.js" will show as selected using its "Mouse Click" state. If the item has a submenu, this will be expanded. © 2000-2014 Likno Software, all rights reserved

108

AllWebMenus User's Guide

This means: The item with ID "it2" from the menu compiled as "menu.js" will show as selected using its "Mouse Over" state. If the item has a submenu, this will be expanded. This means: The item with ID "it1" from the menu compiled as "menu.js" will show as selected using its "Mouse Click" state. The submenu of this item will not be expanded.

Example for a group: This means: The group with ID "gr1" from the menu compiled as "menu.js" will show open when the menu loads.

Example for selected items/groups on multiple menus!: This feature even supports multiple menus on the same page, as follows: This means: - The item with ID "it4" from the menu compiled as "menu1.js" will show as selected using its " Mouse Over" state, its submenu will also be expanded (if there is one). - The group with ID "gr3" from the menu compiled as "menu2.js" will show open when the menu loads. - The item with ID "it8" from the menu compiled as "menu3.js" will show as selected using its " Mouse Click" state, without expanding the submenu.

About the awmShowItem variable when the menu is populated using a "UL/LI structure".

In order to find the correct ID to use as a parameter, you should count the loading order of the ULs and LIs. So you should count how many LI tags are found in the UL/LI structure until the desired item is found. For example this is a usual UL/LI code:

• Main Item 1
• Main Item 2
  • Sub Item 1
  • Sub Item 2
    © 2000-2014 Likno Software, all rights reserved
    
    Properties
    
    109
    
    
    • Sub Item 4
    • Sub Item 5
    • Sub Item 6
  • Sub Item 3
• Main Item 3

According to the awmShowItem technique, if you want to make the “Sub Item 6” highlighted, you should use it7 since its LI tag is the 7th LI in the structure.

Notes:

- The "Show Item or Group on Appear" feature is not available on cross-frame menu implementations (menus in framed pages). - The previous awmSelectedItem variable is now deprecated by the stronger awmShowItem variable and not supported (but is still functional if it remains in your implementations). Read how it used to work (if you still use it please replace it). - The [Mouse Over] state will be displayed instead of the [Mouse Click] state if you have the "Ignore [Mouse Click] values" box checked inside the Tools -> Project Properties -> Optimization tab. - If the "Menu Floats on Scroll" property is set to "Floating" AND the "selected" item is within a submenu, then the submenu will not appear open.

7.4.8

Applies to:

Group (Main Menu only)

Type:

n/a

Keywords:

'keeping submenus open', 'always visible'

Property: Header Tooltip Tooltip text that appears above the Header when the user pauses the mouse pointer over the Header. If you do not want to display a Header, you can do so by setting the style property to "No, Do not show Header". Values:

Text Unicode text fully supported (all languages and symbols)

Applies to:

Group

Type:

Content Property

See also © 2000-2014 Likno Software, all rights reserved

110

AllWebMenus User's Guide

Has Header Header Text Header Image Footer Tooltip Custom Variables

7.4.9

Property: Footer Text Specifies the text shown on the Group's Footer if the property is set to "Yes, Show Footer". It can also be combined with the Footer Image property. This is an example of a Footer on a menu:

The