Tabs Designs
Welcome to KALLYAS Template, a wonderful and premium product for multipurpose websites
Example tabs
Add quick, dynamic tab functionality to transiton through panes of local content.
The example above has the class="tabbable tabs_style1"
, where tabbable triggers the tables and tabs_style1 has the styling.
Pane 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a.
Pane 2 Content
Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis.
Pane 3 Content
Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
Code example
<div class="tabbable tabs_style1"> <ul class="nav fixclear"> <li class="active"><a href="#tabs1-pane1" data-toggle="tab">Tab #1</a></li> <li><a href="#tabs1-pane2" data-toggle="tab">Tab #2</a></li> <li><a href="#tabs1-pane3" data-toggle="tab">Tab #3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tabs1-pane1"> <p>.. contents of tab1 ..</p> </div> <div class="tab-pane" id="tabs1-pane2"> <p>.. contents of tab2 ..</p> </div> <div class="tab-pane" id="tabs1-pane3"> <p>.. contents of tab3 ..</p> </div> </div> </div>
Alternative styles
The example above has the class="tabbable tabs_style2"
, where tabbable triggers the tables and tabs_style2 has the styling.
Pane 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a.
Pane 2 Content
Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis.
Pane 3 Content
Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
Alternative styles
The example above has the class="tabbable tabs_style3"
, where tabbable triggers the tables and tabs_style3 has the styling.
Pane 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a.
Pane 2 Content
Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis.
Pane 3 Content
Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.
Alternative styles
The example above has the class="tabbable tabs_style4"
, where tabbable triggers the tables and tabs_style4 has the styling.
Pane 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a.
Pane 2 Content
Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis.
Pane 3 Content
Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.