material design tabs - Free Download Minimal Material Design Tabs Plugin In jQuery

Free Download Minimal Material Design Tabs Plugin In jQuery

Posted on

This time I will share jQuery Plugin and tutorial about Minimal Material Design Tabs Plugin In jQuery, hope it will help you in programming stack.

material design tabs - Free Download Minimal Material Design Tabs Plugin In jQuery
File Size: 11.8 KB
Views Total: 673
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A super tiny jQuery tabs plugin to create responsive, Material Design style tabbed content with ripple click effect and sliding tab underline.

Built with CSS flexbox and a little bit of jQuery script.

How to use it:

1. Create the tabbed content on the web page.

01 <div class="c-tab--content-container">
02   <div id="Tab1" class="c-tab--content active">
03     <p>Tab 1 Content</p>
04   </div>
05   <div id="Tab2" class="c-tab--content">
06     <p>Tab 2 Content</p>
07   </div>
08   <div id="Tab3" class="c-tab--content">
09     <p>Tab 3 Content</p>
10   </div>
11 </div>

2. Create a tab navigation that contains anchor links pointing to the matched tabbed content.

01 <nav class="c-tabs" data-toggle="c-tabs" role="navigation">
02   <ul class="c-tab--navigation">
03     <li class="c-tab--item"><a href="#Tab1" class="active">Tab 1</a></li>
04     <li class="c-tab--item"><a href="#Tab2">Tab 2</a></li>
05     <li class="c-tab--item"><a href="#Tab3">Tab 3</a></li>
06     <li class="c-tab--slider">
07       <div class="c-tab-indicator"></div>
08     </li>
09   </ul>
10 </nav>

3. Download the plugin and insert the following JavaScript & CSS files into the document.

1 <link rel="stylesheet" href="./css/tabs.css" />
2 <script src="jquery.min.js"></script>
3 <script src="./js/tabs.js"></script>

4. Initialize the plugin. That’s it.

1 component.tabs.initTabs();

5. Override the default CSS styles in the tabs.css as per your needs.

1 .c-tabs .c-tab--navigation {
2   /* styles here */
3 }
4  
5 .c-tab-indicator {
6   /* styles here */
7 }
8  
9 ...

This awesome jQuery plugin is developed by tpronschinske. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net