1. First, what is a "Custom Variable"?

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

     <awm:myvar>

OR

<awm:myvar/>

 

Example:

image

The applicable properties where a custom variable can be used are:

ITEM PROPERTIES:

Text

Link

Status Bar Text

Tooltip

GROUP PROPERTIES:

Header Text

Header Tooltip

Footer Text

Footer Tooltip

If you click on the "Compile Properties" toolbar button and then the "Custom Variables" option you will see any custom variables detected to be "in use" by your project (read more about this functionality in the AllWebMenus Help section there).

image

 

2. OK, so how can I use "Custom Variables" to show the same single menu with differentiated values, when this menu is triggered as a "popup" by different page elements?

Read below how you can show the same single menu on different page elements, using different "Link" values on its items per element.

Let's assume that you have several images on your page that display different DVD movie posters.

Each of these images shows the same menu when clicking on it, offering 3 actions (menu items) for the particular DVD that opens it ("view it", "purchase it", "rate it", etc.):

image

Now, each item of that menu links to a page related to its action (e.g. the "Purchase DVD" item links to the "purchase.php" page, etc.). In order for the linked page to know which DVD opens it, there is also a parameter at the end of the URL (e.g. "?dvd_id=13").

For example, these are the menu links when "Item 13" (DVD 13) triggers the menu:

image

But how can you use a different link value on the same menu, depending on which image (page element) triggers its appearance?

This is how:

1. In AllWebMenus, use a custom variable at the final part of each item's "Link" property (instead of a "hard coded" value):

image


2. In your page, first specify the value of this custom variable (with javascript) and then manually trigger the appearance of the menu (also with javascript):

<img src="movie-poster-13.jpg" onclick="custom_dvd_id=13;awmShowGroup('menu-gr0',0,3,0,0,this);">

For each different page element (DVD image) use a different value prior to calling the same menu. For example:

<img src="movie-poster-14.jpg" onclick="custom_dvd_id=14;awmShowGroup('menu-gr0',0,3,0,0,this);">

<img src="movie-poster-15.jpg" onclick="custom_dvd_id=15;awmShowGroup('menu-gr0',0,3,0,0,this);">

<img src="movie-poster-16.jpg" onclick="custom_dvd_id=16;awmShowGroup('menu-gr0',0,3,0,0,this);">

In that way, the menu links eventually use a different value in their URL parameters depending on which page element (DVD image) opens it.

For more information on how to manually trigger a menu (on demand, as a "popup menu") please read the AllWebMenus Help topic of the "Manually trigger Main Menu or any Group on user action" positioning method.