Aug
30

Create Animated Tabs using JQuery and CSS.

Author ZeeShaN    Category CSS, JQuery, Web Development     Tags , ,

Tabs is used for utilizing space and keep some stylish effects on website. jQuery tabs are very popular and it created some fancy look on web pages. I created a simple in use but a fancy looking jquery and css based tabs to give you and example. I used css to make it in some rounded style. Its doesnt work for IE but its fine in Firefox and Chrome. I hope you will like this stylish and sexy tabs tutorial. Fee free to subscribe by email (no spams will be sent). Cheers !

Download all files to get this gallery.

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

Enter your email address:

Delivered by FeedBurner

JQuery Code

$(document).ready(function(){
 
$("#first-tab").addClass('buttonHover');
});
 
function navigate_tabs(container, tab)
{	
	$(".b").css('display' , 'none');
	$(".c").css('display' , 'none');
	$(".a").css('display' , 'none');
 
	$("#first-tab").removeClass('buttonHover');
	$("#second-tab").removeClass('buttonHover');
	$("#third-tab").removeClass('buttonHover');
 
	$("#"+tab).addClass('buttonHover');
	$("."+container).show('slow');
}

CSS

 body{
	/* Setting default text color, background and a font stack */
	font-size:13px;
	background: #fff;
	font-family:Arial, Helvetica, sans-serif;
}
.b, .c{ display:none;}
 
#body em{ font-style:normal; font-size:36px;}

.buttons{
	border-bottom:solid #d1c8b8 4px;
	display:block;
	padding:8px;
	width:80px;-moz-border-radius: 1em 4em 1em 4em;
	border-radius: 1em 4em 1em 4em;
	text-align:center;
	margin:1px;
	background:#4b7975;
	text-decoration:none; color:#FFFFFF;
	float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
 
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}

#body {
	background:#919b9d;
	text-align:justify;
	overflow:hidden;
	color:#fff;
	padding:20px;
	-moz-border-radius: 1em 4em 1em 4em;
	border-radius: 1em 4em 1em 4em;	height:200px;
	width:272px;
}
 
#wrap{
	text-align:left;
	overflow:hidden;
	width:350px;
	height:380px;
}

Download all files and use this awesome and fancy script.

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.







Enter your Email:

Click Here for Popular

Who I Am

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan

zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Tags

99points adobe AJAX ajax pagination ajax rating ajax tutorial ajax voting system captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials dreamweaver cs5 Facebook facebox farmville ffmpeg flv google api hacking Joomla JQuery JQuery Gallery JQuery menus Jquery tutorial mafia war Mootools MySQL pagination Payment PHP php curl recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter wall script Web XSS youtube

Comments