%META:TOPICINFO{author="MikkoLaakso" date="1166250977" format="1.1" reprev="1.3" version="1.3"}%
%META:TOPICPARENT{name="TWikiJavascripts"}%
---+!! !YahooUserInterfaceContrib popupMenu example

   * Add a div with an id "popupMenu1" to trigger the menu (see example button below)
<!-- Dependencies -->
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/event/event.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/dom/dom.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/animation/animation.js"></script>
<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/YahooUserInterfaceContrib/build/container/container_core.js"></script>
<script> 

function init() {
    YAHOO.namespace("popupmenu.container"); 
    YAHOO.popupmenu.container.overlaymenu = new YAHOO.widget.Overlay("overlaymenu", { context:["popupMenu1","tl","bl"],  
	                                                                   visible:false,  
                                                                           width:"100px" }); 
	YAHOO.popupmenu.container.overlaymenu.render(); 
	YAHOO.util.Event.addListener("popupMenu1", "mouseover", YAHOO.popupmenu.container.overlaymenu.show, YAHOO.popupmenu.container.overlaymenu, true); 
	YAHOO.util.Event.addListener("hide3", "mouseover", YAHOO.popupmenu.container.overlaymenu.hide, YAHOO.popupmenu.container.overlaymenu, true); 
}
YAHOO.util.Event.addListener(window, "load", init);
</script>

<style> 
.overlay { border:1px dotted black;padding:5px;margin:10px; } 
.overlay .hd { border:1px solid red;padding:5px; } 
.overlay .bd { border:1px solid grey;padding:5px; background-color:#ffffff; font:} 
.overlay .ft { border:1px solid blue;padding:5px; } 
</style> 

<div id="overlaymenu" style="visibility:hidden">  
    <div class="bd"><a href="%SCRIPTURL%/edit%SCRIPTSUFFIX%/%WEB%/%TOPIC%?t=%GMTIME{"$epoch"}%" >Edit</a><br/>
        <a href="%SCRIPTURL%/attach%SCRIPTSUFFIX%/%WEB%/%TOPIC%" >Attach</a><br/>
        <a href="%SCRIPTURL%/view%SCRIPTSUFFIX%/%WEB%/%TOPIC%?template=viewprint" >Printable</a><br/>
        <a href="%SCRIPTURL%/oops%SCRIPTSUFFIX%/%WEB%/%TOPIC%?template=oopsmore" >More...</a><br/>
        <button id="hide3">Close</button> 
    </div>  
</div>  

<button id="popupMenu1">Show</button>