montase-tabs

simple tabs with elegant animation

Demo

How to use:

Install via NPM:

npm install montase-tabs

Make sure to include jQuery in your page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Include jQuery Montase-Tabs:

<script src="js/montase-tabs.js"></script>

Include jQuery Montase-Tabs styles

<link rel="stylesheet" href="css/montase-tabs.css">

Example:

<nav class="nav-tabs">
  <ul class="tabs-material">
    <li class="tabs-material__list active">
      <a href="#masterBedroom" class="regular" data-role="tabs-material">Master Bedroom</a>
    </li>
    <li class="tabs-material__list">
      <a href="#livingArea" class="regular" data-role="tabs-material">Living Area</a>
    </li>
    <li class="tabs-material__list">
      <a href="#kitchen" class="regular" data-role="tabs-material">Kitchen</a>
    </li>
  </ul>
  <div class="tabs-material-line"></div>
</nav>

<div class="tabs-material-content">
  
  <div class="tabs-material-item active" id="masterBedroom">
    <p>this is master bedroom.</p>
  </div>

  <div class="tabs-material-item" id="livingArea">
    <p>this is living area.</p>
  </div>

  <div class="tabs-material-item" id="kitchen">
    <p>this is kitchen.</p>
  </div>
</div>