Tutorials

Clean and Attractive jQuery Vertical Menu Tutorial

Written by Kevin Liew on 24 Sep 2009
152,157 Views • Shares
18 comments

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!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

18 comments
Will 6 years ago
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 6 years ago
nice
Reply
Hemant 5 years ago
vERY nICE dEMO oF jQUERY
Reply
Anghel 5 years ago
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 3 years ago
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