Jquery - Bootstrap tab bar smoothly move navigation buttons

Hector
July 23, 2023
251 views
3 votes
3 Answers

I have a normal bootstrap tab panel for switching blocks

When switching blocks in the navigation, the active tab is highlighted

But now when I click the background of active tabs changes instantly

Is it possible to make it so that when switching tabs, the background does not change immediately, but smoothly moves left and right, depending on which tab is needed?

Can this be done with css or do i have to use js?

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
}
.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"> <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a> </li>
    <li role="presentation"> <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false" class="">List 2</a> </li>
    <li role="presentation"> <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false" class="">List 3</a> </li>
    <li role="presentation"> <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false" class="">List 4</a> </li>
</ul>
<div class="tab-content">
    <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
    <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
    <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
    <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

Answers

Smooth Transition Effect for Bootstrap Tabs without JavaScript

To achieve a smooth transition effect when switching tabs without using JavaScript, you can utilize CSS transitions. In this example, we’ll animate the background color of the active tab. Here’s how you can do it:

Add the following CSS rule to handle the transition effect:
css

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
  transition: background-color 0.3s ease; /* Add this line for the transition effect */
}

The transition property specifies the CSS property (background-color in this case) that will be animated, the duration of the transition (0.3 seconds), and the easing function (ease for a smooth transition).

Modify the CSS rule for the active tab to set the background color directly without the transition effect:
css

.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background-color: #A700FF; /* Change 'background' to 'background-color' */
  border-radius: 10px;
  transition: none; /* Add this line to disable the transition for the active tab */
}

By adding transition: none; to the active tab rule, it ensures that the background color changes instantly without the transition effect.

Here’s the updated HTML and CSS code:

HTML:

<ul class="nav nav-tabs" role="tablist">
  <!-- ... (your tab list) ... -->
</ul>
<div class="tab-content">
  <!-- ... (your tab content) ... -->
</div>

CSS:

css

li {
  margin: 0;
  display: block;
}

li:before {
  display: none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
  transition: background-color 0.3s ease; /* Add this line for the transition effect */
}

.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background-color: #A700FF; /* Change 'background' to 'background-color' */
  border-radius: 10px;
  transition: none; /* Add this line to disable the transition for the active tab */
}

.info {
  padding: 30px;
  text-align: center;
}

Now, when you switch tabs, you should see a smooth transition of the background color between the active and inactive tabs.

I have managed to make it work using a combination of linear-gradient, background-position and transition:

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
  margin-left:10px;
}

.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  border-radius: 10px;
}

.nav-tabs > li > a.left {
  background-position:left bottom;
  background: linear-gradient(to right, white 50%, #A700FF 50%);
  background-size: 210% 100%;
}

.nav-tabs > li > a.left.active {
  background-position:right bottom;
  transition: background 2s ease;
}

.nav-tabs > li > a.right {
  background: linear-gradient(to right, #A700FF 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
}

.nav-tabs > li > a.right.active {
  background-position: left bottom;
  transition: background 2s ease;
}

.info {
  padding: 30px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"> <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active left">List 1</a> </li>
    <li role="presentation"> <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false" class="left">List 2</a> </li>
    <li role="presentation"> <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false" class="right">List 3</a> </li>
    <li role="presentation"> <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false" class="right">List 4</a> </li>
</ul>
<div class="tab-content">
    <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
    <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
    <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
    <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

Hers is a way you could do it with a little jQuery and using bootstraps shown.bs.tab event for detecting when the nav tab is completely shown.

This will only work, if you are using .nav-tabs once on your page, as per your example. But if you want this to work on multiple instances of .nav-tabs on your page, then you will need to modify this a bit.

Here is your example with sliding .nav-tab background as per your question.

See notes in jquery code so you know is happening…

// on ready
$(document).ready(function() {

  // active tab highlight function with params init and resize
  function active_tab_highlight_pos(init = false, resize = false) {

    // our nav tabs
    let nav_tabs = $('.nav-tabs');

    // find our current active tab element
    let active_tab = $(nav_tabs).find('.active');

    // get set nav tabs positions
    let nav_tabs_pos = {
      x: $(nav_tabs).offset().left,
      y: $(nav_tabs).offset().top
    }

    // get set current active tab positions and dimensions
    let active_tab_pos = {
      x: $(active_tab).offset().left - nav_tabs_pos.x,
      y: $(active_tab).offset().top - nav_tabs_pos.y,
      w: $(active_tab).outerWidth(),
      h: $(active_tab).outerHeight()
    }

    // if we are initiating active highlight for the first time
    if (init) {

      // prepend active highlight list element to our nav tabs
      $(nav_tabs).prepend('<li class="active-highlight"></li>');

    }
    
    // get our active hightlight element
    let active_highlight = $(nav_tabs).find('.active-highlight');
    
    // if we are resizing window
    if (resize) {
    
      // disable transition effect
        $(active_highlight).css({
        'transition': 'none'
      });
      
      
    // else enable transition effect
    } else {
    
      // change here to change the transition effect and speed
        $(active_highlight).css({
        'transition': 'all .5s ease'
      });
    
    }

    // set active highlight position css
    $(active_highlight).css({
      'width': active_tab_pos.w + 'px',
      'height': active_tab_pos.h + 'px',
      'left': active_tab_pos.x + 'px',
      'top': active_tab_pos.y + 'px'
    });

  }

  // reposition active tab highlight on init
  active_tab_highlight_pos(true);
  
  // on window responsive resize event
  $(window).on('resize', function() {
  
    // reposition active tab highlight on responsive resize
    active_tab_highlight_pos(false, true);
    
  });

  // data-bs-toggle="tab" on shown event handler
  $('[data-bs-toggle="tab"]').on('shown.bs.tab', function() {

    // reposition active tab highlight
    active_tab_highlight_pos();

  });

});

.nav-tabs {
  position: relative;
  justify-content: center;
  padding-bottom: 10px;
}

.nav-tabs > li {
  position: relative;
  z-index: 10;
}

.nav-tabs > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
  font-size: 18px;
  color: #000;
  border: none;
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.5s ease;
}

.nav-tabs > li > a.active {
  color: #FFF;
}

.nav-tabs > .active-highlight {
  display: block;
  position: absolute;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation">
    <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a>
  </li>
  <li role="presentation">
    <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false">List 2</a>
  </li>
  <li role="presentation">
    <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false">List 3</a>
  </li>
  <li role="presentation">
    <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false">List 4</a>
  </li>
</ul>

<div class="tab-content">
  <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
  <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
  <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
  <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

Here is a jsfiddle version… https://jsfiddle.net/joshmoto/32epbqu4/4/

Also you may want to test in responsive mode and devices to check there are no problems with positioning, but as far as I can tell it is currently working well responsively too.

This script will animate nav tab background to any nav tab position or size in your document.

Hope this helps!

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Bootstrap tab bar smoothly move navigation buttons

Answers