Create Animated Tabs using JQuery and CSS.
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.
JQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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.
Recommended WordPress Themes Store
