Create a smooth tabbed menu in jQuery

December 9th, 2008

Hi guys! As we have said many times, websites are evolving to rich online applications and tabbed menus can be very power and useful to show content to our visitors.

In this case, we are going to learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for our websites.

As always, here you have the live demo before starting the tutorial

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

Interesting…? Just continue reading!

Why this and not the UI Library?

Unlike other tutorials that make use of jQuery UI Library, we don’t want to spend our resources in loading a heavy library that has a lot of functions but it isn’t neccesary in some cases (like ours).

We are going to create our custom tabbed menu instead of use the jQuery UI Library that has a lot of code that we don’t need, so just pay attention and you will see it is easy, as always

Step 1: A little HTML layout

One more time guys, we begin our tutorial setting up the (x)HTML layout. In this tutorial we will have 2 main divisions:

Menu
Content divisions (with different classes)

These 2 divisions will be contained in a general container called container.

The HTML code is as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>yensdesign.com - Create a smooth tabbed menu with jQuery</title>
	<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
	<!--[if IE 6]>
		<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen," />
	<![endif]–>
</head>
<body>
	<a id="logo" title="Go to yensdesign.com!" href="http://www.yensdesign.com"><img src="css/images/logo.jpg" alt="yensdesign.com" /></a>
	<div id="container">
		<ul class="menu">
			<li id="news" class="active">News</li>
			<li id="tutorials">Tutorials</li>
			<li id="links">Links</li>
		</ul>
		<span class="clear"></span>
		<div class="content news">
			<h1>Latest News</h1>
			<ul>
				<li><img src="css/images/bullet.gif" alt="-" /> Boobles: First theme on Themeforest released!</li>
				<li><img src="css/images/bullet.gif" alt="-" /> Cokidoo becomes official</li>
				<li><img src="css/images/bullet.gif" alt="-" /> plusmusica.com private beta invitations</li>
				<li><img src="css/images/bullet.gif" alt="-" /> yensdesign.com 2.0 launched!</li>
			<ul>
		</div>
		<div class="content tutorials">
			<h1>Latest Tutorials</h1>
			<ul>
				<li><img src="css/images/bullet.gif" alt="-" /> Top 10 free fonts for professional design</li>
				<li><img src="css/images/bullet.gif" alt="-" /> Create an amazing music player using mouse gestures &amp;amp;amp;amp;amp; hotkeys</li>
				<li><img src="css/images/bullet.gif" alt="-" /> Boobles: First theme on Themeforest released!</li>
				<li><img src="css/images/bullet.gif" alt="-" /> Creating AJAX websites based on anchor navigation</li>
				<li><img src="css/images/bullet.gif" alt="-" /> Fast Tip: Create your personal blog to promote your self</li>
				<li><img src="css/images/bullet.gif" alt="-" /> How to make a brilliant mysql forum database from scratch</li>
			<ul>
		</div>
		<div class="content links">
			<h1>You may visit</h1>
			<ul>
				<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.plusmusica.com">www.plusmusica.com</a> - Online jukebox!</li>
				<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.cokidoo.com</a> - Awesome startup! :)</li>
				<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.cokidoo.com">www.pixelartgames.com</a> - Do you want pixel art games? ;)</li>
				<li><img src="css/images/bullet.gif" alt="-" /> <a href="http://www.dmsconsulting.es">www.dmsconsulting.es</a> - Great guys</li>
			<ul>
		</div>
	</div>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="tabs.js"></script>
</body>
</html>

There is nothing to comment over here… let’s jump into the CSS part.

Step 2: Adding the style with CSS

There is a little trick over here that must be remarked: We are going to create 3 different divisions with 2 classes, a common class called: content and a single class for each section. So we will have these divisions:

content news
content tutorials
content links

We are reusing the class called “content” and adding a second class (news, tutorials or links) to the same content division to change some little details in each section. Doing this you can save a lot of CSS code in your layouts.

There is the CSS code:


@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
	background: #fff;
	line-height:14px;
	font-size: 12px;
	font-family: Arial,  Verdana, Helvetica, sans-serif;
	margin:0pt;
	cursor:default;
	overflow: hidden;
}
html,body{
	height:100%;
	text-align: center;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
a{
	text-decoration: none;
}
/******* GENERAL RESET *******/
/******* LOGO *******/
#logo{
	margin-top: 1em;
	display: block;
}
/******* /LOGO  *******/
/******* MENU *******/
#container{
	margin: 7em auto;
	width: 400px;
}
#container ul{
	list-style: none;
	list-style-position: outside;
}
#container ul.menu li{
	float: left;
	margin-right: 5px;
	margin-bottom: -1px;
}
#container ul.menu li{
	font-weight: 700;
	display: block;
	padding: 5px 10px 5px 10px;
	background: #efefef;
	margin-bottom: -1px;
	border: 1px solid #d0ccc9;
	border-width: 1px 1px 1px 1px;
	position: relative;
	color: #898989;
	cursor: pointer;
}
#container ul.menu li.active{
	background: #fff;
	top: 1px;
	border-bottom: 0;
	color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
	margin: 0pt auto;
	background: #efefef;
	background: #fff;
	border: 1px solid #d0ccc9;
	text-align: left;
	padding: 10px;
	padding-bottom: 20px;
	font-size: 11px;
}
.content h1{
	line-height: 1em;
	vertical-align: middle;
	height: 48px;
	padding: 10px 10px 10px 52px;
	font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.news h1{
	background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
	display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.tutorials h1{
	background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
	display: none;
}
/******* /TUTORIALS *******/
/******* LINKS *******/
.content.links h1{
	background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
	display: none;
}
.content.links a{
	color: #5f95ef;
}
/******* /LINKS *******/

As you can see, we are going to show news section and hide the rest by default, then with jQuery we will be able to show/hide using events.

Step 3: Adding jQuery magic to our tabbed menu

First of all take a look at the events.js code:


/***************************/
//@Author: Adrian "yEnS" Mato Gondelle &amp;amp;amp; Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/

$(document).ready(function(){
	$(".menu > li").click(function(e){
		switch(e.target.id){
			case "news":
				//change status &amp;amp;amp; style menu
				$("#news").addClass("active");
				$("#tutorials").removeClass("active");
				$("#links").removeClass("active");
				//display selected division, hide others
				$("div.news").fadeIn();
				$("div.tutorials").css("display", "none");
				$("div.links").css("display", "none");
			break;
			case "tutorials":
				//change status &amp;amp;amp; style menu
				$("#news").removeClass("active");
				$("#tutorials").addClass("active");
				$("#links").removeClass("active");
				//display selected division, hide others
				$("div.tutorials").fadeIn();
				$("div.news").css("display", "none");
				$("div.links").css("display", "none");
			break;
			case "links":
				//change status &amp;amp;amp; style menu
				$("#news").removeClass("active");
				$("#tutorials").removeClass("active");
				$("#links").addClass("active");
				//display selected division, hide others
				$("div.links").fadeIn();
				$("div.news").css("display", "none");
				$("div.tutorials").css("display", "none");
			break;
		}
		//alert(e.target.id);
		return false;
	});
});

As you can see we are managing the click event of each li element from menu division. Using a switch sentence will allow us to show/hide and add/remove style for differente sections. Just that, no more guys.

Step 4: Trying our smooth tabbed menu!

And that’s all guys, as you can see it’s more difficult to think about the implementation of the idea than the code

That’s all guys, I hope you enjoy this tutorial as I did when I wrote it

You can try the tutorial online here to see how It is working and download here all sources.

One more thing guys! Thanks all who helped us to test plusmusica.com! If somebody wants to try it, just send us a comment over here!

See you on next tutorial!!

One more thing…

The certkiller offers you latest 642-892 questions and answers for guaranteed results. Check out the 642-642 tutorials, study guides, dumps and 640-863 practice test to ensure your success before hand.

Tags: Coding, javascript, jquery, menu, smooth, tabbed, Tutorials, web
Category: Coding, Tutorials, Web Design

This entry was posted on Tuesday, December 9th, 2008 at 8:20 pm and is filed under Coding, Tutorials, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Enjoy this post?

Your vote will help us to grow this website and write more entries like this one :)

2008 December 10 - Links for today « My (almost) Daily Links

December 10th, 2008

[...] Adrian Gondelle on how to Create a smooth tabbed menu in jQuery [...]

EtoYa

Another great tut! I think, was not bad in next tut to tell about making the windows on jquery. Thanks and respect to authors
Sorry for my english.

Adrián Mato Gondelle

@EtoYa thanks for posting! Do you mean a popup? We have published a tut about this over here: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

December 11th, 2008

@Adrián Mato Gondelle, not popup. I mean simply float window with min/max, resizing and drag options.

Ah right! I will see it. Thanks for giving us ideas

Manuel

December 15th, 2008

Hi, absolutely wonderful and simple, didn’t thought a moment to use it in my site, (BTW check it out to see the results ^.^) just made a little changes to work with dynamically created tabs and that’s all, thanks for this great tutorial

ndie

December 17th, 2008

thats greats

Antoine Leclair

December 18th, 2008

Nice visually!! But turn Javascript off and the page is dead. Also, you have mode than one h1 tag in the page. Not very accessible.

You could load only one tab and make it functionnal without Javascript (i.e. navigation should be real links that really reference pages that load the other tabs). Then, with jQuery, when document ready, you make an ajax call and append the 2 other tabs (or prepend, or a mix, depending on the page that is being viewed). Then comes your script.

Thanks Antoine and good point!

Web 2.0 Announcer

Create a smooth tabbed menu in jQuery…

[...]In this case, we are going to learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for our websites.[...]…

alec

Neat. I would like it a lot better if it could gracefully fail if the user has turned off javascript, but neat nevertheless.

Daniel Cavalcante

Nice tutorial and menu.. though the menu itself doesn’t seem quite so smooth, since it doesn’t degrade so smoothly and there is a lingering line underneath the tabs for a second after you change to it, but maybe that’s just me..

[Web] 連結分享 « 網站製作學習誌

December 21st, 2008

[...] Create a smooth tabbed menu in jQuery [...]

links for 2008-12-21 « pabloidz

[...] Create a smooth tabbed menu in jQuery yensdesign - Tutorials, Web Design and Coding (tags: javascript jquery) [...]

tj mapes » Blog Archive » What I’m Reading (weekly)

[...] Create a smooth tabbed menu in jQuery | yensdesign - Tutorials, Web Design and Coding [...]

Lucas

December 23rd, 2008

Hi Adrián, how are you?

Do you know if Google’s bot consider this tabbed menu a “black hat” pratice?
Because we are hiding content from user (but we give the option to unhide too).

Congratulations for the tutorial!

@Lucas Thanks for posting. I don’t think so

Nigel Hammon

December 30th, 2008

Looks very good, will try it on my next project. Just getting started with JQuery so I happy to learn new ideas from the ‘experts’.

@Nigel thanks for your comment! We just try to share our experience… but expert is so far hehe ^^

anver

January 6th, 2009

Good Job. You educate lots of people and your tutorials are fantastic. “Knowledge is Power and Sharing Makes it True”

@anver Thank you so much anver, comments like this help us to improve and continue our tutorials

Kanta

January 7th, 2009

Hi… a nice tut from you, as always…

A ling back I’ve made one similar to this.

But one thing I noticed in ur design same CSS selector ‘#container ul.menu li’ is used twice but with different styles. Was this done by mistake or with some reason?

And for the declarations in second ‘#container ul.menu li’, there is position set to relative (position: relative). Any way there are no children elements in the ‘li’ (except text), then why we need to position? But When I remove this style, the active menu link is getting underline and if positioned no bottom border.

I m a bit confused whether that declaration is over used or with a purpose. If the purpose is to remove the bottom border, how this is happening?

@Kanta thanks for posting! There is a reason for the position:relative it allow us to apply the margin-top correctly to the active li element that is a little “higher” than others.

Hustin

January 9th, 2009

Can we use this for commerical use? Do we have to buy license to use this script?

@Hustin Yeah sure, use it for whatever you want, just keep the credits in the script ^_^

thanks for your reply:)

Sang

February 2nd, 2009

Thanks, very nice tut…
I was trying to add more links that will go over one page, but I don’t see scroll bar in IE and Google Chrome. Is there any way I can show scroll bar?

rd2cm

Thanks for the great script!.
I added more links to one tab which doesn’t fit in one page. But scroll bar does not exist.
How do I enable scroll bar?

buntaropup

February 10th, 2009

beautiful article…thanks very much for your in-depth description. one note: you can really excise a ton of the .js and make that function (in tab.js) much more extensible this way:

$(document).ready(function(){
$(”.menu > li”).click(function(e){
$(”.yourClass”).removeClass(”active”).css(”display”, “none”);
$( “li[ id ^= 'yourID_' ]” ).removeClass(”active”);
$(this).addClass(”active”);
$(”div.”+String(e.target.id)).fadeIn();
return false;
});
});

steven

February 13th, 2009

hey

thx for that sweet tutorial, do you have a hint how to get the tab content loaded on click only?

also if you watch my site, first shown page contains all other tab contents too, the hied isn´t working

any ideas? loading the contents dynamic would be so great.

Reggie

March 2nd, 2009

Hi,

Just want to point out that the displayed (x)HTML in this tutorial is not well-formed since you’re missing the closing tag for the news, tutorials and links sections.

Well, on another note, I’ve been finding your jQuery tutorials really useful since I’m still quite new to the library. Hope there would be more to come

UrbanCool

March 3rd, 2009

if I were to put a text link in the News tab that I wanted to open the Turials tab…

how would one go about it? As i can’t see how a text link from one tab to the other would work!

any info would be greatly appreciated!

many thanks

with regards to the above…. its ok

i finally figured it out….

just take the li reference out of the js file

March 10th, 2009

Great article! Thank you for sharing!

Osiris

April 8th, 2009

Nice article,

like Buntaropup said you can get rid of the switch/case argument, I prefered to do it this way though
$(function(){
var tabs = Array(”news”,”tutorials”,”links”);
var targ = e.target.id;
for(i=0;i<3;i++){
(tabs[i] == targ)?$(”#”+tabs[i]).addClass(”active”):$(”#”+tabs[i]).removeClass(”active”);
(tabs[i] == targ)?$(”div.”+tabs[i]).fadeIn():$(”div.”+tabs[i]).css(”display”, “none”);
}
});

Sorry, should have been

$(document).ready(function(){
$(”.menu > li”).click(function(e){
var tabs = Array(”news”,”tutorials”,”links”);
var targ = e.target.id;
for(i=0;i<3;i++){
(tabs[i] == targ)?$(”#”+tabs[i]).addClass(”active”):$(”#”+tabs[i]).removeClass(”active”);
(tabs[i] == targ)?$(”div.”+tabs[i]).fadeIn():$(”div.”+tabs[i]).css(”display”, “none”);
}
return false;
});
});

April 22nd, 2009

can anybody give example of creating and closing tabs dynamically ( just like yahoo mail tabs )

Paulo

May 20th, 2009

Hi Adrián,

Thanks for this tutorial! I’m implementing the tab menu with another feature that uses jquery. Basically from withing the tab menu there are links that open up a popup div… sort of like thickbox.

Everything is functioning properly when I click the link to open the popup. When i close the div, the tab loads a “false” message in place of the tab menu. I think it’s returning false. This only happens in IE and Firefox but not in Safari. Do you have an idea as to how I could fix this?

Your help is much appreciated.

7 jQuery Tabbed Interface / Tabbed Structure Menu Tutorial | Theme Heven

June 10th, 2009

[...] 1. YensDesign [...]

Michael

July 1st, 2009

Hat’s off to you guys for this tab and the ‘loading content via AJAX’ script!

I have a question which would enhance this tut … how would you define a link on one page (within a paragraph of text) that selects a different tab?

Thanks again for the great site

Create a smooth tabbed menu in jQuery | yensdesign - Tutorials, Web Design and Coding « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit

July 9th, 2009

[...] Create a smooth tabbed menu in jQuery | yensdesign - Tutorials, Web Design and Codingyensdesign.com [...]

July 19th, 2009

okay, after searching round the net i used this syntax successful

to pick up the hyperlink within a document use
$(”a”).click(function(e){ …

instead of
$(”.menu > li”).click(function(e){ …

- michael

10 promote the website experience effect the jQuery plug-in unit | Pdf Search colection

August 4th, 2009

[...] Smooth Tabbed Menu [...]

z3rok

August 21st, 2009

thank for share

zorks

August 23rd, 2009

How come in the code, the unordered lists tags are opened again instead of closed?

Item 1
Item 2
<——— INSTEAD OF

rafal

August 28th, 2009

it’s possible to make this working that the content of particular tab is loaded after clicking on this tab?

Eldarrion

September 15th, 2009

A much easier (and shorter) way to do the jQuery bit, using the same CSS would be:

$(’.menu > li’).click(function(e) {
var show = e.target.id;
$(’.active’).removeClass(’active’);
$(this).addClass(’active’);
$(’.content’).hide();
$(’.’ + show).fadeIn();
return false;
})

See how that goes for you.

jQuery Tutorial – Create a smooth tabbed menu in jQuery | jQuery Wisdom

September 30th, 2009

[...] a lot of code that we don’t need, so just pay attention and you will see it is easy, as always Web Site Demo Download AKPC_IDS += “491,”;Popularity: unranked [?] Share and [...]

yasir qasim

October 4th, 2009

hi guy, i really appreciate your design but bcz iam arabic website administrator i wonder how can i change it to be arabic design ie from right 2 left ill be glad if u respond to my request

Ishtar

October 7th, 2009

Hey thanks,
From all the codes I’ve tried lately, this one did the job for me.

zago

October 8th, 2009

just a question … if in hidden.content exist swf what hapens … in FF dosn’t show swf ?

10 Advance jQuery Scripts to take Your Website to the Next Level | Programming Blog

October 11th, 2009

Ben

October 12th, 2009

If you wanted the current content to fade out before updating to new content you could use the following code:

$(”.menu > li”).click(function(e){
$(”.content.” + $(”.menu > .active”).attr(”id”)).fadeOut(”fast”, function() {
$(”.content.” + e.target.id).fadeIn();
$(”.menu > #” + e.target.id).addClass(”active”);
});
$(”.menu > .active”).removeClass(”active”);
return false;
});

Also, instead of static definitions of display: none, display: block for different content divs, use the following which will automatically hide all but the active tab:

$(”.content”).css(”display”, “none”);
$(”.content.” + $(”.menu > .active”).attr(”id”)).css(”display”, “block”);