Today we’d like to share a couple of tab styles with you. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become.
jQuery Tabs Plugin & Tutorials with Example
The ultimate jQuery tab plugin forhash-sensitive,WAI-ARIA-complianttabs.
- Hash-friendly URLs, so your states are saved. Try refreshing!
- Compatible with IE8 and up
- Customizable and configurable. Use custom selectors for your tabs. Default uses
- Customizable SASS styles.
Codetabs is a great plug-in tabs + slider when integrated gestrue swipe, move between slides really easy on desktop and mobile. No need to switch troublesome dropdown menu as the other plugin on the mobile. Same time create thousands of beautiful effects with built-in over 250 ‘out-in’ effects and ‘one’. Also, codetabs built-in responsive features, vertical tabs, flat and clean theme, powerfull API, 40+ templates html, 14+ positions, 100+ options, more and more.
Codetabs is a great plug-in tabs when integrated gestrue swipe, move between slides really easy on desktop and mobile. No need to switch troublesome dropdown menu as the other plugin on the mobile. Same time create thousands of beautiful effects with built-in over 250 ‘out-in’ effects and ‘one’. Also, codetabs built-in responsive features, vertical tabs, flat and clean theme, powerfull API, 40+ templates html, 14+ positions, 100+ options, more and more.
jQuery plugin for hiding Bootstrap tabs inside a dropdown, when viewport is too small.
Free CSS3 Tab(nested able) Menu Plugins.
- no dependencies required, but if you want support <= IE8, make sure you have to load jQuery before Taby.
- you can conntect a “tab” with its “content” easly. Tab e.g. “#sub-tab-4″ is related to data-tab-content=”sub-tab-4″.
- amd/commonjs (requirejs/node) ready
Liquid Slider is a responsive jQuery HTML content Slider.
Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
- Tabs transform to accordion based on breakpoint
- Uses CSS for the desktop/tablet/mobile view
- Has callback events for the tab events
- Tabs can be opened with URL hashes
- Tabs can auto rotate
- Tabs can be collapsed (optional)
- Tabs can start collapsed based on the view (optional)
- Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
- Multiple device support (Web, Tablet, Mobile, etc)
A full width tab component with some example media queries for adjusting the icons of the tabs and the content layout. The main idea is to show only icons for the mobile view and allow the text to appear when there’s enough space. The content columns and the containing media boxes have three different layouts.