nav
	.underline
	.underline
	.underline
	a(onClick="ul(0)") Home
	a(onClick="ul(1)") Videos
	a(onClick="ul(2)") Playlists
	a(onClick="ul(3)") Community
	a(onClick="ul(4)") Channels
	a(onClick="ul(5)") About
	
nav.black
	.underline
	.underline
	.underline
	a(onClick="ul(0)") Home
	a(onClick="ul(1)") Videos
	a(onClick="ul(2)") Playlists
	a(onClick="ul(3)") Community
	a(onClick="ul(4)") Channels
	a(onClick="ul(5)") About
	
nav.full
	.underline
	.underline
	.underline
	a(onClick="ul(0)") Home
	a(onClick="ul(1)") Videos
	a(onClick="ul(2)") Playlists
	a(onClick="ul(3)") Community
	a(onClick="ul(4)") Channels
	a(onClick="ul(5)") About
	
nav.retro
	.underline
	.underline
	.underline
	a(onClick="ul(0)") Home
	a(onClick="ul(1)") Videos
	a(onClick="ul(2)") Playlists
	a(onClick="ul(3)") Community
	a(onClick="ul(4)") Channels
	a(onClick="ul(5)") About

:root {
	--underline-height: .5em;
	--transition-duration : .5s;
}

body {
	font-family: system-ui, sans-serif;
	background: whitesmoke;
	min-height: 100vh;
}

nav {
	position: relative;
	white-space: nowrap;
	background: white;
	padding: var(--underline-height) 0;
	margin: 2em 0;
	box-shadow: 0 1em 2em rgba(black, .05);
}

.underline {
	display: block;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 0;
	height: var(--underline-height);
	width: 20%;
	background: black;
	pointer-events: none;
	mix-blend-mode: multiply;
	transition: transform var(--transition-duration) ease-in-out;
	
	&:nth-child(1) {
		background: yellow;
		transition: calc(var(--transition-duration) * .8);
	}
	&:nth-child(2) {
		background: cyan;
		transition: calc(var(--transition-duration) * 1.2);
	}
	&:nth-child(3) {
		background: magenta;
	}
}

a {
	display: inline-block;
	z-index: 10;
	width: 20%;
	padding: 1em 0;
	text-align: center;
	cursor: pointer;
}

nav.black {
	.underline {
		background: #222;
		border-radius: .25em;
		height: calc(var(--underline-height) / 2);
		mix-blend-mode: initial;
	}
}

nav.full {
	font-weight: bold;
	background: #111;
	color: white;
	
	.underline {
		height: 100%;
		background: gold;
	}
}

nav.retro {
	.underline {	
		border-radius: 100% 100% 0 0;
		
		&:nth-child(1) { background: gold; }
		&:nth-child(2) { background: dodgerblue; }
		&:nth-child(3) { background: tomato; }
	}
}

function ul(index) {
	console.log('click!' + index)
	
	var underlines = document.querySelectorAll(".underline");

	for (var i = 0; i < underlines.length; i++) {
		underlines[i].style.transform = 'translate3d(' + index * 100 + '%,0,0)';
	}
}