YUI Lava Lamp Menu

This is a YUI.Ux extended subclass for the YAHOO.widget.Menu component. It creates a lava lamp like effect for rollovers on menus.

Download

Download YUI Lava Lamp here

Installation

JavaScript

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script> 

<script type="text/javascript" src="assets/Ux/LavaLamp/Ux.js"></script> 
<script type="text/javascript" src="assets/Ux/LavaLamp/LavaLamp.js"></script>

CSS

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/base/base-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css">

<link rel="stylesheet" type="text/css" href="assets/Ux/LavaLamp/LavaLamp.css">

Example Usage

This sub class has two new config options. "animFx" Required: this can be any one of the Yahoo Easing objects. "animSpeed" Required: Speed at which to animate the lava. 

<!--- script that goes in the head -->
<script type="text/javascript">
	YUI.E.onDOMReady((function(){
		var lavalamp = new YUI.Ux.LavaLamp("lavalamp", {
			animFx: YUI.Ea.backOut,
			animSpeed: 1
		});
	}));
</script>
<!--- markup that goes in the body -->
<div id="lavalamp">
    <div class="bd">
        <ul>
            <li><a href="javascript:;">this is item one</a></li>
            <li><a href="javascript:;">two</a></li>
            <li><a href="javascript:;">three</a> </li>
            <li><a href="javascript:;">four</a> </li>
            <li><a href="javascript:;">this is item five</a></li>
        </ul>            
    </div>
</div>

Example Skin