Smashed Blog Development

Tag Archive: menu

Easy Hover menu with jQuery

Comments Off

I’ve seen this or some variant around a few times. Easy one to use these days when you don’t have to cater for IE6. Make sure you grab the latest version of hoverIntent.js as well.

var config = {    
	 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
	 interval: 100,  // number = milliseconds for onMouseOver polling interval    
	 over: doOpen,   // function = onMouseOver callback (REQUIRED)    
	 timeout: 300,   // number = milliseconds delay before onMouseOut    
	 out: doClose    // function = onMouseOut callback (REQUIRED)    
};

function doOpen() {
	$(this).addClass("hover");
	$('ul:first',this).css('visibility', 'visible');
}

function doClose() {
	$(this).removeClass("hover");
	$('ul:first',this).css('visibility', 'hidden');
}
$("#topNav li").hoverIntent(config);

Shouldn’t be hard to figure out the HTML needed!