Bounce Nav Indicator
Simple sidebar navigation where a small diamond indicator bounces to the hovered or selected item with a spring.
Preview and code
index.html
<div class="bn"><nav class="nv"><i class="dm"></i></nav></div>
styles.css
.bn{width:100%;height:100%;min-height:380px;display:grid;place-items:center;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.nv{position:relative;padding-left:24px}.nv a{display:block;height:34px;line-height:34px;font-size:14px;color:#888;cursor:pointer;transition:color .2s}.nv a.on{color:#fff;font-weight:600}.nv a:hover{color:#ddd}.dm{position:absolute;left:6px;top:0;width:7px;height:7px;background:#0a84ff;transform:translateY(13px) rotate(45deg);transition:transform .55s cubic-bezier(.3,1.9,.5,1)}
script.js
(function(){var nv=document.querySelector(".nv"),dm=nv.querySelector(".dm"),I=["Overview","Components","Motion","Templates","Changelog"],a=1,els=I.map(function(t,i){var e=document.createElement("a");e.textContent=t;e.onclick=function(){a=i;mv(i);mark()};e.onmouseenter=function(){mv(i)};nv.appendChild(e);return e});function mv(i){dm.style.transform="translateY("+(i*34+13)+"px) rotate(45deg)"}function mark(){els.forEach(function(e,i){e.classList.toggle("on",i===a)})}nv.onmouseleave=function(){mv(a)};mark();mv(a)})();