Hippo — Doobox
The first stack that I found in my toolbox is Hippo from Doobox. The stack is straightforward, with options to set the Number Of Tabs you want, Border Size – for the border that you may, or may not, want around the stack itself, Border Radius and the Button Font Size in percent. The button font may be set to bold and a shadow can be added.
Hippo lets you define the colours of the Outer # – the border surrounding the stack, Background # – the border surrounding your tabulated content and Inner # – the background colour for the content itself. Colour definitions for the tab buttons in their active, passive and hover states follow.
When displayed on a narrower screen, the buttons shuffle around to fit the container width. Once a point is reached where the buttons no longer fit alongside each other, they present themselves as a vertical column.
Hippo is one of Doobox’ older stacks and has since been complimented by Tab, which has a clean interface and can be viewed here.
Switchr — StackManiac
Switchr from StackManiac is quite unique in that you may choose to set it to Tabs or Accordion. The Switchr Setup requires you to define # Of Items, Tab Height and Tab Width. You can then set Tabs To Accordion, which will switch the tab layout to accordion layout at a predefined breakpoint. A Fade Transition can be set as can the Border Radius which affects both the tabs and the border surrounding the stack.
Switchr has the options to set one of five Themes along with Title Color, Background Color and Border Color. The Borders can be deactivated.
Tably — Yuzool
We recently reviewed Tably from Yuzool. When the viewport shrinks to below a defined width, Tably automatically morphs into an accordion.
Tably‘s animation can be set to simply swap the tab’s content, or can fade out and in – your choice. The animation can be set to one of four different speeds and the tab content can automatically cycle with four different speed settings. Tably will also let you define which of the ten tabs should automatically open when the page is loaded.
The remaining settings are for Tably’s background colours – the background can be deactivated – and for the button colours. The buttons are rectangular ‘ghost’ buttons. There are no other options to alter their appearance.
Tabulous — Joe Workman
The final tab stack in my toolbox is Tabulous from Joe Workman. Like Tably, Tabulous can be set to automatically cycle through the tabs. The tabs, however, may be deactivated and the stack then morphs into a slider.
Tabulous comes equipped with a myriad of settings, which include dedicated options for Padding, Round Corners and Background. The first setting, of course, is for the Slide Count. The tab content can be set to preload and the stack display may be set to Wait For Content Load. Then follow options for a Shadow which may be inset or offset. The tabs can inherit this shadow.
Tabulous tabs can be set to contain Font Awesome Icons. The tabs can be static in width, or set to resize dynamically to accommodate text content. Colour options are available for the inactive and active background, as for active and inactive text and the gutter between the tabs can be set.
At a predefined breakpoint the tabs will morph into a mobile menu. The menu bar can be set to contain a background image. Transitions – too many to count – can be set both for CSS In and CSS Out and a combination of CSS and JS transitions can be chosen. But we came here looking for tabbed content… If you are a fan of bells and whistles and want to see the over 70 options available, visit the demo site and see what else Tabulous has to offer.