• Special Downloads
    • Free Icons
    • Freebies
    • jQuery Scripts
  • Licences
    • Apache License
    • MIT License
    • CC License
    • GPL License
    • LGPL License
    • GNU License
    • Other Licenses
    • No License
  • Scripts & Apps
  • XHTML & CSS
  • Contact Greepit



jQuery CSS3 Tabs With Breadcrumb and Pagination: ClassyTabs


 25 Apr 2011


Tabs are a useful tool for providing bulk of information in a small space with complete interactive experience. They can animate, contain images and forms, list features, and provide tabbed interface for dynamic content and much more.

However most tab solutions available online are too complex to personalize, scale up or trim down – unlike Classy Tabs.

Classy Tabs is a lightweight, jQuery plugin that creates clean, fast, and efficient tabs. Powered by jQuery and CSS3, Classy Tabs is free to use and easy to personalize for all types of contents. You can use it to display plain text, dynamic content, images, forms etc.

Breadcrumb and Pagination Support jQuery Tabs: ClassyTabs

Classy Tabs can also be personalized to modify colors and styles, add paging/navigation (check out free jQuery Pagination plugin), provide visual effects and do much more to suit your design template. It renders cleanly and efficiently in all major browsers and can be integrate with all popular publishing platforms like WordPress etc.

ClassyTab Parameters

  • roottitle: Title for root/home, this title will be used for breadcrumb under tab e.g. Home
  • rooturl: The url for root/home, e.g http://greepit.com
  • showbreadcrumb: If true bredcrumb navigation will be displayed, set showbreadcrumb to false if you dont want to show breadcrumb, default is true.
  • selectedtab: This parameter determines which tab to be displayed when the page loads, by default fist tab will be displayed, to show second tab set value to 1, for third tab use 2 and so on..
  • ontabclick: Callback function to be called when a particular tab is clicked, tab id will be returned as a parameter to this function. See the example below for details.

Using ClassyTab

Add the following under <Head> tag of your HTML file.

  • Add a reference to latest jQuery script
  • Add a reference to classytab.js file
  • Add a reference to classytab.css file

You also need to add an unordered list containing anchor tags under <Body> tag of your HTML file. Wrap all your contents within a block element (div) and add class “tab-contents”, for each of your content add the class “tab-content”.

Finally, add the following code under <Head> tag.

<script type="text/javascript>$(document).ready(function() { $('#classytabs').classytabs({ root: 'Home', rootlink: 'http://greepit.com',ontabclick}); });</script>

Requirements: jQuery Library
Compatibility: All browsers
Demo: http://greepit.com/ClassyTabs/
Download: http://greepit.com/ClassyTabs/ClassyTabs.zip
License: MIT






    Share This


Related Posts


110+ Free Responsive HTML5 CSS3 Website Templates
September 2, 2013

Free Responsive Amazing Website Templates (Business & Portfolio)
June 27, 2013

Weekly Web Design and Development News, Tutorials and Tools – Issue#4
June 19, 2013



7 Comments

jQuery CSS3 Tabs With Breadcrumb and Pagination: ClassyTabs | Greepit » WB Tips
said 3 years ago

(Reply)



[...] See more here: jQuery CSS3 Tabs With Breadcrumb and Pagination: ClassyTabs | Greepit [...]

網站製作學習誌 » [Web] 連結分享
said 3 years ago

(Reply)



[...] jQuery CSS3 Tabs With Breadcrumb and Pagination: ClassyTabs [...]

Red
said 2 years ago

(Reply)



Hi,

Thanks for giving this script. However, I am trying to disable the breadcrumb. When I set it to False in the js file, everything stops working. i.e. clicking the tabs no longer does anything.

Am I doing something wrong?

Any help appreciated.

Thanks

    Saif
    said 2 years ago

    (Reply)



    Red,

    The issue is fixed and updated.

Ty
said 2 years ago

(Reply)



Thanks for this, it is great! I’ve got a question… when I add any links, when they’re click, they just load a blank tab. But, if you right-click them, you can successfully open them in a new window. Is there something additional that I need to do to get links working to external pages?

Thanks!

Kirsten
said 2 years ago

(Reply)



Hi,

I am trying to implement the plugin on a singlepage website. I have a navigation at the top of the page, and each time I click the navigation in the top and then scroll to see the tabs, the content of the selected tab is dissappeared and the breadcrumb is left together with a styled selected tab.

I tried changing the conditions in the js so the content of the tab is only affected by tablinks, but I do not have enough js experience for this. Is it possible?

Thanks in advance.

Weekly Web Design and Development News, Tutorials and Tools - Issue#4 | Greepit
said 5 months ago

(Reply)



[...] jQuery CSS3 Tabs With Breadcrumb and Pagination: ClassyTabs [...]



Leave a Reply Cancel reply


  • Recent Posts

    • JavaScript Library For Simultaneous & Resumable Uploads – Resumable.js
    • 430 Free and Beautiful Icon Font: Ionicons
    • Simple, Lightweight and Fast jQuery Responsive Touch Slider – GlideJS
    • Form Building Library for Bootstrap, jQuery Mobile and jQuery UI – Alpaca
    • Lightweight jQuery plugin to Set Type/Text on a Circle – Circletype.js
  • Search Resources

  • Categories

    • Actionscript
    • Ajax
    • Apache License
    • Articles & Books
    • Brushes
    • BSD License
    • Business Cards
    • CC License
    • Charts & Maps
    • Chat
    • CMS
    • Colors
    • Components
    • Design
    • Effects
    • Extras
    • Featured
    • File Managers
    • Flash
    • Fonts
    • Frameworks
    • Free Icons
    • Free License
    • Freebies
    • Freebies
    • Fun
    • Gallery
    • GNU License
    • GPL License
    • Icons
    • Images
    • Information
    • Interviews
    • Invoicing
    • Javascript
    • jQuery Scripts
    • LGPL License
    • Licences
    • Media
    • Menu and Navigation
    • MIT License
    • Mobile
    • Mobile Development
    • No License
    • Open Source
    • Open Source
    • Other Licenses
    • Pattern
    • PHP
    • Plugins
    • Popups & Notifications
    • PSD
    • Reviews
    • Scripts & Apps
    • SEO
    • Site of the week
    • Software
    • Software & Tools
    • Statistics
    • Templates
    • Texture
    • Tips and Tutorials
    • Tools
    • Useful Snippets
    • User Interface
    • Validations
    • Vectors
    • Web Application
    • Web Application
    • WP Theme
    • WYSIWYG HTML Editor
    • XHTML & CSS
  • Tags

    Actionscript AI Ajax Android Animation Canvas CMS CSS CSS3 Firefox Flash Framework Freebies Gallery Google Grid Html HTML5 Icon Icons Images iOS Javascript jQuery Library Mootools MYSQL Navigation Open Source Photoshop PHP Plugin PNG PSD Responsive Script Software Theme Tool Tools Twitter Vector Web Application Web Design Wordpress



    Copyright 2013 Greepit.com