Move your mouse over the links in this paragraph to see menus opening below them. Like this link to the About UDM section, or this one to the Help and support page. Finally, here's a link to the Demos page.
This demo uses one of the following configuration files:
<%
%>
instructions and rename)And the following images:
The menu-handling code looks like this:
//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:
<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.