Android Like Nav Tab In Vanilla JavaScript – Simple-Tabs

Preview:

Description:

Simple-Tabs is a vanilla JavaScript plugin to create an Android style tabs component for your header navigation.

Also can be used to create an infinite-looping carousel with navigation arrows.

How to use it:

Insert the necessary JavaScript and CSS files into the html file.

<link rel="stylesheet" href="st.css">
<script src="st.js"></script>

The html structure for the tabs component.

<div class="simple-tabs" id="example">
  <div class="headings">
    <ul>
      <li>Head 1</li>
      <li>Head 2</li>
      <li>Head 3</li>
    </ul>
    <div class="underline"></div>
  </div>
  <div class="content">
    <div class="tabs">
      <div class="tab">
        Tab 1
      </div>
      <div class="tab">
        Tab 2
      </div>
      <div class="tab">
        Tab 3
      </div>
    </div>
  </div>
</div>

Initialize the Simple-Tabs and done.

new ST(document.querySelector("#example"));

You can also add navigation arrows to the tabs component that acts like a carousel.

<div class="simple-tabs" id="example-2">
  <div class="headings">
    <ul>
      <li>Head 1</li>
      <li>Random heading</li>
      <li>Lorem ipsum</li>
    </ul>
    <div class="underline"></div>
  </div>
  <div class="arrow l">
    <img src="down.svg" class="fit" alt="\/" />
  </div>
  <div class="arrow r">
    <img src="down.svg" class="fit" alt="\/" />
  </div>
  <div class="content">
    <div class="tabs">
      <div class="tab">
        Head 1
      </div>
      <div class="tab">
        Random heading
      </div>
      <div class="tab">
        Lorem ipsum
      </div>
    </div>
  </div>
</div>

new ST(document.querySelector("#example-2"), {
    num: 2,
    showArrows: true,
    showMenu: false
});

All default configuration options.

new ST(document.querySelector("#selector"), {
    // CSS selectors
    menu: main.querySelector(".headings ul"),
    content: main.querySelector(".content"),
    tabcontainer: main.querySelector(".tabs"),
    menus: main.querySelectorAll(".headings ul li"),
    tabs: main.querySelectorAll(".content .tab"),
    la: main.querySelector(".arrow.l"),
    ra: main.querySelector(".arrow.r"),
    line: main.querySelector(".underline"),
    // number of tabbed content to show at a time
    num: 1,
    // shows navigation arrows
    showArrows: false,
    // shows tab menu
    showMenu: true,
    // step size
    step: 1,
    // tab height
     tabHeight: 'auto'
    
});

Changelog:

11/06/2018

• Use ease out animation