Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Jul 3, 2017
Embed
What would you like to do?
nick drake current link indicator
<!-- 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>
//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);
}
//meh quick win. not dev ready
.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);
}
body {
box-sizing: border-box;
background: #333;
height: 100vh;
overflow: hidden;
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment