Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus

When you update AllWebMenus Pro so as to benefit its new features or bug fixes, you need to carefully update your online menus. There have been cases where after recompiling the menu's project and re-uploading its JavaScript file, the menu did not work properly. This might happen due to the fact that the menu's awmdata folder has not been uploaded.

The awmdata folder (awmdata is the default folder's name) contains the Library Files of the menu and any image files, if the menu uses any. Thus if you do not re-upload this folder, you will have online an updated JavaScript file and Library Files that have been created by an older build.

So whenever you update your AllWebMenus Pro application and you re-compile your menus, make sure that you uploaded to your site's server both the menu's JavaScript file and the awmdata folder.

A lot of customers that are using the Sliding Menus add-in of AllWebMenus Pro, define their DHTML menus in such a way where the menu system can remember their expanded/collapsed state, when browsing through different pages. For example, when they expand a menu's item, the expanded menu keeps this state after navigating to a different page.

The Sliding Menus add-in of AllWebMenus Pro can easily implement this functionality. You just have to go to the "Style Editor" of your DHTML menu maker and choose the "Sub Groups Style" (or in the "Sub Groups Style+" if you want this functionality to be applied in the menu items that belong to a level greater than two) from the "Available Styles". Afterwards, you have to click on the "Type" property and check the "Remember the menu state..." option as shown in the image below:

If you want this setting not to be applied globally (i.e. you want your menu system to remember the expanded/collapsed state for some of your menu items and not for all), you must use the "Menu Editor" and not the "Style Editor". Then you have to choose each item you want to have this behavior, click on the "All Values" button and define its "Type" property as shown above.

When you position a DHTML  menu built by AllWebMenus Pro relative to an element (usually in a <td> element), you might observe a small difference in the menu's placement. It might be some pixels further away than it is in IE6,7 or Firefox (e.g. usually it is in a lower position in IE8, Chrome or Safari, than it is in IE7, Firefox etc). This is caused due to the different way IE8, Chrome and Safari render the content of a table’s cell (<td> element).

IE8, Chrome and Safari vertically align the content of a table's cell in its center, whereas all the other browsers align it on the top and that's the reason you observe a difference in the placement of the DHTML menu in your page. To overcome this issue, you just have to add the attribute valign="top" in the element you have positioned the menu and you will get the required functionality.

For example if you want to  place your menu in a <td> element instead of the following:

<td id="awmAnchor-menu">&nbsp;</td>

you have to use the following:

<td id="awmAnchor-menu"valign="top">&nbsp;</td>

A popular feature you may come across in Web pages, is to swap images in a specific area of the page whenever you mouse over the menu's items. It is a feature that is being requested often of some of our customers too. This feature can be easily implemented by a menu that has been built by AllWebMenus Pro application.

One way to implement this feature is to go to the "Menu Editor" of the AllWebMenus Pro, choose the item(s) of the menu you want to have this behavior and then place the appropriate JavaScript code into the "JavaScript Command" property of this item (see the image below).The JavaScript code you must place into this property must be any valid JavaScript code (e.g. an already defined function in your HTML page) and it is in your responsibility to provide this valid code.

You can also implement this feature using the "Floating Image" property of the item. There you can define the image you want to appear whenever you mouse over this item and the area of your page that this image will appear by providing the appropriate x, y offsets. You can find all the appropriate information about the usage of the floating images in the following link of our company's blog site: http://www.likno.com/blog/allwebmenus-dhtml-menu-maker-floating-images-new-feature/249/

However, the second way is not recommended because you need to be more careful when managing the offsets; for example you may encounter problems in the display of your image when you re size the browser's window.

AllWebMenus Pro version 5.1 Build #764 released. Check out what’s new in this version:

- A 3rd style (Style+) is now available for all submenus and items of 3rd level and beyond. This allows for many new interesting capabilities, like different appearance on last submenus, advanced behavior on sliding menus and more!

Style+ example

(sliding menus taking advantage of Style+):

- Added more "Copy & Paste" options in Style Editor, for quicker transfer of edited values to other styles.

- Enhanced the "Assign Style" functionality for easier style assignments.

- New versions of Addins included inside AllWebMenus.

- New free Themes added that use the Style+ (3rd style) capability: Juice, FlatSky, Fading Purple, Orange Bubbles.

- Theme Pack 36 also available in Theme Gallery that uses the Style+ (3rd style) capability.

- Fixed an issue on IE8-RC1 when submenus used unfolding effects.

- Fixed an issue with the <Item Text> property, which caused the application to crash when it had a very large text.


Download the new build of the software from http://www.likno.com/download.html or from your Likno User Area account.