Clean and Attractive jQuery Vertical Menu Tutorial

Clean and Attractive jQuery Vertical Menu Tutorial


Clean and Attractive jQuery Vertical Menu Tutorial

Introduction

Alright, today we will learn how to make a vertical menu. It looks something like a lava lamp menu (Simple Lava Lamp Menu Tutorial) because it has an icon following the hovered item. It's a pretty simple menu, but with a little bit of jQuery script, we will able to make it even more eye-catching.

1. HTML

As usual, from all my previous tutorials, I always like to keep HTML clean. Well, it's a good practise so that other can read your code easily. We use a list for the menu and a div with block and png (fix the png transparent image) classes for the moving object.

Vertical Menu

Image above illustrates the structure of the html. Class .block is floating above UL list within the #menu.

<div id="menu">
	<ul>
		<li><a href="#">Item 01</a></li>
		<li><a href="#">Item 02</a></li>
		<li><a href="#">Item 03</a></li>	
		<li><a href="#">Item 04</a></li>
		<li><a href="#">Item 05</a></li>
		<li><a href="#">Item 05</a></li>
	</ul>
	<div class="block png"></div>
</div>

2. CSS

I have something new in CSS - quick CSS PNG fix! Credit to Komodomedia for the script. It's really easy to implement. What you need to do is, if you have a div or an image with transparent PNG image, assign the .PNG class to it and it will fix the ie6 issue. Yes, IE6 issue, it has a lot more issues. If you want to know more about it, read this article for the bugs and fixes -

Right, I have put comments in the following CSS code to explain its purposes.

	#menu {
		font-family:verdana;
		font-size:12px;
		position:relative;
		margin:0 auto;
		width:200px;
	}
	
	#menu ul {
		/* remove list style */
		list-style:none;
		padding:0;
		margin:0;	
		
		/* set the layer position */
		position:relative;
		z-index:5;
	}
	
		#menu li {
			/* set the styles */
			background:#ccc url(bg.gif) no-repeat 0 0;
			padding:5px;
			margin:2px;
			cursor:pointer;
			border:1px solid #ccc;
		}
		
		#menu li.hover {
			/* on hover, change it to this image */
			background-image:url(bg_hover.gif) !important;
		}
		
		#menu li a {
			text-decoration:none;	
			color:#888;
		}
	
	
	#menu .block {
		/* allow javascript to move the block */
		position:absolute;
		top:0;
		
		/* set the left position */
		left:150px;	
		
		/* display above the #menu */
		z-index:10;
		
		/* the image and the size */
		background:transparent url(arrow.png) no-repeat top right;
		width:39px;
		padding:4px;
		cursor:pointer;
	}
	
	/* fast png fix */
	* html .png{
		position:relative;
		behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
	}

3. Javascript

In the javascript section, once it's loaded, it grab the height of the menu and assign it to the block class and after that, move the block to the selected list item.

All the list items are being assigned to hover event, hence, if mouse hover is detected, it will get the top position of the list item and move the block toward it.

	
	$(document).ready(function () {

		//Set the height of the block
		$('#menu .block').height($('#menu li').height());

		//go to the default selected item
		topval = $('#menu .selected').position()['top'];
		$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});

		$('#menu li').hover(
			
			function() {
				
				//get the top position
				topval = $(this).position()['top'];
				
				//animate the block
				//you can add easing to it
				$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
				
				//add the hover effect to menu item
				$(this).addClass('hover');	
			},
			
			function() {		
				//remove the hover effect
				$(this).removeClass('hover');	
			}
		);
	
	});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

18 comments

kevin Admin
Wed, 23rd September 2009
Hi Anjei, sorry for that, I have fixed it. The problem was the script pointing to a wrong js folder. cheers Reply
Wordpress Arena
Wed, 23rd September 2009
this is very helpful and excellent tutorial Reply
kevin
Wed, 23rd September 2009
Pretty cool, i'll try to get it work on an horizontal way. Reply
Anjei2006
Wed, 23rd September 2009
А lesson does not work (download ver) =( , pls fixx

super site, super tutorials Reply
Anjei2006
Thu, 24th September 2009
Superb kevin, I very like your scripts. Reply
Mike More
Fri, 25th September 2009
This is awesome.. Reply
Roald
Mon, 28th September 2009
Nice one Kevin! Really like the vertical style in this one! Definitely gonna use this one.. Reply
cypherbox
Mon, 28th September 2009
This is nice. Thanks for the share. =) Reply
Lincoln Plumber
Thu, 1st October 2009
Great tutorial - many thanks. I have bookmarked it for future use. Reply
rana
Sun, 13th December 2009
Nice tutorial. Thank you... Reply
jeya
Mon, 4th January 2010
NIce tutorial, very nice backup codings.

Thankyou Reply
iglesia ni cristo
Fri, 23rd April 2010
I like the code. I will put this code to my site Reply
John
Fri, 30th April 2010
I see that the arrow position defaults to the "selected" nav item upon load, but it's not returning to that position once you scroll through the nav. Instead the arrow stays on the last nav item that the cursor hovers over. Is there a way to correct this so the arrow always resets to the nav item with the class of "selected"?

Thank you. Reply
Will
Wed, 7th July 2010
This is very nearly exactly what I've been looking for, but...
Is there anyway to get the whole of the button to be a clickable link? At the moment you can only click on the text. Reply
Azeem Michael
Thu, 14th October 2010
nice Reply
Hemant
Tue, 5th April 2011
vERY nICE dEMO oF jQUERY Reply
Anghel
Wed, 21st September 2011
you shoul change this line

function() {
//remove the hover effect
$(this).removeClass('hover');
}

to this

function() {
//remove the hover effect
$(this).removeClass('hover');
// reset's the block position to selected LI
topval = $('#menu .selected').position()['top'];
$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
}

so that the block goes back to the selected LI position.

Thanks for this snipet.
Reply
MayZuneMoe
Sun, 29th December 2013
Your design is very nice. In css, #menu .selected is using .But i wouldn't find how it work in the code.Please explain me. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement