Likno Software Blog - DHTML Menus, Javascript Menus, Drop Down Menus

These are the new features and fixes introduced in version 5.1.742 (released on July 17, 2008):

- Added the “Compile Menu with No Dialogs (F8)” menu command for faster compilation process (no dialogs appear unless absolutely necessary).

- Improved the speed of loading all user fonts. AllWebMenus is now much faster, especially on systems with a large number of fonts.

- A new installer is now being used that solves certain installation-related issues for specific user settings. AllWebMenus could not run properly on those specific settings because of missing DLLs, OCXs, etc. Now fixed.

- Added the “Server-Side Menus API Help (pdf)” menu command for instant access to the API manual.

- Fixed a Mozilla-related issue where a menu could appear wider than expected when one of its items uses the <“Has Submenu” image> property.

- Improved the disappearance behavior of menus when the “Manual trigger Groups as popup menus” positioning method is used.

- Fixed an issue where a floating menu could not appear if the “Menu Floats on Scroll” property was used combined with the “Smooth, Horizontal” values.

- Fixed an Opera 9.5-related alignment issue of a menu’s “Left Image”.

- Fixed various issues related to dual monitor configurations. Code added to make the GUI visible in case it is outside of the screen. Dual monitors are now fully supported without glitches.

- Improved the AutoRedraw process by deactivating AutoRedraw from the Tab Control.

- Fixed a Frontpage Add-in related issue: the “Update Menu with latest Navigation Structure” option was hidden from the GUI in some cases.

- Improved the “Advanced Floating” form in the <Menu Drifts on Scroll> property.

- Added new menu commands: “Add Item Before Selected” and “Paste Item Before Selected” (previous versions only had “After Selected” commands).

- Fixed an issue with the “Save as” or “Export” commands, where a small .awm file (empty) was created instead of the valid one (on certain cases only).

- Fixed some interface issues on the <Header>/<Footer> application forms: the wrong cursor appeared and popup forms did not disappear correctly when moving from one property to another.

We are looking forward to your feedback!

The Likno Software team

You can see in the image below an example of the above issue when using AllWebMenus DHTML Menu Maker; the Submenu of an item will appear either to the far right or the far left of the browser:

This issue occurs because the libraries of the menu that are uploaded to your server were created with an older version of the software than the menu file (the libraries of a menu are the JavaScript files that reside in our default-named awmdata folder)!

Whenever you are updating AllWebMenus you must not forget to upload to your server all the updated files - including the libraries!

These are the new features and fixes introduced in version 5.1.740 (released on June 23, 2008):

- The <Type> property has more options; view the related blog post HERE.

- New “Advanced Floating Menu Add-In” released, allowing for more customization (such as floating behavior within specific sections of the page) and interesting navigation cases within the page. Detailed information can be found HERE.

- Fixed a problem where Separator did not appear correctly in Safari 3.1

- Fixed an uncommon case where Fixed a bug where the <Link> property did not update correctly when changing the Web Site Root folder and the <Link> property was actually an anchor in the same page.

- Minor Fixes in Menus of all AddIns. New option for purchase has been added for all of them.

- Fixed a problem where the menu is not “Dirty” if it had been exported before.

- The Preview Pane can now be refreshed using F5.

New options have been added to the <Type> property on AllWebMenus version 5.1.740!

“Horizontal” groups (like the Main Menu group) could always behave as “Menubars” (fitting the entire window width). These menubars can now use additional options, like specified margins from the window sides, etc.

Here are all the Options you can use on the <Type> property:

Option 1: Horizontal Menu

More Options on Horizontal Menus:

“Do you want your group to use multiple rows?”

By selecting “Yes, use X rows”, your group will use X rows to display the items.

Example with 2 rows:

“Should the menu function as a Menubar?”

By clicking “Yes, Widen group to fit entire window width”, the group acts like a typical Windows-application menu: horizontal, covering all the width of the window even when the user resizes it.

You can also add Margin in any of the sides of the menu (Right, Left, or both) counted in pixels or in percentage of the page:

“Do you want the items to widen to fit their group’s width?”
(enabled when the “Menubar” functionality is selected)

By selecting “Yes, widen items so that they fit the entire group” the items of the menu will widen in order to cover the whole size of the menu.

By selecting “Do not widen items” the items will keep their default size and the background color of the menu will cover all the width of the window.

Option 2: Vertical Menu

More Options on Vertical Menus:

“Do you want your group to use multiple columns?”

By selecting “Yes, use X columns”, your group will use X columns to display the items.

Example with 2 columns:

“Allow Vertical Scrollbar?”

By selecting “No Scrollbar” the group will widen to fit all items.

By selecting “Auto: when group height exceeds browser window height”, a scrollbar will be added in the menu when its size exceeds the browser window height in order for the viewer to be able to view all the items.

By selecting “Fixed”, a scrollbar will be added when the group size exceeds the pixels you have set in the related box:

The Uniform Items option

This option allows you to choose whether the size of all items match the size of the biggest item within the same group. The calculation of the largest size includes the size of the Header or Footer too (if they exist).

Example:

1st menu: The <Uniform Items> property is set to “no”

2nd menu: The <Uniform Items> property is set to “yes”

Assuming that you want to create a website with more than one languages you can follow the steps below:

1. Make sure that your web server is properly configured to handle dynamic pages like php, asp, jsp etc.

2. Create two separate menus using the AllWebMenus application. You have to give each menu a different name. In our example the names are:

- english.js

- french.js

3. Compile both menus and link just one of them in the target html page which in our case must be a php page. You can rename the page extension from “html” to “php”.

4. Next thing to do is to find a way to pass a variable in that html in order to alter the awm linking code and more precisely the section containing the path of the menu javascript file. This line to be changed is: <script xsrc='english.js' language='JavaScript1.2' type='text/javascript'></script>

If you leave this line intact, then the English menu will be loaded always. What we want in this case is to create a script to change the name of the file under a specific condition. In our example the condition is a parameter in the URL that tells the page what language is the chosen one.

Our URL may be: http://ourdomainname/multiplelang.php?lg=en or http://ourdomainname/multiplelang.php?lg=fr
As you can see the file to contain our menu has to be a php file (or asp, jsp depending on the programming language used) otherwise it will be impossible to pass the “lg” parameter in the awm linking code.

5. Here is a sample php page containing the code needed for this parameter to be passed in the awm linking code:

<!– This section contains the code needed for the URL parameter to be passed in our page and to give the menu the proper name –>

<?php

$userLang= $_GET['lg'];

if ($userLang == "en") {

$menuName="english";

}

else {

$menuName="french";

}

?>

<!– END –>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>

<script type="text/javascript">

var userLang = "<?php echo($userLang);?>";

var menuName = "";

if (userLang == 'en'){

else {

</script>

</head>

<body>

<!– DO NOT MOVE! The following AllWebMenus code must always be placed right AFTER the BODY tag–>

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

<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [4]',awmMenuName='menu',awmBN='636';awmAltUrl='';</script>

<!– The following section creates the javascript needed to load the proper js file –>

<script language="javascript">

document.write( "\<script" );

document.write( " charset='UTF-8'" );

document.write( " type='text/javascript'" );

document.write( " xsrc='" + menuName + ".js'" );

document.write( "\>" );

document.write( "\</script\>" );

</script>

<!– END –>

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

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

<span id="awmAnchor-<?php echo($menuName);?>"> </span>

</body>

</html>

Disclaimer: This guide is for users who are familiar with programming languages like php/asp/jsp etc. Improper use of the scripts above may result in menu abnormal appearance and/or script errors.