fork of jquery-bst (bmd)

In this example below you will see how to do a fork of jquery-bst (bmd) with some HTML / CSS and Javascript

Uses jquery-bootstrap-scrolling-tabs with bootstrap-material-design.

Thumbnail
This awesome code was written by 185driver, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 185driver ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>fork of jquery-bst (bmd)</title>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tabs</title>

  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'>
<link rel='stylesheet prefetch' href='https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css'>
<link rel='stylesheet prefetch' href='https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/css/bootstrap-material-design.min.css'>
<link rel='stylesheet prefetch' href='https://rawgit.com/mikejacobson/jquery-bootstrap-scrolling-tabs/master/dist/jquery.scrolling-tabs.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <div id="tabs" class="md-elevation-4dp bg-theme-primary">
    <ul class="nav nav-tabs justify-content-center" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-index="0" data-toggle="tab" href="#tab-0" role="tab">This is number 0</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-index="1" data-toggle="tab" href="#tab-1" role="tab">This is number 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-index="2" data-toggle="tab" href="#tab-2" role="tab">This is number 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-index="3" data-toggle="tab" href="#tab-3" role="tab">This is number 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-index="4" data-toggle="tab" href="#tab-4" role="tab">This is number 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-index="5" data-toggle="tab" href="#tab-5" role="tab">This is number 5</a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane fade ml-3 mt-3 active show" id="tab-0" role="tabpanel">0</div>
    <div class="tab-pane fade ml-3 mt-3" id="tab-1" role="tabpanel">1</div>
    <div class="tab-pane fade ml-3 mt-3" id="tab-2" role="tabpanel">2</div>
    <div class="tab-pane fade ml-3 mt-3" id="tab-3" role="tabpanel">3</div>
    <div class="tab-pane fade ml-3 mt-3" id="tab-4" role="tabpanel">4</div>
    <div class="tab-pane fade ml-3 mt-3" id="tab-5" role="tabpanel">5</div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://unpkg.com/bootstrap-material-design@4.0.0-beta.4/dist/js/bootstrap-material-design.min.js'></script>
<script src='https://rawgit.com/mikejacobson/jquery-bootstrap-scrolling-tabs/master/dist/jquery.scrolling-tabs.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/185driver/fork-of-jquery-bst-bmd-BJXogN */
:root {
  /* vars given in decimal RGB format to facilitate setting an opacity property */
  --theme-primary-color: 25, 118, 210;            /* #1976d2 */
  --theme-light-text-color: rgb(255, 255, 255);   /* #ffffff */
  --theme-light-color: 255, 255, 255;             /* #ffffff */
}

.bg-theme-primary {
  background-color: rgb(var(--theme-primary-color));
}
.nav-tabs .nav-item {
  margin-bottom: 0;
}
.nav-tabs .nav-link {
  color: rgba(var(--theme-light-color), 0.7);
  border-color: transparent;
  padding: 1em 0.8575em 0.8em 0.8575em;
  text-align: center;
  min-width: 72px;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link:focus {
  color: var(--theme-light-text-color);
  border-color: rgb(var(--theme-light-color));
  border-bottom-width: 2px;
  background-color: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--theme-light-text-color);
  border-color: transparent;
  background-color: rgba(var(--theme-light-color), 0.08);
}
.nav-tabs .nav-link.active:hover {
  border-color: rgb(var(--theme-light-color));
  background-color: transparent;
}
.tabs,
.scrtabs-tab-container,
.scrtabs-tabs-fixed-container,
.scrtabs-tab-scroll-arrow {
  height: 48.016px;
}
/* tabs component jQuery scroller */
.scrtabs-tab-scroll-arrow {
  color: var(--theme-light-text-color);
  padding: 0;
  border: none;
  line-height: 2;
}
.scrtabs-tab-scroll-arrow:hover {
  background-color: transparent;
}
.scrtabs-tab-scroll-arrow button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.scrtabs-disable i {
  color: transparent;
}
.scrtabs-tab-scroll-arrow-left {
  text-align: right;
  width: 60px;
  padding-right: 6px;
}
.scrtabs-tab-scroll-arrow-right {
  width: 48px;
  padding-left: 6px;
}
.scrtabs-arrow-btn {
  background-color: transparent;
  height: 36px;
  width: 36px;
  padding: 0;
  color: rgb(var(--theme-light-color));
  font-size: 24px;
  line-height: 12px;
  border: 0;
}
.md-elevation-4dp {
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
   0 4px 5px 0 rgba(0, 0, 0, 0.14),
   0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

/*Downloaded from https://www.codeseek.co/185driver/fork-of-jquery-bst-bmd-BJXogN */
  $(document).ready(() => {
    
    $('body').bootstrapMaterialDesign();
    
    $('.nav-tabs').scrollingTabs({
      bootstrapVersion: 4,
      scrollToTabEdge: true,
      enableSwiping: true,
      disableScrollArrowsOnFullyScrolled: true,
      leftArrowContent: `
        <div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-left">
          <button class="scrtabs-arrow-btn scrtabs-click-target" type="button">
            <i class="mdi mdi-chevron-left"></i>
          </button>
        </div>`,
      rightArrowContent: `
        <div class="scrtabs-tab-scroll-arrow scrtabs-tab-scroll-arrow-right">
          <button class="scrtabs-arrow-btn scrtabs-click-target" type="button">
            <i class="mdi mdi-chevron-right"></i>
          </button>
        </div>`
    }).on('ready.scrtabs', () => {
      $('.nav-link').click(() => {
        setTimeout(() => {
          $('.nav-tabs').scrollingTabs('scrollToActiveTab');
        }, 10);
      });
    });
  });

Comments