glowing hover menu with jQuery

A little can sometimes make all the difference. Especially in minimalist layouts a little effect can add the desired spice. Now the effect for this little tutorial is probably very well known from, where it animates the main navigation. Now let’s go and see how we can implement this effect as cross-browser as possible with jQuery.

View Demo

Download Source

First we build a quick HTML structure with the usual unsorted list for menu links:

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">more shiny</a></li>
    <li><a href=""></a></li>

Second comes the CSS file and already here the browser specific part starts:

	color: white;
	text-shadow: #000 0px 0px 5px;
	text-decoration: none;
	-webkit-font-smoothing: subpixel-antialiased; /* fix for Chrome eating up webfonts */
	-webkit-text-stroke: 0.001em white; /* fix for Chrome eating up webfonts */
	-webkit-transition: text-shadow .5s ease-out; /* takes care of animation for Webkit */

	text-decoration: none;
	text-shadow: #ea1f74 0px 0px 5px;
	color: white;
	-webkit-transition: text-shadow .3s ease-out; /* takes care of animation for Webkit */

Notice the font-smoothing and text-stroke, which is a fix for Chrome, when using webfonts. Now this does all the work for recent webkit browsers already, for the rest of the bunch, there is a nice little jQuery plugin: animate-textshadow.js. This is the jQuery code enabling the smooth transition in Firefox 3.1+, Opera (according to author untested, could not make it work) and IE9 (untested). Now this apparently also takes care of Chromes little issue with webfonts and text-shadow, but I think it’s important to mention it anyhow.

The final 8 lines of jQuery that needs to be inserted to trigger the animate-textshadow pluginĀ on the elements is the following:

	$('.menu a').hover(
		function() { 
			$(this).animate({textShadow: '#ea1f74 0px 0px 5px'}, 300);},
		function() { 
			$(this).animate({textShadow: '#000 0px 0px 5px'}, 500);

So this is it, a nice glowing menu, (for webkit browsers possible through CSS3 only) and for the rest through jQuery+a plugin. The full source code is of course visible on the example linked and downloadable on top.

Leave a Reply

Your email address will not be published. Required fields are marked *