ProtoPop - Easy Pop-Out DIVs with Prototype

ProtoPop is simple bit of Javascript which provides quick "popout" areas. These areas are ideal for sub-navigation or to display more information about something when clicked. The popout DIVs are hidden in the HTML source, and can be styled anyway you like with CSS. No AJAX was used or harmed in the making of this script. (ProtoPop requires prototype.js)

Source

ProtoPop is a single function. Simply place it anywhere in your javascript library.

function protopop(arrow,menu,event) {
	if(menu.style.display=='none'){
		Effect.Appear(menu,{duration:0.3});
		Position.clone(arrow,menu,{setWidth:false,setHeight:false,offsetTop:20});
		var justChanged=true;
		menu.offclick=function(e){
			if(!justChanged){
				Element.hide(this);
				Event.stopObserving(document, 'click', menu.offclick);
			}else{
				justChanged=false;
			}
		}.bind(menu);
		Event.observe(document, 'click', menu.offclick);
	}
	return false;
}

Example Usage

The following example will raise a menu list when the linked is clicked. The menu list will vanish if the mouse is clicked anywhere other than in the menu.

<a href="#" onclick="return protopop(this, $('example_menu'), event);">this link</a>
<div id="example_menu" class="protopop">
	<ul>
		<li><a href="">Menu One</a></li>
		<li><a href="">Menu Two</a></li>
		<li><a href="">Menu Three</a></li>
		<li class="menu_divider"> </li>
		<li><a href="">Another One</a></li>
	</ul>
</div>

See It In Action

Click on this link for a protopop menu.

This is a sentence with another menu.