La Miscela

Hi people, to some weeks ago the Gringo released your most recent work to Microsoft Brazil a beautiful and accessible website for Windows Live product. Gringo is most known for their amazing works using Flash technology, but this one was a big surprise for those that follow your work.

I liked many things on this website, but the “Todos Produtos” menu was who took more my attention. Inspired on it I tried build a menu like it using just jQuery, html and css.

The secret is on css and html, it are who do go give all structure for jQuery work, in addition of the jQuery, i used some others plugins to achieve the result more close of original. They are jQuery UI and jQuery Easing.

This’s all jQuery code necessary:

$(function() {

$("#geral dl dt").addClass('open').toggle(
	function() {
		$("#geral dl").animate( { height: 160 }, { duration: 500, easing: 'easeOutQuint' } );
		$("#geral dl dt").removeClass('open').addClass('close');
	},
	function() {
		$("#geral dl").animate( { height: 34 }, { duration: 500, easing: 'easeOutQuint' } );
		$("#geral dl dt").removeClass('close').addClass('open');
	}
);

$("#geral dl").hover(null, function() {
	$(this).animate( { opacity: 1 }, 300).animate( { height: 34 }, { duration: 500, easing: 'easeOutQuint' } );
	$("#geral dl dt").removeClass('close').addClass('open');
});

$("#geral dl dd").hover(onOver, onOut);

});

function onOver () {
	$(this).animate( { backgroundColor: "#00aeef" }, 200 )
	$(this).children().animate( { color: "#ffffff", left: '5px' }, 200);
	$(this).next().animate( { opacity: 1, left: '189px' }, 200 );
}

function onOut() {
	$(this).animate( { backgroundColor: "#e7e7e7" }, 200 )
	$(this).children().animate( { color: "#333333", left: '10px' }, 200);
	$(this).next().animate( { opacity: 0, left: '-100px' }, 50 );
}

If you’re curious of how the rest of the code should be for get this menu, does download of the source code and look with your own eyes.

You still can see it in action here. ( Tested on Safari 4.04 Firefox 3.5.5 and Camino 2.0.1  for mac )

Bye.

Note: This source code haven’t intention of support all browsers, it’s just a experiment, if you want use this code feel yourself free to download, improve it and use him. Any support not will be provide.