jQuery Horizontal Tooltips Menu Tutorials

Written by Kevin Liew on 21 Aug 2009
243,835 Views • Javascript
Demonstration Download

Introduction

Last week, we have gone through How to make a Lava Lamp Menu Tutorial, now, we're doing something a little bit similar - Tooltips menu.

You will need jQuery easing plugin for the animated transition. This is how it looks like:

Tooltips Menu

1. HTML

As usual, it's a good practise to use UL List for menu. For the menu images, you need to put the caption in the ALT attribute, because jQuery will look at the ALT for it.

For #box div, we're creating a self-expandable tooltips, the length of the tooltip will expand according to the size of the content. This is the chart to show how we're going to achieve it.

Create a self-expandable tooltips
<div id="menu">

	<ul>
<li><a href="#"><img data-src="user.png" width="32" height="32" alt="My Profile" title=""></a></li>
		<li><a href="#"><img data-src="photo.png" width="32" height="32" alt="Photo Gallery" title=""></a></li>
		<li><a href="#"><img data-src="bookmark.png" width="32" height="32" alt="Social Bookmarking Tools" title=""></a></li>

		<li><a href="#"><img data-src="rss.png" width="32" height="32" alt="RSS" title=""></a></li>
		<li><a href="#"><img data-src="search.png" width="32" height="32" alt="Search" title=""></a></li>		
		<li class="selected"><a href="#"><img data-src="setting.png" width="32" height="32" alt="Control Panel" title=""></a></li>

	</ul>
<!-- If you want to make it even simpler, you can append these html using jquery --><div id="box"><div class="head"></div></div>
	
</div>

2. CSS

I have added inline comment in the following CSS code. If you want to learn more about CSS, read my previous post 15 CSS Tips and Tricks.

	body {
		font-family:georgia; 
		font-size:14px; 
	}
	
	a {
		text-decoration:none; 
		color:#333;
		outline:0;
	}
	
	img {
		outline:0; 
		border:0;
	}
	
	#menu {
		/* you must set it to relative, so that you can use absolute position for children elements */
		position:relative; 
		text-align:center; 
		width:583px; 
		height:40px;
	}
	
	#menu ul {
		/* remove the list style and spaces*/
		margin:0; 
		padding:0; 
		list-style:none; 
		display:inline;
				
		/* position absolute so that z-index can be defined */
		position:absolute; 
		
		/* center the menu, depend on the width of you menu*/
		left:110px; 
		top:0; 
		
	}
	
	#menu ul li {
		
		/* give some spaces between the list items */
		margin:0 5px; 
		
		/* display the list item in single row */
		float:left;
	}
	
	#menu #box {
		
		/* position absolute so that z-index can be defined and able to move this item using javascript */
		position:absolute; 
		left:0; 
		top:0; 
		z-index:200; 

		/* image of the right rounded corner */
		background:url(tail.gif) no-repeat right center; 
		height:35px;


		/* add padding 8px so that the tail would appear */
		padding-right:8px;
		
		/* set the box position manually */
		margin-left:5px;
		
	}
	
	#menu #box .head {
		/* image of the left rounded corner */
		background:url(head.gif) no-repeat 0 0;
		height:35px;
		color:#eee;
		
		/* force text display in one line */
		white-space:nowrap;

		/* set the text position manually */
		padding-left:8px;
		padding-top:12px;
	}

3. Javascript

Javascript is pretty straight forward, the calculation isn't that hard either. So, once it's executed, it does the following things:

  1. Calculate the left value
  2. Grab the default value from the selected item
  3. Set the left, top and the caption to the box

On mouse over:

  1. Calculate the left value
  2. Grab the current item caption
  3. Set the left, top and the caption to the box

On mouse leave:

  1. Calculate the left value
  2. Grab the default value from the selected item
  3. Set the left, top and the caption to the box
	
$(document).ready(function () {

	//transitions
	//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
	var style = 'easeOutExpo';
	var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
	var default_top = $('#menu li.selected').height();

	//Set the default position and text for the tooltips
	$('#box').css({left: default_left, top: default_top});
	$('#box .head').html($('#menu li.selected').find('img').attr('alt'));				
		
	//if mouseover the menu item
	$('#menu li').hover(function () {
		
		//get the left pos	
		left = Math.round($(this).offset().left - $('#menu').offset().left);

		//Set it to current item position and text
		$('#box .head').html($(this).find('img').attr('alt'));
		$('#box').stop(false, true).animate({left: left},{duration:500, easing: style});	

		
	//if user click on the menu
	}).click(function () {
		
		//reset the selected item
		$('#menu li').removeClass('selected');	
		
		//select the current item
		$(this).addClass('selected');

	});
	
	//If the mouse leave the menu, reset the floating bar to the selected item
	$('#menu').mouseleave(function () {

		//get the left pos
		default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);

		//Set it back to default position and text
		$('#box .head').html($('#menu li.selected').find('img').attr('alt'));				
		$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});	
		
	});
	
});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Demonstration 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.

29 comments
TutsValley.com 16 years ago
Nice one. Love it. Thanks :)
Reply
Masoud 16 years ago
nice job !

but i finde a little bug on galleris, chek it !

it\\'s better to add some extra animations when the new text is add to tooltip.

thanks for share bro :))
Reply
ฟรี mp3 16 years ago
Nice.
Reply
thiago 16 years ago
pretty cool.
Reply
Mia 15 years ago
Loved this as much as the Digg styled tooltip :) Beautiful K -
Reply
shoaib 15 years ago
this is just superb ,and u made it loook really simple as hell,thnx
Reply
Operation Technology 15 years ago
Nice article. We are actually implementing this JQuery functionality for unifying multiple sites into one portal site.
Reply
Sade 15 years ago
Its a great artcile. Nice jo, thx.
Reply
jardel goiaba 15 years ago
legal esse tutorial em mas tá precisando de mais exlicação! merda!
Reply
argonbuy 15 years ago
tanks for jquery horizontal tooltips menu tutorials
Reply
sajan kota 15 years ago
Thanks a ton for this very nice menu, keep up the good work.
Reply
VINIT PRATAP SINGH 15 years ago
Hi.. is anybody checking in ie6... its not working well in ie6. can any body make it again also for ie6 comfortable.
Reply
123doing 15 years ago
It's very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
Reply