JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.syn-rg.com.au/Development/synrg/scripts/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#1").lavaLamp({
fx: "easeout",
speed: 300,
click: function(event, menuItem) {
return false;
}
});
});
</script>
<div class="contact_budget">
<div class="budget_panel_container">
<div class="budget_panel_slider">
<ul class="lavaLampWithImage" id="1">
<li class="first"> <a class="active">Choose<br>
budget</a> </li>
<li><a data-input-id="budget-value-1">up to <br>
$10,000</a></li>
<li><a data-input-id="budget-value-2">$10,000 -<br>
$20,000</a></li>
<li><a data-input-id="budget-value-3">$20,000 -<br>
$40,000</a></li>
<li><a data-input-id="budget-value-4">$40,000 -<br>
$60,000</a></li>
<li><a data-input-id="budget-value-5">above<br>
$60,000</a></li>
<li class="last"><a data-input-id="budget-value-6">Don't<br>
know yet</a></li>
</ul>
</div>
</div>
</div>
CSS
.contact_budget .budget_panel_slider ul{margin:10px;border:1px solid #c8c8c8;border-left:0;border-radius:3px;float:left;width:678px;
/* fallback/image non-cover color */
background-color: #f5f5f5;
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#ebebeb));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #f5f5f5, #ebebeb);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #f5f5f5, #ebebeb);
/* IE 10+ */
background-image: -ms-linear-gradient(top, #f5f5f5, #ebebeb);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #f5f5f5, #ebebeb);
}
.lavaLampWithImage li{float:left;font:normal 14px/16px 'Gotham-Book',Arial,sans-serif;list-style:none;text-align:center; border-style:solid; border-width:0 1px; border-color:transparent #c8c8c8 transparent #FFF;}
.budget_panel_slider li.first{background-color:#c8c8c8;border-left:none;}
.budget_panel_slider li.first:hover{background-color:#c8c8c8;background-image:none;border-left:none;}
.budget_panel_slider li.last{border-right:none;}
.budget_panel_slider li a{cursor:pointer;float:left;padding:10px 0;width:95px;position:relative;}
.budget_panel_slider li.first a{cursor: default;}
.budget_panel_slider li a.active:hover {background: none;}
.budget_panel_slider li a:hover{text-decoration:none;
/* fallback/image non-cover color */
background-color: #ebebeb;
/* Safari 4+, Chrome 1-9 */
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ebebeb), to(#e1e1e1));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image:-webkit-linear-gradient(top, #ebebeb, #e1e1e1);
/* Firefox 3.6+ */
background-image:-moz-linear-gradient(top, #ebebeb, #e1e1e1);
/* IE 10+ */
background-image:-ms-linear-gradient(top, #ebebeb, #e1e1e1);
/* Opera 11.10+ */
background-image:-o-linear-gradient(top, #ebebeb, #e1e1e1);
}
.lavaLampWithImage li:hover:after{...
JavaScript
x(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({
fx: "easeout",
speed: 500,
click: function() {}
}, o || {});
return this.each(function() {
var b = $(this),
noop = function() {},
$back = $('<li class="back"></li>').appendTo(b),
$li = $("li", this);
$(this).click(function(evt){
var a = $(evt.target);
if(a.closest('li').not('.first').length){
b.find('a').removeClass('active');
move(a.addClass('active'));
}
});
function move(a) {
$back.animate({
width: a.width(),
left: a.parent().position().left
}, o.speed, o.fx);
}
move($(this).find('a').first());
})
}
})(jQuery);