jQuery Sliding Tab Menu for Sidebar Tutorial

jQuery Sliding Tab Menu for Sidebar Tutorial


jQuery Sliding Tab Menu for Sidebar Tutorial

Introduction

This tutorial, we will be making a jQuery Sliding Tab Menu for sidebar. Previously, I made a tutorial about jQuery Tabbed Interface / Tabbed Structure Menu, if you have not read it yet, check it out. I'm using it for my sidebar at the moment. The differences between both tab menus are, the sliding direction and this time, we are using a little bit different HTML structure and massive change in jQuery script.

We will be using a famous plugin called jQuery.scrollTo. jQuery scrollTo is an amazing plugin and doing sliding menu has never been so easy! Please continue reading, As usual, this tutorial is separated into 3 sections: HTML, CSS and Javascript.

1. HTML

Structure for jQuery Scroll To Tab Menu

Refer to the image above, it's the DIV structure for this tutorial.

#scroller-header: Inside #scroller-header, this is where we will put the links. In the link HREF attribute, we will put in the id of the sub panels (#panel-1, #panel-2, #panel-3 and #panel-4) inside #panel. jQuery will able to scroll it to the correct position according to the ID specified in the HREF.

#scroller-body: We put a background image about 900px height and set the background position to bottom.

#mask: This DIV plays an important role to hide other panels. Adjusting the height and width of #mask will able to display the panel content. Everytime when a link is clicked, jQuery will get the height of the sub-panel and set the height of #mask accordingly.

#panel: Inside #panel, we have 4 DIVs named #panel-1, #panel-2, #panel3, #panel-4. Those are sub-panels, you can place your content inside here, and feel free to add more sub panels.

<div id="scroller-header">
	<a href="#panel-1" rel="panel" class="selected">Link 1</a>
	<a href="#panel-2" rel="panel">Link 2</a>
	<a href="#panel-3" rel="panel">Link 3</a>
	<a href="#panel-4" rel="panel">Link 4</a>
</div>
<div id="scroller-body">
	<div id="mask">
		<div id="panel">
			<div id="panel-1">
				......
			</div>
			<div id="panel-2">
				......
			</div>
			<div id="panel-3">
				......
			</div>
			<div id="panel-4">
				.......
			</div>	
		</div>
	</div>
</div>

2. CSS

Structure for jQuery Scroll To Tab Menu

There are some important css:

#scoller-header, #scroller-body : We can change the background images in these ID. For the #scroller-body, the vertical alignment of the background must be bottom.

#mask : Width is the size of a sub-panel, this width must be specified because we will do some calculation based on it.

#panel div : Float set the left so that the DIV will display in a single row. If you want to scroll it horizontally, you can remove it.

body {
	padding:0;
	margin:0 20px;
	background:#d2e0e5;
	font:12px arial;
}

#scroller-header a {
	text-decoration:none; 
	color:#867863; 
	padding:0 2px;
}

#scroller-header a:hover {
	text-decoration:none; 
	color:#4b412f
}

a.selected {
	text-decoration:underline !important; 
	color:#4b412f !important;
}

#scroller-header {
	background:url(images/header.gif) no-repeat;
	width:277px;
	height:24px;
	padding:35px 0 0 15px;
	font-weight:700;
}

#scroller-body {
	background:url(images/body.gif) no-repeat bottom center;
	width:277px;
	padding-bottom:30px;

}

#mask {
	width:250px;
	overflow:hidden;
	margin:0 auto;
}

#panel {

}

#panel div {
float:left;

}


/* extra optional styling for each tab content */
#panel-1 {
}

#panel-2 {
}

#panel-3 {
}

3. Javascript

With the scrollTo plugin, we don't have to worry about the transition and scrolling effect. This is the advantage of using plugin, everything can be so easy.

Basically, jQuery performs the following steps on page load:

  1. Get the height of the first sub-panel and set it to #mask.
  2. Calculate the width of #panel by multiplying #mask width with total of sub-panel (#panel div)
  3. Set the width of sub-panel according to the #mask width. As a result, #mask width must be the same with sub-panels and must be specified in the CSS.

And, jQuery performs the following steps when a link is clicked:

  1. Get the height of the sub-panel. jQuery grabs the sub-panel id from href attribute of the anchor element.
  2. Remove selected class from all the links, and add the selected class to the user has just clicked.
  3. Do the animation on height, Animate the #mask by setting the height of the sub-panel.
  4. After that, run the scrollTo plugin, scroll it to the sub-panel.
  5. Remember to disable the link default behavior by adding 'Return false' in the end.
$(document).ready(function() {	

	//Get the height of the first item
	$('#mask').css({'height':$('#panel-1').height()});	
	
	//Calculate the total width - sum of all sub-panels width
	//Width is generated according to the width of #mask * total of sub-panels
	$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
	
	//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
	$('#panel div').width($('#mask').width());
	
	//Get all the links with rel as panel
	$('a[rel=panel]').click(function () {
	
		//Get the height of the sub-panel
		var panelheight = $($(this).attr('href')).height();
		
		//Set class for the selected item
		$('a[rel=panel]').removeClass('selected');
		$(this).addClass('selected');
		
		//Resize the height
		$('#mask').animate({'height':panelheight},{queue:false, duration:500});			
		
		//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
		$('#mask').scrollTo($(this).attr('href'), 800);		
		
		//Discard the link default behavior
		return false;
	});
	
});

Conclusion

That's it. Make sure you check out the demo and download the source code to play with it. If you have created your own, feel free to drop your link in the comment section to show off! : )

Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post into your bookmark. Or you can subscribe to my RSS for more jQuery tutorial posts! 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

89 comments

puluthriau
Tue, 8th February 2011
thanks, but, how to put a widget in there :P Reply
hiulit
Sun, 6th March 2011
Hey! Great tutorial!!!
But I have a question: Could it be possible to make a "previous´, "next" button instead of these links?
something like "go to the next anchor"?

Thanks a lot!!! Reply
rumi
Fri, 18th March 2011
HI I am trying to use this nice menu to my web page......but I'm new at jQuery . so when I use this jQuery plugin with another.......there is a conflict......and i tried jQuery noConflict().my it didn't work.the another plugin i used also use the $document.read() function......but that script is runnig........please help me anyone ......... Reply
Kevin Liew Admin
Sat, 19th March 2011
if you're using jQuery noConflict(), you need to use jQuery instead of $ sign.

http://api.jquery.com/jQuery.noConflict/

use this var j = jQuery.noConflict();
so, instead of $(document).ready() you use j(document).ready()

as a result, you need to change my script and replace all the $. Reply
keyuri
Tue, 12th April 2011
very nice

thanks for sharing Reply
Dylan
Mon, 2nd May 2011
Im having trouble when refreshing the page...it works fine in IE ( this might be a first) but it doesn't refresh right in Firefox. It resizes the panel and moves the tab to the first selected but it keeps the content from the panel that your on....anyone else having this problem?...please help. Reply
Kevin Liew Admin
Tue, 3rd May 2011
add this in the first line after $(document).ready():

$('#mask').scrollTo('#panel-1', 1);

it makes sure it always display the first item first. Reply
quiet0ne
Tue, 24th May 2011
thanks for this fix! I was having the same issue. Reply
Luke
Fri, 13th May 2011
Thanks for the great tutorial, I have added it to a website I am currently building. One question though, I want to added a link within the panel content which will move the user to the next panel, how can I do this so that the scroll animation is used and the selected class is moved on the scroller header ? Reply
Kevin Liew Admin
Sun, 15th May 2011
good question.. i think you can just duplicate the tab link into the content:

<a href="#panel-2" rel="panel">Link 2</a>

so, the href is the panel you want to scroll to and all the a tag with rel=panel will be picked by jQuery. try that. Reply
Slax
Mon, 13th June 2011
Hey, i'm trying to implement this on my wordpress website and so far its working just fine except I want to use it together with my pagination and every time i change "page" it reverts back to the first tab. Is there any way to add cookie support? Reply
Kevin Liew Admin
Tue, 14th June 2011
yea, you can do that, but i will not able to show you though... you can read it from here:
http://www.queness.com/post/666/weekly-tips-learn-how-to-use-cookie-with-javascript Reply
Simon Farrugia
Thu, 7th July 2011
Has anyone noticed that when zooming the page in and out the panels move and you can see content from both panels?! Don't try this when on the first panel.

Does anyone has a fix for this? Reply
ashraful
Mon, 22nd August 2011
I want to use this on drupal7. So, How can I implement it on Drupal7? Reply
Prasant
Mon, 22nd August 2011
I wanted to use this technique for a fullscreen layout - where each panel/page will have a width that stretches the width of the view-port. Any help appreciated. Thank you. Reply
Kevin Liew Admin
Wed, 24th August 2011
You need to write a script that resize the panel to the width of the screen. I don't think CSS will able to do that trick, at least not in all browsers. Reply
Adam Robertson
Tue, 23rd August 2011
I set up the scrolling header and body, the mask as well as my panels all at 460px. Sliding between panels within the mask works perfectly, however nothing can exists to the right of the header/body. I would like to have other content out to the right of my tab menu but everything I put after gets pushed down to below the scrollable-body leaving ~650px of blank space after the menu. Any suggestions? Reply
Adam Robertson
Tue, 23rd August 2011
Sorry, it was a CSS problem, not a jquery plugin issue. Thanks! Reply
hendoko
Sun, 20th November 2011
thanks...i like ..... Reply
roman
Tue, 17th January 2012
great post! is it possible to make the tabs collapsible like here: http://jqueryui.com/demos/tabs/#collapsible Reply
tina
Thu, 10th May 2012
I have problem with IE8 , scroll no working Reply
zack
Wed, 23rd May 2012
Me also having the same problem

http://repository.uobabylon.edu.iq Reply
gubendran
Mon, 28th May 2012
Hi,
I want to set the 4th tab(categories) as default tab. it highlights,but not open 4th tab content. Any one help me
Reply
Kevin Liew Admin
Thu, 14th June 2012
After document ready, put this and the ID of the fourth tab:
$('#mask').scrollTo('#ID-PUT-HERE', 0); Reply
Rasheed Sulaiman
Sat, 7th July 2012
Is there a way to make this plugin work with jQuery 1.7.2? Reply
Trần Xuân Sâm
Tue, 15th January 2013
hello. jquery well. but I use 2 times on the website I do not know how. please help me. thank you Reply
Maha
Mon, 1st July 2013
Hi Kevin!
I had already spotted this tutorial a couple of years ago. Finally, it is necessary for me! )
Thank you for your achievements!

There is a question: How to combine all this with localscroll.js? It is essential to attribute a link for "panels" and save it.

Sorry for my english)
Maha! =) 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