How to change link color when hovering or clicking lavalamp jquery menu?
-
22-12-2020 - |
Question
I am using LavaLamp script for my horizontal menu
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
Active or hovered link is now grey. I want to change color on hover (or clicked) menu item, to look like this:
http://screencast.com/t/WU02S3jF
HTML:
`<ul class="lavaLamp">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>`
Javascript:
(function ($) { $.fn.lavaLamp = function (o) {
o = $.extend({ fx: "linear", speed: 500, click: function () { } }, o || {});
return this.each(function () {
var me = $(this), noop = function () { },
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this),
curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function () {
move(this);
}, noop);
$(this).hover(noop, function () {
move(curr);
});
$li.click(function (e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({"left":el.offsetLeft+"px","width":el.offsetWidth+"px"});
curr = el;
};
function move(el) {
$back.each(function () {
$(this).dequeue();
}
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};})(jQuery);
Solution
Add the following to your css CSS:
.lavaLamp li a:hover {
color: white;
background: lightblue;
//anything else you want to add here
}
in addition if you want it also to change upon select you should create a class that is added to the link's li
element when it is selected and removed when another is selected. for example the abc
class would be added to the selected link li
element:
.abc a {
color: white;
background: lightblue;
//anything else you want to add here
}
OTHER TIPS
I think the only thing you need to do is change the css background-color:
.lavaLampNoImage li.back {
border: 1px solid #000;
background-color: blue; // change this line to the correct color
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow