Easy Rollovers!
One day I was extremely lazy to create new graphic for rollovers for a navigation menu, and moreover, I was also tired of using simple text effects such as color change or changing the text-decoration property. After a quick tinkering, I came up with interesting idea of using jQuery to “generate” rollovers “on the fly”. The idea is based on changing element’s siblings instead of changing element itself, so the element pops among its siblings.
For example, I have this simple navigation menu:
<ul id="example"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul>
Using a small piece of jQuery code, I change boring color-changing or text-decoration:underline rollovers into absolutely new look and feel:
jQuery("#example").children().hover(function () {
jQuery(this).siblings().stop().fadeTo(800, 0.4);
},
function () {
jQuery(this).siblings().stop().fadeTo(700, 1);
});
Working example:
Source:
<style>
#example {border:1px solid #f4f4f4; margin-left:0 !important; padding-left:10px !important; width:150px; margin:0 auto !important}
#example li a:hover {color:inherit}
</style>
<script type="text/javascript">
jQuery(function(){
jQuery("#example").children().hover(function () {
jQuery(this).siblings().stop().fadeTo(800, 0.4);
},
function () {
jQuery(this).siblings().stop().fadeTo(700, 1);
});
})
</script>
<ul id="example">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
It also looks badass for a horizontal menu:
Source:
<style>
#example2 {overflow:hidden; height: 100%; width:210px; margin:0 auto !important}
#example2 li a:hover {color:inherit}
#example2 li {float:left; margin-right:3px; display:block}
#example2 li a {display:block; background:#f4f4f4; padding:3px 5px; color:#333; font:bold 13px Arial}
#example2 li a:hover {color:#333}
</style>
<script type="text/javascript">
jQuery(function(){
jQuery("#example2").children().hover(function () {
jQuery(this).siblings().stop().fadeTo(800, 0.4);
},
function () {
jQuery(this).siblings().stop().fadeTo(700, 1);
});
})
</script>
<ul id="example2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
Summarizing this article, I wrap up this functionality into a standard jQuery plugin, which you can use on your sites
jQuery.fn.fadingSiblings = function() {
return this.each(function(i) {
jQuery(this).children().hover(function () {
jQuery(this).siblings(":visible").stop().fadeTo(800, 0.4);
},
function () {
jQuery(this).siblings(":visible").stop().fadeTo(700, 1);
});
})
};
Usage:
jQuery(function(){
jQuery(selector).fadingSiblings();
})
Tweet This
Digg This
Save to delicious
Stumble it
RSS FeedLeave a Reply
0 Trackbacks
Trackback URL for this post:
http://o2v.net/blog/easy-rollovers/trackback
1 Pings
- RollOver con JQuery :digilabs.com.ar2010-06-28 04:26:20
[...] Más información y demos en: http://o2v.net/blog/easy-rollovers [...]
I don't see anything happening in your demos.. is it broken?
OSX Chrome / FF
Adam, thanks for heads up. Looks like transition to WP3 wasn't smooth - it overwritten a few necessary js files . Should be working now, except example with images.
Hi Andrei-
the Fading Siblings Slide in the right sidebar is linking to this page EasyRollovers.
AWESOME work on this site btw!
thanks
Jon
whoops! I just realized this IS the Sibling Slide! sorry about that.
Maybe it is the graphic that you are using on the sidebar image that threw me off - I guess I was expecting to see a sliding bar or something like that...
thanks again
Jon
Jon, thank you for your comments :).
I will add another Siblings example soon. For my slide/thumbnail I just used an example from one of the sites where I have used this script: http://pla.libertyconcepts.com/ (scroll to the bottom)