just smiling
Created
July 3, 2017 01:34
Star
You must be signed in to star a gist
nick drake current link indicator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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