Android Like Nav Tab In Vanilla JavaScript – Simple-Tabs

Category: Javascript | April 12, 2018
Author: aadityataparia
Views Total: 534
Official Page: Go to website
Last Update: April 12, 2018
License: MIT

Preview:

Android Like Nav Tab In Vanilla JavaScript – Simple-Tabs

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,

    // infinite loop
    loop: false
    
});

Leave a Reply