nick drake current link indicator

index.html

<!-- ecss nearly -->
<section class="ns-TabBarModule" data-activesection="A">
  <div class="ns-Tab">  
    <div class="ns-TabBar">  
      <div class="ns-TabWrapper">
        <a href="#" data-section="A" class="ns-TabBar_Link"><span>A</span></a>
        <a href="#" data-section="Black Eyed" class="ns-TabBar_Link"><span>Black Eyed</span></a>
        <a href="#" data-section="Dog" class="ns-TabBar_Link"><span>Dog</span></a>
        <a href="#" data-section="He" class="ns-TabBar_Link"><span>He</span></a>
        <a href="#" data-section="Called" class="ns-TabBar_Link"><span>Called</span></a>
        <a href="#" data-section="At" class="ns-TabBar_Link"><span>At</span></a>
        <a href="#" data-section="My Door" class="ns-TabBar_Link"><span>My Door</span></a>
        <span class="ns-Indicator"></span>
      </div>
    </div>
  </div>
</section>

nick-drake-current-link-indicator.markdown

nick drake current link indicator

menu navigation whatever: when we click a link the current link indicator slides into position.

A Pen by soren on CodePen.

License.

script.js

//still learning. be kind.

function indi () {
 	var navWrapper = document.body.querySelector(".ns-TabWrapper");
	var navLeft = navWrapper.getBoundingClientRect().left;
  
  var sectionBody = document.body.querySelector(".ns-TabBarModule");
  var section = sectionBody.getAttribute("data-activesection") || "A";
  
	var activeElement = navWrapper.querySelector("[data-section='"+section+"'] span")
  
	var textPosition = activeElement.getBoundingClientRect();
  
	var indicator = navWrapper.querySelector(".ns-Indicator");
	//prefix me for live
  indicator.style.transform = "translate3d("+(textPosition.left - navLeft)+"px,0,0) scaleX("+(textPosition.width*0.01)+")";
}
indi();

var clickHandler = function() { 
  var thisLink = this.getAttribute("data-section");
  
  var sectionBody = document.body.querySelector(".ns-TabBarModule");
  sectionBody.setAttribute("data-activesection", thisLink);
  
  indi();
  console.log(thisLink);
};

//quick win
var anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i++) {
  var current = anchors[i];
  current.addEventListener('click', clickHandler, false);
}

style.scss

//meh quick win. not dev ready

body {
  background: #333;
  height: 100vh;
  display: flex;
  justify-content: center;
  padding: 15% 10%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  padding: 11px;
  line-height: 44px;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
} 

.ns-Tab {
  display: flex; 
  justify-content: center;
}

//random. mobile horizon scroll. not in use. 
.ns-TabBar {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.ns-TabBar::-webkit-scrollbar {
  display: none;
  height: 0;
  background-color: transparent;
}

.ns-TabWrapper {
  position: relative;
  width: 100%;
}

.ns-Indicator {
    width: 100px;
    height: 3px;
    background-color: slateblue;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition-property: transform, left;
    transition-duration: .1s;
    transform-origin: 0;
    transform: translate3d(0, 0, 0) scaleX(0);
}