• content
• navigation
• access
• search

Popup menus, across frames

This demo uses one of the following configuration files:

popup-bottomframe.js

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

popup-bottomframe.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

//set a reference to the main framevar mainFrame = parent.frames['main'];//open menu with given ID and left positionfunction openMenu(menuID,menuX){	if(		//if the "um" object exists in the main frame		typeof mainFrame.um != 'undefined'		&&		//and the ready state variable exists		typeof mainFrame.um.ready!='undefined'		&&		//and it has a value of true		mainFrame.um.ready == true		)	{		//find y-scrolling amount plus a top margin		var scrollY = (mainFrame.um.getScrollAmount() + 17);		//activate menu at given left position and scroll-top position		mainFrame.um.activateMenu(menuID, menuX, scrollY + 'px');	}}//close menu with given IDfunction closeMenu(menuID){	if(		//if the "um" object exists in the main frame		typeof mainFrame.um != 'undefined'		&&		//and the ready state variable exists		typeof mainFrame.um.ready!='undefined'		&&		//and it has a value of true		mainFrame.um.ready == true		)	{		//deactivate menu		mainFrame.um.deactivateMenu(menuID);	}}

and is triggered from this HTML:

• Skip code example

<ul id="topList">	<li><a href="/" title="UDM Home page" target="_top">		Home</a>	</li>	<li><a href="/menu/" target="_top"		onmouseover="openMenu('about','4em')"		onmouseout="closeMenu('about')">		About UDM ..</a>	</li>	<li><a href="/demos/" target="_top"		onmouseover="openMenu('demos','9.4em')"		onmouseout="closeMenu('demos')">		Demos ..</a>	</li>	<li><a href="/licensing/download" target="_top">		Download</a>	</li>	<li><a href="/licensing/" target="_top">		Purchase</a>	</li>	<li><a href="/menu/support/" title="Help and support" target="_top"		onmouseover="openMenu('support','21.2em')"		onmouseout="closeMenu('support')">		Support ..</a>	</li>	<li><a href="/contact/" title="Contact the author" target="_top">Contact</a>	</li>	<li><a href="/" title="Brothercake home page" target="_top">Brothercake</a>	</li></ul>

which is styled with this basic CSS:

• Skip code example

#topList {	margin:0;	padding:0;	list-style-type:none;	}#topList li {	margin:0;	padding:0;	list-style-type:none;	display:block;	float:left;	clear:none;	}#topList li a {	float:left;	text-decoration:none;	border:1px solid black;	padding:0.1em 0.4em;	display:block;	background-color:#ffffcc;	margin:0 0.4em 0.4em 0;	}#topList a:hover, #topList a:focus {	background-color:#ffeaea;	}

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

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