Author: | LukyVj |
---|---|
Views Total: | 2,148 views |
Official Page: | Go to website |
Last Update: | August 13, 2015 |
License: | MIT |
Preview:

Description:
A pretty, Material Design style tabs component built using vanilla JavaScript, CSS and CSS3 transitions & transforms.
How to use it:
Build the tabbed contents and navigation as follows.
<div class="material-tabs"> <div class="tabbed-section__selector"> <a class="tabbed-section__selector-tab-1 active" href="#">Tab 1</a> <a class="tabbed-section__selector-tab-2" href="#">Tab 2</a> <a class="tabbed-section__selector-tab-3" href="#">Tab 3</a> <span class="tabbed-section__highlighter"></span> </div> <div class="tabbed-section-1 visible"> Section 1 </div> <div class="tabbed-section-2 hidden"> Section 2 </div> <div class="tabbed-section-3 hidden"> Section 3 </div> </div>
The core CSS / CSS3 styles.
.material-tabs { display: block; float: left; padding: 16px; padding-top: 0; width: 100%; max-width: 480px; left: calc(50% - 480px/2); position: relative; margin: 96px auto; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important; border-radius: 2px; } @media all and (max-width: 480px) { .material-tabs { max-width: 100%; left: 0; } } .visible { position: relative; opacity: 1; width: 100%; height: auto; float: left; -webkit-transition: opacity .35s ease; transition: opacity .35s ease; z-index: 3; } .hidden { position: absolute; opacity: 0; z-index: 0; -webkit-transition: opacity 0s ease; transition: opacity 0s ease; } .tabbed-section__selector { position: relative; height: 32px; top: -31.2px; left: -16px; padding: 0; margin: 0; width: 100%; float: left; } .tabbed-section__selector [class*="-tab-"] { float: left; display: block; height: 32px; line-height: 32px; width: 100px; text-align: center; background: #fff; font-weight: bold; text-decoration: none; color: black; font-size: 14px; } .tabbed-section__selector [class*="-tab-"].active { color: #4F2CCA; } .tabbed-section__selector a:first-child { border-top-left-radius: 2px; } .tabbed-section__selector a:last-of-type { border-top-right-radius: 2px; } .tabbed-section__highlighter { position: absolute; z-index: 10; bottom: 0; height: 2px; background: #4F2CCA; max-width: 100px; width: 100%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); display: block; left: 0; -webkit-transition: -webkit-transform 0.23s ease; transition: transform 0.23s ease; } .tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter { -webkit-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); } .tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .divider { background: rgba(0, 0, 0, 0.1); position: relative; display: block; float: left; width: 100%; height: 1px; margin: 8px 0; padding: 0; overflow: hidden; }
The JavaScript.
var $ = function (selector) { return document.querySelectorAll(selector); }; var tabs = [ '.tabbed-section__selector-tab-1', '.tabbed-section__selector-tab-2', '.tabbed-section__selector-tab-3' ]; var toggleTab = function(element) { var parent = element.parentNode; $(element)[0].addEventListener('click', function(){ this.parentNode.childNodes[1].classList.remove('active'); this.parentNode.childNodes[3].classList.remove('active'); this.parentNode.childNodes[5].classList.remove('active'); this.classList.add('active'); if(this.classList.contains('tabbed-section__selector-tab-1')) { // and change the classes, show the first content panel $('.tabbed-section-1')[0].classList.remove('hidden'); $('.tabbed-section-1')[0].classList.add('visible'); $('.tabbed-section-2')[0].classList.remove('visible'); $('.tabbed-section-2')[0].classList.add('hidden'); $('.tabbed-section-3')[0].classList.remove('visible'); $('.tabbed-section-3')[0].classList.add('hidden'); } if(this.classList.contains('tabbed-section__selector-tab-2')) { $('.tabbed-section-2')[0].classList.remove('hidden'); $('.tabbed-section-2')[0].classList.add('visible'); $('.tabbed-section-1')[0].classList.remove('visible'); $('.tabbed-section-1')[0].classList.add('hidden'); $('.tabbed-section-3')[0].classList.remove('visible'); $('.tabbed-section-3')[0].classList.add('hidden'); } if(this.classList.contains('tabbed-section__selector-tab-3')) { $('.tabbed-section-3')[0].classList.remove('hidden'); $('.tabbed-section-3')[0].classList.add('visible'); $('.tabbed-section-1')[0].classList.remove('visible'); $('.tabbed-section-1')[0].classList.add('hidden'); $('.tabbed-section-2')[0].classList.remove('visible'); $('.tabbed-section-2')[0].classList.add('hidden'); } }); }; for (var i = tabs.length - 1; i >= 0; i--) { toggleTab(tabs[i]) };