CODEWITHSUNDEEP
javascriptjqueryhtmlcsssmooth-scrolling
carl saptarshi
carl saptarshi

Reputation: 355

How to can I have a sliding bar that slides on click in my nav bar using JQuery

Currently, I have three tabs in my nav bar, BOARD, SKILLS, and ABOUT, all in one container with a boarder-bottom for the container. When I click on one of the divs, the appropriate div name is selected, to indicate which tab I am on. That is what is currently working and can be seen in my codePen.io:

What I have so far - click here

enter image description here

.

What I am trying to do is when I go from BOARD to SKILLS or BOARD to ABOUT, is to have a bar slide from one one tab to the next, rather than being static-like (which is what I have currently) e.g. a smooth scroller on click from one tab to the next. How can I go about doing this? I have no idea where to begin.

Upvotes: 1

Views: 524

Answers (1)

Ismail RBOUH
Ismail RBOUH

Reputation: 10450

You can use this function to slide an element:

function scaleSlider(to) {
  var $slider = $('.slider', '.tabs'),
    $elSpan = to.find('span'),
    width = $elSpan.width(),
    left = $elSpan.position().left;
  $slider.animate({
    width: width,
    left: left
  });
}

In your HTML you need to add the .slider element:

<div class="col-md-8 tabs">
    <div class="slider"></div>
    <!-- your html here -->
</div>

CSS:

.tabs .slider {
    position: absolute;
    height:100%;
    border-bottom: 4px solid grey;
}

So when you click a menu element you call scaleSlider:

$('.skills').on("click", function() {
    //Your code here
    scaleSlider($(this));
});

Please check out this demo: http://codepen.io/anon/pen/EyoBmg

Upvotes: 2

Related Questions