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

The "Menu Structure Source" property allows you to specify how your menu is populated with menu items (and submenus):

Example of the <UL><LI> menu structure (option 2):

<ul id="awmULLI-menu" style="position:absolute;left:-999px;">
<li><a href="index.html">Home</a></li>

<li><a href="item1.html">Item 1</a></li>

<li><a href="item2.html">Item 2</a>

<ul>

<li>Item 2.1

<ul>

<li><a href="item_211.html">Item 2.1.1</a></li>

<li><a href="item_212.html">Item 2.1.2</a></li>

<li><a href="item_213.html">Item 2.1.3</a></li>

<li><a href="item_214.html">Item 2.1.4</a></li>

</ul>

</li>

<li><a href="item_22.html">Item 2.2</a>

</li>

</ul>

</li>

<li><a href="item3.html">Item 3</a>

</li>

</ul>

When added to a page linked to your menu, the above <UL><LI> HTML code produces the following menu structure "on-the-fly":

You may also read the related HELP topic inside AllWebMenus, which provides more details on this feature.

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 new property is found here:

There are 3 options to achieve this:

Read the rest of this entry »

A new option has been added in AllWebMenus v5.1.796, allowing you to change the Doctype of the Preview Pane (additional to the existing Encoding option):

Before Build #796, the Preview Pane was always using the Doctype "XHTML 1.0 Transitional".

However, if you used a different Doctype in your actual pages (where your menu was linked to), you may had experienced differences in how the menu was rendered at Preview Pane vs those pages. The same applied for Encoding.

This inconsistency is solved through the "Doctype" property, where you can use any of the following options for the Menu Preview Pane:

None
HTML 4.01 Transitional
HTML 4.01 Strict
XHTML 1.0 Transitional (default)
XHTML 1.0 Strict
XHTML 1.1

Now, it is important to understand that both the "Doctype" and the "Encoding" values are used in previewing the menu within AllWebMenus only and are not applied to your actual pages. Your pages will have their own HTML code for Doctype and Encoding and therefore the menu will be rendered according to those values; NOT according to the Menu Preview values. The Menu Preview options are there just to facilitate the preview.

Hello everybody!

We wanted to inform you that we have released the latest version of AllWebMenus Pro - version 5.2 Build #794.

It includes some fixes and improvements that enhance the program's functionality:

- Fixed an issue related to specific offsets for Opera.

- Fixed an issue where items with submenu image would affect the total width of a horizontal menu.

- Fixed an issue where "mailto:" links did not work correctly in IE.

- Added an option for "Automatically open last edited project when opening AllWebMenus" in the "File" menu.

You can download the latest version at:
http://www.likno.com/download.html

Enjoy!

SWFObject is a commonly used JS library for instantiating Flash objects universally.  Flash objects are considered to be “windows” on top of the browser and this is why they cover the submenus by default. This can be easily changed however. SWFObject offers two distinct methods to embed Flash Player content:

1. The static publishing method embeds both Flash content and alternative content using standards compliant markup, and uses JavaScript to resolve the issues that markup alone cannot solve.
2. The dynamic publishing method is based on marked up alternative content and uses JavaScript to replace this content with Flash content if the minimal Flash Player version is installed and enough JavaScript support is available (similar like previous versions of SWFObject and UFO).

If you use the static publishing  method you just have to add the transparent parameter in SWFObject.  For example if the code of  SWFObject looks like the following:

<script type="text/javascript">

var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");

</script>

you have to add the following line of code:

so.addParam("wmode", "transparent");

so that your code look like the following:

<script type="text/javascript">

var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");

so.addParam("wmode", "transparent");

</script>

If you use the dynamic publishing method you need to apply the transparent parameter too. In this method you use the embedSWF function so as to embed your SWF with JavaScript. The definition of embedSWF is the following: swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn) where:

1. swfUrl (String, required) specifies the URL of your SWF.
2. id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content.
3. width (String, required) specifies the width of your SWF.
4. height (String, required) specifies the height of your SWF.
5. version (String, required) specifies the Flash player version your SWF is published for (format is: "major.minor.release" or "major").
6. expressInstallSwfurl (String, optional) specifies the URL of your express install SWF and activatesAdobe express install. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310x137px.
7. flashvars (Object, optional) specifies your flashvars with name:value pairs.
8. params (Object, optional) specifies your nested object element params with name:value pairs.
9. attributes (Object, optional) specifies your <object>'s attributes with name:value pairs.
10. callbackFn (JavaScript function, optional) can be used to define a callback function that is called on both success or failure of embedding a SWF file

So if the code of your SWFObject looks like the following:

<script type="text/javascript">

swfobject.embedSWF("myswfobject.swf", "mycontent", "935", "300", "9.0.0");

</script>

you have to replace it with the following one:

<script type="text/javascript">

var expressInstallSwfurl = {};

var flashvars = {};

var params = {wmode:"transparent"};

var attributes = {};

swfobject.embedSWF("myswfobject.swf", "mycontent", "935", "300", "9.0.0", expressInstallSwfurl, flashvars, params, attributes);

</script>

By adding the transparent parameter as described above, the submenus will always appear above SWFObject objects on all browsers.