Skip to content

Instantly share code, notes, and snippets.

@taufik-nurrohman
Created June 10, 2019 11:06
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save taufik-nurrohman/3df76c67703b0d997ab7a76a4f989386 to your computer and use it in GitHub Desktop.
<style>
nav {
position: relative;
background: orange;
color: black;
}
nav ul,
nav li {
margin: 0;
padding: 0;
list-style: none;
}
nav ul {
display: flex;
line-height: 2em;
height: 2em;
position: relative;
z-index: 2;
}
nav a {
display: block;
padding: 0 1em;
color: inherit;
text-decoration: none;
}
nav ul + span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2em;
background: gold;
transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
</style>
<nav>
<ul>
<li><a href>Home</a></li>
<li><a href>About</a></li>
<li><a href>Archive</a></li>
<li><a href>Contact</a></li>
</ul>
<span></span>
</nav>
<script>
var lava = document.querySelector('nav ul + span'),
a = document.querySelectorAll('nav a');
function moveTo() {
var left = this.offsetLeft,
width = this.offsetWidth;
lava.style.left = left + 'px';
lava.style.width = width + 'px';
}
a.forEach($ => {
$.addEventListener("touchstart", moveTo, false);
$.addEventListener("mouseover", moveTo, false);
});
moveTo.call(a[0]);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment