Awesome JQuery Fly Out Menu Tutorial

In today’s awesome lesson, we’re going to build a JQuery fly-out menu. It’s a little different than what you would normally think of as a “fly-out” menu, so check out The Demo to make sure this is what you are looking for. This example is really a custom build for a website where you want something flashy and interactive, but that doesn’t have to be too flexible to accommodate dynamic content. There are ways around this with CSS, but I did it the custom way- with a background image of a fixed size that will not scale with your menu. Disclaimer: not tested in IE.

Here’s what it will look like when the menu flies out:

Check out The Demo.

Ok, so if you wanted to do something similar your self, here’s what’s going on in the code: HTML first:

<div id="wrapper">
    <div class="list_link">See All&#62;&#62;
        <div class="full_list">
            <h1>Here's The Full List</h1>
            <div id="list_closer" class="list_closer">
                
                
            </div>
            <ul>
                <li>I like shorts.</li>
                <li>They're cumfy and easy to wear</li>
            </ul>
            <ul>
                <li>Super Product: It's the best ever</li>
                <li>Thing 2: You will love it!</li>
                <li>Awesome: We Are!</li>
                <li>Delivering awesome results!</li>
                <li>Super Spectacular Professional!</li>
            </ul>
        </div>
    </div>
    <div class="spacer">&nbsp;</div>
</div>

I’m basically using the same logic you would to create a regular drop down menu with nested UL elements, but in this case, the elements are nested DIVs, the inner div with all the content is hidden, and when you mouse over a link, it pops-up. Here’s the CSS, as always I have included some extra style rules for formatting on the page:

* {
	margin: 0px; 
	padding: 0px; 
}

html, body {
	font-family: helvetica; 
	font-size: 12px; 
	background-color: #666; 
}

#wrapper {
	width: 460px; 
	height: 300px; 
	margin: auto; 
	background-color: #eee; 
	margin-top: 10px; 
	position: relative; 
	-moz-box-shadow: 0px 3px 20px #333;
	-webkit-box-shadow: 0px 3px 20px #333;
	box-shadow: 0px 3px 20px #333;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');}

.spacer {
	clear: both; 
}

ul {
	list-style: none; 
}

.list_link {
	color: #B3271A; 
	position: absolute; 
	top: 130px; 
	left: 20px; 
}

.list_link a {
	color: #B3271A; 
}

.full_list {
	width: 430px; 
	height: 270px; 
	background-image: url(images/list_bg.png); 
	background-repeat: none; 
	z-index: 800; 
	position: absolute; 
	top: -126px; 
	left: -10px; 
	display: none; 
}

.full_list h1 {
	float: right; 
	width: 300px; 
	martin-right: 200px; 
	margin-top: 30px; 
	margin-bottom: 20px; 
	color: #B3271A; 
	font-weight: lighter; 
}

.full_list ul{
	float: right; 
	width: 130px; 
	margin-right: 20px; 
}

.full_list li{
	margin-bottom: 8px; 
	color: #CCC; 
}

.full_list li a{
	color: #CCC; 
	text-decoration: none; 
}

.full_list li a:hover{
	color: #B3271A; 
}

.list_closer {
	display: none; 
	width: 105px; 
	float: left; 
}

.list_closer_top {
	width: 105px; 
	height: 115px; 
	float: left; 
	margin: 0px; 
	padding: 0px; 
	margin-bottom: 30px; 
}

.list_closer_bottom {
	width: 105px; 
	height: 115px; 
	float: left; 
	margin: 0px; 
	padding: 0px; 
}

And finally, the JQuery. The logic behind this is a little funky because you want the user to be able to hover over the element, and mouse off for a brief period without the list disappearing right away, hence all the setTimeout calls. The basic functionality comes from JQuery’s .hover() function, which binds a mouseover and mouseleave event to the element it’s called on, in this case the “.list_link”. When you hover over, the list pops up, using JQuery’s show(). When you hover off, JQuery hides it using (what else) .hide(). Notice also that I set a flag when the user mouses over or off the link. This is important because as you will notice, a lot of the code here is concerned with switching back and forth between display block and display none for closer elements I have identified with the class .list_closer. Why do I do this? Check out the following diagram:

The green boxes you see there are the closer divs. If you hover over them a separate hover function sets the timeout to hide the list, but if you beat the clock (500 milliseconds) it clears those timeouts and the list stays put. The real trick here is with the flags I set earlier. You need 2 flags (the flags are just variables) which tell you if you mouse off the closers and into the rest of the document body, or off the closers and back onto the list. If the case is the latter, then clear the timeouts and leave the list there, otherwise, the user may want to click on something else in the document, and you don’t want to obstruct their experience. So, after all that, here’s the JQuery:

$(document).ready(function(){
	var t; 
	var u; 
	var v; 
	var mouseStatus = 'off'; 
	var redStatus = 'off'; 
	$('.list_link').hover(function(){
		clearTimeout(t); 
		clearTimeout(v); 
		$('.full_list').show(500); 
		u = setTimeout("$('.list_closer').css('display','block');",500); 
		mouseStatus = 'on'; 
	}, 
	function(){
		clearTimeout(u); 
		t = setTimeout("$('.full_list').hide();",500);  
		v = setTimeout("$('.list_closer').css('display','none');",500); 
		mouseStatus = 'off'; 
	});
	$('.list_closer_top, .list_closer_bottom').hover(function(){
		t = setTimeout("$('.full_list').hide();",500);  
		v = setTimeout("$('.list_closer').css('display','none');",500); 
		redStatus = 'on'; 
	}, function(){
		redStatus = 'off'; 
		if (mouseStatus == 'on' && redStatus == 'off')
		{
			clearTimeout(t); 
			clearTimeout(v); 
		}
	}); 
}); 

Click the links below to view the demo, or download the source.
View The Demo.
Download The Source.