Tab navigation
This is an extension to the inline navigation style which gives you a tab style navigation for you to display different content.
Building the markup
Building the markup stays the same as building an inline navigation, you just need to add a tabu data attribute and a bit of extra html for each tab content.
<ul class="navigation inline" data-tabu data-start-index="1">
<li><a href="#firstContent">I'm a tab</a></li>
<li><a href="#secondContent">I'm a tab to</a></li>
<li><a href="#thirdContent">Tab 3</a></li>
</ul>
<div class="tabu-content">
<div class="content" id="firstContent">
First Content
</div>
<div class="content" id="secondContent">
Second Content
</div>
<div class="content" id="thirdContent">
Third Content
</div>
</div>
Setup
Here are simple steps for you to get a deeper insight:
1. Create an inline navigation style. For more information visit the inline navigation section.
<ul class="navigation inline">
2. Add the tabu data attribute
<ul class="navigation inline" data-tabu >
3. Add the list item elements with anchors, like so:
<ul class="navigation inline tabs" data-tabu>
<li><a href="#firstContent">I'm a tab</a></li>
<li><a href="#secondContent">I'm a tab to</a></li>
<li><a href="#thirdContent">Tab 3</a></li>
</ul>
4. Add a tabu content div element, this will contain the information for each tab. Each content must match the anchor href attribute.
<div class="tabu-content">
<div class="content" id="firstContent">
First Content
</div>
<div class="content" id="secondContent">
Second Content
</div>
<div class="content" id="thirdContent">
Third Content
</div>
</div>
Javascript usage
You can customize the tabu plugin behavior by Javascript or by data attributes.
Usage
The data attributes match the options you can send to the plugin. Below we provide a fully description on how to use them.
| Option Name | Data attribute name | Type | Default | Description |
|---|---|---|---|---|
| startIndex | data-start-index | integer | 0 | The start tab content to first display. |
| tabContentClass | data-tab-content-class | string | tabu-content | The tbas wrapper container |
| tabContentsClass | data-tab-contents-class | string | content | The class name for each tab |
Under Tabu
For a deeper look into the plugin you can check the furatto.tabs.js plugin file. and the sass file.