• content
• navigation
• access
• search

Popup menus, relative to a link

This demo uses one of the following configuration files:

popup-relative.js

Javascript configuration (for ASP config add <% %> instructions and rename)

popup-relative.ini

PHP configuration

And the following images:

• greenshadow.png (green menu dropshadow)
• orangeshadow.png (orange menu dropshadow)
• right-green.gif (green menu right-arrow)
• right-black.gif (green menu right-arrow rollover)
• right-purple.gif (orange menu right-arrow)
• right-blue.gif (orange menu right-arrow rollover)

The menu-handling code looks like this:

• Skip code example

//open menu with given IDfunction openMenu(menuID,linkObj){	//if the menu code is ready	if(um.ready)	{		//find co-ordinates of link object		var coords = {			'x' : um.getRealPosition(linkObj,'x'),			'y' : um.getRealPosition(linkObj,'y')			};		//increase y-position to place it below the link		coords.y += (linkObj.offsetHeight + 4);		//activate menu at returned co-ordinates		um.activateMenu(menuID, coords.x + 'px', coords.y + 'px');	}}//close menu with given IDfunction closeMenu(menuID){	//if the menu code is ready	if(um.ready)	{		//deactive menu		um.deactivateMenu(menuID);	}}

and is triggered from this HTML:

• Skip code example

<p>	Move your mouse over the links in this paragraph to	see menus opening below them. Like this link to the	<a href="/menu/"		onmouseover="openMenu('about',this)"		onmouseout="closeMenu('about')">		About UDM</a> section, or this one to the	<a href="/menu/support/"		onmouseover="openMenu('support',this)"		onmouseout="closeMenu('support')">		Help and support</a> page.  Finally, here's a link to the	<a href="/menu/demos/"		onmouseover="openMenu('demos',this)"		onmouseout="closeMenu('demos')">		Demos</a> page.</p>

For more about this configuration, please read the popup menu examples documentation.

• ← Previous demo
• Buy Now!
• Next demo →