Learn and share. The simplest harmony.

 

Nice Menu : CSS Animation & jQuery Animate

Posted on April 18, 2010 and got 37 shouts so far

Expressjs has a nice button menu. Yes it absolutely nice since it has opacity and box shadow on each button, automatically widen when mouseover and again opacity to transparent when mousedown. I’d like to explain how they works with pure CSS version and jQuery version.

The Technique
There are two techniques we want to do, opacity and widen the button. Opacity is an effortless technique since it was supported by CSS while widening the button is only CSS technique by increasing the button’s current padding with some pixels number. So, when the user mouseover the button we will add its padding to make it wide and decrease the button’s opacity when user click it.


menu



Pure CSS
Now based on the technique above we’ll create these button using pure CSS. First we create the button list using unordered list and then we set its style. Set the list’s display with inline, fill its background color with black and opacity with 20% (CSS value : 0.2), add box-shadow and set its border-radius into 15px to make it rounded. For opacity on background color we will use rgba().




menu-list



#menu-css li {
	display: inline;
	list-style: none;
}

#menu-css li a {

	/* Border Radius */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* Border Shadow */
	-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

	color: #ffffff;
	background: rgba(0,0,0,0.2);
	display: inline-block;
	padding: 5px 15px;
	outline: none;
	text-decoration: none;
}



menu-css



When user mouseover the button we’ll adding its padding and increase its opacity into 50% (CSS value : 0.5) and when user click it we decrease its opacity into 10% (CSS value : 0.1).

#menu-css li a:hover {
	background: rgba(0,0,0,0.5);
	padding: 5px 25px;
}

#menu-css li a:active {
	background: rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}



CSS Animation
Until above step we’ve a list of nice buttons but since they don’t have animation with them, the opacity transition and widening effects will not seen. So we’ll add the animation effect into each button, in this example each button represented by anchor element (<a>) it means we’ll put the animation on anchor style.

#menu-css li a {

	/* Animation (Webkit, Gecko & Mozilla) */
	-webkit-transition-duration: 0.20s;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-duration: 0.20s;
	-moz-transition-timing-function: ease-out;
}

-webkit for Webkit-based browser and -moz for Mozilla-based browser. The trasition-duration represent how long the transition should last and transition-timing-function represent how the animation will proceed over time. On the CSS above we just create the animation in 0.20 seconds with ease-out function.

These step will add animation into any style changes and make them animate. For example the anchor has property width with value 20px and the anchor has different style when user hover it (ie : width: 40px), the width changes from 20px to 40px will be animated.

#menu-css li {
	display: inline;
	list-style: none;
}

#menu-css li a {

	/* Border Radius */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* Border Shadow */
	-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

	/* Animation (Webkit, Gecko & Mozilla) */
	-webkit-transition-duration: 0.20s;
	-webkit-transition-timing-function: ease-out;
	-moz-transition-duration: 0.20s;
	-moz-transition-timing-function: ease-out;

	color: #ffffff;
	background: rgba(0,0,0,0.2);
	display: inline-block;
	padding: 5px 15px;
	outline: none;
	text-decoration: none;
}

	#menu-css li a:hover {
		background: rgba(0,0,0,0.5);
		padding: 5px 25px;
	}

	#menu-css li a:active {
		background: rgba(0,0,0,0.1);
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
		box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	}



Browser Issue
Since -webkit-transition has supported by latest Webkit-based browser including Safari and Chrome, Our pure CSS menu with animation above will works perfectly. Unfortunately -moz-transition will be introduced on Firefox 3.7 (Gecko 1.9.3) so the animation will not works on latest Firefox.



jQuery Animate
For a while Browser issue was disrupt our pure CSS menu, but of course we won’t stop to make it works. Using jQuery we can replace the CSS animation with $.animate() function. Surely with $.animate() function we just need to specify the pixels number for increasing the button’s padding.

For button opacity we can’t use opacity property in $.animate() function because it will make our button and text transparent. Since we just need to make the button (background) transparent we need $.animate() property that support rgba, we can use Mehdi Kabab’s plugin which is modification (to support rgba) from John Resig’s background color plugin.


rgba



If the user mouseover the button, we set its default padding and animate it by increasing its padding and opacity and when mouseout we revert to the default CSS value. When user click (mousedown) the button we decrease the opacity into 10% and revert to 50% when mouseup the button.

$(document).ready(function() {

	$('#menu-jquery li a').hover(

		function() {

			$(this).css('padding', '5px 15px')
		 .stop()
		 .animate({'paddingLeft'	: '25px',
					 'paddingRight'	: '25px',
					 'backgroundColor':'rgba(0,0,0,0.5)'},
					 'fast');
		},

		function() {

			$(this).css('padding', '5px 25px')
		 .stop()
		 .animate({'paddingLeft'	: '15px',
		 			'paddingRight'		: '15px',
		 			'backgroundColor' :'rgba(0,0,0,0.2)'},
		 			'fast');

	}).mousedown(function() {

		$(this).stop().animate({'backgroundColor': 'rgba(0,0,0,0.1)'}, 'fast');

	}).mouseup(function() {

		$(this).stop().animate({'backgroundColor': 'rgba(0,0,0,0.5)'}, 'fast');
	});
});



Conclusion
CSS3 offers us many advantages but sometimes we can’t take that advantages due to browser support, thankfully for jQuery offers us the alternative. Thanks for reading and happy coding! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated ;)

 

This Post Tags :

Bookmark Post :

Pin It
  • I quite like the css version, is smooth and nice in comparison with the jq one.
    Thanks for sharing!

  • definitely needs a:

    $().stop().animate()

  • hehehe…long time no see dude…hihihi
    wow CSS3…i am interest about it…

  • @All : Thanks for the response folks! ;)

  • nice post gan…..good job…;)

  • Nice implementation but I agree with @Nicolas about the $().stop().animate()

  • What is the license you will use this under ?

  • @Nicolas & @Federica Sibella : Thank you so much for noticing, i’ve updated the code and the demo ;)

    @catalin : It’s free to use under GPL.

  • This is nice as an example, however I would deter anyone from implementing this on a production website. The movement of the buttons will be unsettling for the user and behaves in an unfamiliar way. Cognitively, a button should behave like a button and appear as such. A prime example of this can be found on Sarah Parmenters’ You Know Who Design agencies ‘Send’ button.

  • Don’t forget -o-transition’s too!

  • Thanks !

  • Nice. We’re getting closer and closer into the realms of animated flash menus, but accessible and search engine friendly!

  • Out there´s a document for not ignoring Opera:

    http://www.opera.com/docs/specs/presto23/css/transitions/

  • nice plugin

  • Very goooood …
    Good work and best regards!

  • Great tutorial. Thx!

  • It don’t support IE6/7/8.

  • @All Thanks for your comments!

    @Thao : I am not thinking to support them yet.

  • The jQuery animation looks better than CSS Animation. But all of them are cool. Thanks for posting.

  • Deluxe Blog Tips: yes jQuery animations are better in browsers without CSS transitions (IE, Moz FF, Opera), in Chrome or Safari the effect is same and you see no difference. Try it ;)

    • here is a cool tool for creating loading css animations

  • Thao: It don’t support IE6/7/8 because IE is very old browser which doesn’t support almost anything :-D so do not cry, you have to use gifs or flash for IE implementations.

  • This is incredibly useful , but a little tweaking here and there could give a much nicer effect. I am taking the liberty of adding this article to my css aggregator site at CSSFind.com. Hope thats ok with you.

  • @All Thanks for your comments!
    @Sivanrajan Thanks!

  • No esta nada mal, me encanta el java jquery

  • Great stuff, thanx for sharing.
    more webdesigning stuff available at webspeaks.in

  • yeahp… still not working in IE..

  • longtime I was looking for nice script for my site http://www.5starstour.com, now I had thank jquery

  • There is a cool tool for creating loading css animations – http://cssload.net, it creates all codes for you

  • salut sama abang satu ini,…

    keep share gan,…
    thanks for tutorial,…
    ^_^

  • Beautifull example thanks!!

  • Great effect…!! loved it…

  • If you have a JS error with $
    ad this line top :
    jQuery.noConflict();
    and replace $ with jQuery

  • replace all $

  • Love the animation on the buttons progressive enhancement CCS3 is the way forward.

  • amazing code…gr8

  • @All : Thanks for the response folks!