![]() ![]() ĬSS3 & jQuery Folder Tabs – This easy tutorial (with downloadable code) shares about creating folder tabs using CSS3 and jQuery. ![]() It uses semantic markup, is accessible for screen readers, and supports nested tabs on a page. Tabtastic – Tabtastic is an easy plugin to implement tabs using CSS and JS. It lets you set a default tab, change the tab dynamically, and add onLoad and onClick event callback functions. JavaScript Tabifier – An advanced tab plugin built with just JavaScript. What makes it interesting is its tabs have a nice-looking foldable transition. įoldable Tab Bar – A tabs widget based on pure CSS3 and no JavaScript, like various plugins on this list. What unique feature it brings is tabs overfitting in the screen are moved to a dropdown list. Pure CSS Bootstrap Adaptive Tabs – A Bootstrap-inspired tab system built using just CSS and no JavaScript. Unlike Tabby or WellTabber, it does not offer any advanced configuration. Īnimated CSS Tabs – Animated CSS Tabs is a CSS-only tabs system that lets you create simple, light tabs. However, it does not feature advanced options. It is simple to use and customizable as well. Material Design Tabs – A material design inspired tabs snippet built using Vanilla JavaScript. Like the latter, it supports various options to configure the tabs. WellTabber – WellTabber is another simple JavaScript plugin like Tabby. It is responsive such that tabs change to accordions on small screens. ![]() Tabs.js – tabs.js is a pure JavaScript tabs library inspired by Accordion/Tabs of Bourbon Refills. That means it is built with no external dependencies like jQuery and supports few configuration options too. JTabs – jTabs is a tabs library built using pure JavaScript. However, you must include Pitaya, which is a library in itself and increases the load time. Tabs using Pitaya – Tabs using Pitaya helps you create animated transition tabs easily. Using its advanced configuration options, you can create nested tabs and define callbacks too. Tabbis.js – Tabbis is a simple yet advanced plugin. This library, unlike few of above ones, needs no dependencies – not even any JS code. Tabsy CSS – A CSS-only library for creating simple toggle components like tabs. Though the example code show plain tabs yet you can beautify the tabs by changing their styling using CSS. Pure CSS Tabs – A simple tabs snippet created using CSS and JS. Also, you can show/hide just any item on the page. Toggler – Toggler is a pure JavaScript plugin for creating toggle-able elements including accordions and tabs. Responsive Tabbed Navigation – A modern, handy tabbed navigation backed by JS and CSS, which is built with mobile-first in mind and supports horizontal as well as vertical positioning styles. It offers various advanced options and supports NPM and Bower too. Tabby – Tabby lets you create simple toggle tabs, which can show any content including videos. That means, it is fast and beautiful as well – as beautiful as you see on most popular websites. Pure CSS Tabs with Indicator – A modern yet straightforward tabs library built without JavaScript. It can align tabs, rotate titles, load content via AJAX, and numerous more features. Read Also: Designing A Winning Navigation Menu: Ideas and Inspirationsīootstrap-tabs-x – An extended tabs plugin built on the top of Bootstrap Tabs. Each option has a live demo along with its download source. ![]() So, for my web designer friends, here is a long list of nice and clean CSS tab-based navigation scripts. Well-designed navigation tabs not only help users know where to go, they are important to drive traffic to the internal pages of your website or blog as well. And what other way to make this possible than through navigation tabs. One of the most vital tasks of a user experience designer is to make sure that the website’s navigation is simple and user-friendly. ![]()
0 Comments
Leave a Reply. |