Summary
This first resource will be about a stylish Lavalamp menu integrated in MODx snippet WayFinder. You can read all about it down here or just download the files up here or watch the demo!

Installation guide
The .zip will contain different folders. Each folder defines the type of code you have to copy and past in your MODx. Keep in mind to check for your ID´s!

Usage
Download the files and upload them to your template folder in the assets/ folder. Go to your manager and add the following code to your HEAD tags:

<link rel="stylesheet" href="/assets/templates/lavalamp/css/lavalamp_test2.css" type="text/css" media="screen">
<script type="text/javascript" src="/assets/templates/lavalamp/js/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="/assets/templates/lavalamp/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="/assets/templates/lavalamp/js/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#1, #2, #3").lavaLamp({
            fx: "backout", 
            speed: 700,
            click: function(event, menuItem) {
                return false;
                }
            });
        });
</script>

The WayFinder Call
In the BODY tags, add the following call without the ' in the call:

['[Wayfinder? &startId=`0` &level=`1` &parentClass=`hide` &parentRowTpl=`wf_parentRow` &outerTpl=`wf_outer` &innerTpl=`wf_inner` &rowTpl=`wf_row` &outerClass=`lavaLampWithImage`]']

This call is used with the standard WayFinder chunks, the outerclass defines the class used to style our dynamic Lavalamp menu.

Cascading Stylesheets
The following CSS should be in your stylesheet:

.lavaLampWithImage {
    position: relative;
    height: 50px;
    width: 1000px;
    background: url("../images/bg2.gif") repeat-x bottom;
    overflow: hidden;
    margin:0;
}
.lavaLampWithImage li {
    float: left;
    list-style: none;
}
.lavaLampWithImage li.back {
    background: url("../images/lava2.gif") no-repeat right -30px;
    width: 9px;
    height: 50px;
    z-index: 8;
    position: absolute;
}
.lavaLampWithImage li.back .left {
    background: url("../images/lava2.gif") no-repeat top left;
    height: 50px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
    font: bold 14px arial;
    text-decoration: none;
    color: #000;
    outline: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    line-height:50px;
    height: 50px;
    position: relative;
    overflow: hidden;
    margin: auto 12px;
}
.lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
    border: none;
}
.lavaLampWithImage li a:hover {
    color:#000;
}
.menu li.active a {
    font-weight: bold;
}
.menu li a:hover {
    background: #d01a71;
    background: url("../images/lava2.gif") no-repeat right -30px;
}
.menu li ul li a, .menu li.active ul li a, .menu li ul li a:hover, .menu li:hover ul li a {
    margin: 0;
    border-top: 1px #000 solid;
    height: auto;
    background: url("../images/lava2.gif") no-repeat right -30px;
}
* html .menu li ul li {
    margin: 0;
    padding: 0;
}
.menu ul ul li.last a {
    border-bottom: 1px #000 solid;
}
.hide.active {
    color: #FFF;
    background: #d01a71;
    background: url("../images/lava2.gif") no-repeat right -30px;
}

You can easily edit this CSS to make tons of different Lavalamp designs, just check the original source for other designs.