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.

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!

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Tutorial