Popup Menus

[SmartMenus 6 add-on]

This sample demonstrates how you can create popup menus with SmartMenus 6. Popup menus can be configured to appear (popup) at different positions on the page - for example, relative to any element or relative to the position where the event occurred.

To be able to create popup menus with SmartMenus 6 you need to use a small add-on script.

SmartMenus 6 Add-on: Popup Menus

Examples

Relative to the mouse event (default)

<a href="URL" onmouseover="c_show('PopupMenu1',event)" onmouseout="c_hide()">text</a>

Relative to the mouse event with offset 16 pixels

<a href="URL" onmouseover="c_show('PopupMenu1',event,'mouseX+16','mouseY+16')" onmouseout="c_hide()">text</a>

Relative to the calling element

<a href="URL" onmouseover="c_show('PopupMenu1',event,'targetX','targetY+targetH')" onmouseout="c_hide()">text</a>

Relative to the calling element's right edge and with drop-up

<a href="URL" onmouseover="c_show('PopupMenu1',event,'targetX+targetW-menuW','targetY-menuH')" onmouseout="c_hide()">text</a>

Relative to the mouse event for the Y coordinate and with absolute X coordinate 10 pixels

<a href="URL" onmouseover="c_show('PopupMenu1',event,'10','mouseY+20')" onmouseout="c_hide()">text</a>

Usage

Using the Popup Menus add-on is really simple - just link the small JS file on your page after the link to the SmartMenus script core (c_smartmenus.js) file. After that you will be able to define any menu tree as a popup menu in the configuration file (c_config.js) by setting its position to 'popup' like this:

'popup',   // Position ('relative','absolute','fixed')

It doesn't matter what values you will set for X Position and Y Position as they will be neglected anyway because the position of the popup menus is specified when they are called.

Showing any popup menus you may have defined is also very simple - the add-on brings the following 2 JS functions you can use:

The 'X_Position' and 'Y_Position' parameters can be any JS expression that returns number value for the X or Y coordinate of the position where the popup menu should appear. However, these are optional and if you don't use them, the popup menu you are calling will appear by default at the position where the event occurred. Inside these expressions you can use any of the following predefined keywords:

mouseX
The X coordinate of the position where the event occurred.
mouseY
The Y coordinate of the position where the event occurred.
targetX
The X coordinate of the position of the element that is calling the popup menu.
targetY
The Y coordinate of the position of the element that is calling the popup menu.
targetW
The complete width (offsetWidth) of the element that is calling the popup menu.
targetH
The complete height (offsetHeight) of the element that is calling the popup menu.
menuW
The complete width (offsetWidth) of the popup menu that is being called.
menuH
The complete height (offsetHeight) of the popup menu that is being called.

Notes

Please note the following when using popup menus:

  1. Only vertical items arrangement is supported for popup menus - even if you set the main menu ItemsArrangement to 'horizontal' for any popup menu, the items arrangement would still be forced to vertical.
  2. The menu box styles are applied to the main menu (unlike with normal main menus).
  3. Please make sure the root UL element of any popup menu you may have is not a descendant of any relatively positioned element on your page. Otherwise the popup menu may not be positioned correctly.

Download this sample

You can download the complete example or just see the configuration file and the images used for it.

Configuration file