Creative Geometric Tabs System With jQuery And CSS3
File Size: | 7.13 KB |
---|---|
Views Total: | 295 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A creative geometric tabs system built with JavaScript (jQuery), HTML list, and CSS/CSS3.
It is great for web designers who want to create a more visually appealing and more interactive element of their content. Can be used for portfolios, galleries, sliders, and much more.
How to use it:
1. Add tabs and tabbed content to the tabs system.
<ul class="tabs" data-tabgroup="first-tab-group"> <li><a href="#tab1" class="active">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <!-- More Tabs Here --> </ul> <section id="first-tab-group" class="tabgroup"> <div id="tab1"> Tab 1 Content </div> <div id="tab2"> Tab 2 Content </div> <div id="tab3"> Tab 3 Content </div> <!-- More Tabbed Content Here --> </section>
2. Style the tabs.
.tabs li { list-style: none; float: left; width: 20%; } .tabs a { display: block; text-align: center; text-decoration: none; position: relative; text-transform: uppercase; color: #fff; height: 70px; line-height: 90px; background: linear-gradient(165deg, transparent 29%, #98927C 30%); } .tabs a:hover, .tabs a.active { background: linear-gradient(165deg, transparent 29%, #F2EEE2 30%); color: #98927C; } .tabs a:before { content: ''; position: absolute; z-index: 11; left: 100%; top: -100%; height: 70px; line-height: 90px; width: 0; border-bottom: 70px solid rgba(0, 0, 0, 0.1); border-right: 7px solid transparent; } .tabs a.active:before { content: ''; position: absolute; z-index: 11; left: 100%; top: -100%; height: 70px; line-height: 90px; width: 0; border-bottom: 70px solid rgba(0, 0, 0, 0.2); border-right: 20px solid transparent; }
3. Style the tabbed content.
.tabgroup { box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); } .tabgroup div { padding: 30px; background: #F2EEE2; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }
4. Load the needed jQuery library in the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
5. Enable the tabs to navigate through the tabbed content.
$('.tabgroup > div').hide(); $('.tabgroup > div:first-of-type').show(); $('.tabs a').click(function(e){ e.preventDefault(); var $this = $(this), tabgroup = '#'+$this.parents('.tabs').data('tabgroup'), others = $this.closest('li').siblings().children('a'), target = $this.attr('href'); others.removeClass('active'); $this.addClass('active'); $(tabgroup).children('div').hide(); $(target).show(); })
This awesome jQuery plugin is developed by jdniki. For more Advanced Usages, please check the demo page or visit the official website.