Pure JavaScript Simple Tabs Navigation UI Design

by Posted on

This is simple yest useful Pure JavaScript Tabs Navigation UI Design This JS tabs is good for your portable application navigation menu, this concept may intrigue you. With smooth and fluid transition impacts, the content is present intelligently to the clients. Since it is a concept model, the creator has utilized a wireframe-like component in the demo. The whole source code content to make this plan is present to you legitimately so that you can without much of a stretch use this code in your structure. This tabs concept for the navigation menu will be a decent decision for one-page website layouts too.

Pure JavaScript Simple Tabs Navigation UI Design

HTML

 
<!--PEN HEADER-->
<div class="header">
  <h1 class="header__title">Tabs Navigation UI</h1>
  <div class="header__btns btns"><a class="header__btn btn" href="https://github.com/nat-davydova/tab-navigation" title="Check on Github" target="_blanc" rel="noopener noreferrer">Check on Github</a></div>
</div>
<!--PEN CONTENT-->
<div class="content">
  <!--content title-->
  <h2 class="content__title">Click to any navigation link</h2>
  <!--content inner-->
  <div class="content__inner">
    <!--tabs-->
    <div class="tabs">
      <!--tabs navigation-->
      <div class="tabs__nav">
        <ul class="tabs__nav-list">
          <li class="tabs__nav-item js-active">Profile</li>
          <li class="tabs__nav-item">Settings</li>
          <li class="tabs__nav-item">About Us</li>
          <li class="tabs__nav-item">FAQ</li>
        </ul>
      </div>
      <!--tabs panels-->
      <div class="tabs__panels">
        <!--single panel-->
        <div class="tabs__panel">
          <div class="tabs__panel-card">
            <div class="tabs__panel-avatar"></div>
            <div class="tabs__panel-content"></div>
          </div>
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
          </div>
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
          </div>
        </div>
        <!--single panel-->
        <div class="tabs__panel">
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
            <div class="tabs__panel-content"></div>
          </div>
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
          </div>
          <div class="tabs__panel-card tabs__panel-card--spaced-between">
            <div class="tabs__panel-img"></div>
            <div class="tabs__panel-img"></div>
            <div class="tabs__panel-img"></div>
          </div>
        </div>
        <!--single panel-->
        <div class="tabs__panel">
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
          </div>
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
            <div class="tabs__panel-img"></div>
          </div>
          <div class="tabs__panel-card">
            <div class="tabs__panel-img"></div>
            <div class="tabs__panel-content"></div>
          </div>
        </div>
        <!--single panel-->
        <div class="tabs__panel">
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
            <div class="tabs__panel-content"></div>
          </div>
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
          </div>
          <div class="tabs__panel-card">
            <div class="tabs__panel-content"></div>
            <div class="tabs__panel-content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: #2c2c2c;
}
body a {
  color: inherit;
  text-decoration: none;
}
 
.btn {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #fff;
  border: 1px solid #2c2c2c;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}
.btn:last-child {
  margin-right: 0;
}
.btn:hover, .btn.js-active {
  color: #fff;
  background-color: #2c2c2c;
}
 
.header {
  max-width: 500px;
  margin: 50px auto;
  text-align: center;
}
 
.header__title {
  margin-bottom: 30px;
  font-weight: 500;
}
 
.content {
  max-width: 700px;
  margin: auto;
}
 
.content__title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
 
.content__inner {
  width: 375px;
  height: 550px;
  margin: auto;
  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
 
.tabs {
  position: relative;
  padding: 15px;
  height: 100%;
  overflow: hidden;
}
 
.tabs__nav {
  position: relative;
}
 
.tabs__nav-decoration {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-transition: width .2s linear 0s, -webkit-transform .2s ease-out 0s;
  transition: width .2s linear 0s, -webkit-transform .2s ease-out 0s;
  transition: width .2s linear 0s, transform .2s ease-out 0s;
  transition: width .2s linear 0s, transform .2s ease-out 0s, -webkit-transform .2s ease-out 0s;
  background-color: #119DA4;
  border-radius: 3px;
  z-index: 1;
}
 
.tabs__nav-list {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  list-style-type: none;
  z-index: 5;
}
 
.tabs__nav-item {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  padding: 15px;
  cursor: pointer;
}
.tabs__nav-item.js-active {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
  color: #fff;
}
 
.tabs__panels {
  position: relative;
  margin-top: 30px;
}
 
.tabs__panel {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: none;
  transition: none;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  width: 100%;
  opacity: 0;
}
.tabs__panel.js-active {
  -webkit-transition: all .25s linear 0s;
  transition: all .25s linear 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
 
.tabs__panel-card {
  display: -webkit-box;
  display: flex;
  margin-bottom: 30px;
  padding: 15px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.tabs__panel-card:last-child {
  margin-bottom: 0;
}
 
.tabs__panel-card--spaced-between {
  -webkit-box-pack: justify;
          justify-content: space-between;
}
 
.tabs__panel-avatar {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
}
 
.tabs__panel-img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.15);
}
 
.tabs__panel-content {
  width: 100%;
  margin-left: 30px;
}
.tabs__panel-content:first-child {
  margin-left: 0;
}
.tabs__panel-content:not(:last-child) {
  margin-right: 30px;
}
.tabs__panel-content:before, .tabs__panel-content:after {
  display: block;
  width: 100%;
  height: 20px;
  content: '';
  background-color: rgba(0, 0, 0, 0.15);
}
.tabs__panel-content:before {
  margin-bottom: 15px;
}


JS

const DOM = {
  tabsNav: document.querySelector('.tabs__nav'),
  tabsNavItems: document.querySelectorAll('.tabs__nav-item'),
  panels: document.querySelectorAll('.tabs__panel') };
 
 

const setActiveItem = elem => {
 
  DOM.tabsNavItems.forEach(el => {
 
    el.classList.remove('js-active');
 
  });
 
  elem.classList.add('js-active');
 
};
 

const findActiveItem = () => {
 
  let activeIndex = 0;
 
  for (let i = 0; i < DOM.tabsNavItems.length; i++) {if (window.CP.shouldStopExecution(0)) break;
 
    if (DOM.tabsNavItems[i].classList.contains('js-active')) {
      activeIndex = i;
      break;
    };
 
  }window.CP.exitedLoop(0);;
 
  return activeIndex;
 
};
 

const findActiveItemParams = activeItemIndex => {
 
  const activeTab = DOM.tabsNavItems[activeItemIndex];
 
  
  const activeItemWidth = activeTab.offsetWidth - 1;
 
  
  const activeItemOffset_left = activeTab.offsetLeft;
 
  return [activeItemWidth, activeItemOffset_left];
 
};
 

const appendDecorationNav = () => {
 
  
  let decorationElem = document.createElement('div');
 
  decorationElem.classList.add('tabs__nav-decoration');
  decorationElem.classList.add('js-decoration');
 
  
  DOM.tabsNav.append(decorationElem);
 
  
  return decorationElem;
};
 

const styleDecorElem = (elem, decorWidth, decorOffset) => {
  elem.style.width = `${decorWidth}px`;
  elem.style.transform = `translateX(${decorOffset}px)`;
};
 

const findActivePanel = index => {
 
  return DOM.panels[index];
 
};
 

const setActivePanel = index => {
 
  DOM.panels.forEach(el => {
 
    el.classList.remove('js-active');
 
  });
 
  DOM.panels[index].classList.add('js-active');
 
};
 

window.addEventListener('load', () => {
 
  
  const activeItemIndex = findActiveItem();
 
  
  const [decorWidth, decorOffset] = findActiveItemParams(activeItemIndex);
 
  
  const decorElem = appendDecorationNav();
 
  
  styleDecorElem(decorElem, decorWidth, decorOffset);
 
  
  findActivePanel(activeItemIndex);
 
  
  setActivePanel(activeItemIndex);
});
 

DOM.tabsNav.addEventListener('click', e => {
 
  const navElemClass = 'tabs__nav-item';
 
  
  if (e.target.classList.contains(navElemClass)) {
 
    const clickedTab = e.target;
 
    const activeItemIndex = Array.from(DOM.tabsNavItems).indexOf(clickedTab);
 
    
    setActiveItem(clickedTab);
 
    
    const activeItem = findActiveItem();
 
    
    const [decorWidth, decorOffset] = findActiveItemParams(activeItem);
 
    
    const decorElem = document.querySelector('.js-decoration');
 
    styleDecorElem(decorElem, decorWidth, decorOffset);
 
    
    findActivePanel(activeItemIndex);
 
    
    setActivePanel(activeItemIndex);
 
  }
 
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by nat-davydova. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin