Skip to content

Instantly share code, notes, and snippets.

@tovic tovic/lava-nav.html
Created Jun 10, 2019

Embed
What would you like to do?
<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
You can’t perform that action at this time.