Stretchy nav highlight

index.html

<div class="nav">
  <div class="bar right index0">
    <div class="cover cover1"></div>
    <div class="cover cover2"></div>
  </div>
  <div class="options index0">
    <div class="option">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40"><g transform="translate(0 -1.165)"><path d="M95.8 61.8l-6.1-22.3c-.7-4-2.6-7.6-5.5-10.5-3.7-3.7-8.7-5.8-14-5.8-3.2 0-6.4.8-9.2 2.2-.3.1-.5.2-.7.2H40.8c-.2 0-.5-.1-.7-.2-2.8-1.5-6-2.2-9.2-2.2-5.3 0-10.2 2-14 5.8-2.8 2.8-4.7 6.5-5.5 10.5l-6 22.3c-1.8 6.4 1.3 13.2 7.4 16l2 .9c1.7.8 3.5 1.2 5.4 1.2 3.9 0 7.5-1.7 9.9-4.7l8-9.7c1.8-2.2 4.4-3.4 7.2-3.4h10.6c2.8 0 5.5 1.2 7.2 3.4l8 9.7c2.4 3 6 4.7 9.9 4.7 1.9 0 3.7-.4 5.4-1.2l2-.9c6.1-2.8 9.2-9.6 7.4-16zm-10.3 9.6l-2 .9c-2.4 1.1-5.3.4-6.9-1.6l-8-9.7c-3.1-3.8-7.7-6-12.7-6H45.3c-4.9 0-9.5 2.2-12.7 6l-8 9.7c-1.6 2-4.5 2.7-6.9 1.6l-2-.9c-2.9-1.3-4.4-4.7-3.6-7.8l6.1-22.4.1-.3c.5-2.6 1.7-5 3.5-6.9 2.4-2.4 5.6-3.7 9-3.7 2.1 0 4.1.5 5.9 1.4 1.3.7 2.6 1 4 1h19.6c1.3 0 2.7-.3 4-1 1.8-.9 3.8-1.4 5.9-1.4 3.4 0 6.6 1.3 9 3.7 1.9 1.9 3.1 4.2 3.6 6.9L89 63.7c1 3.1-.5 6.4-3.5 7.7z"/><path d="M37 39.9h-2.1v-2.1c0-1.9-1.6-3.5-3.5-3.5s-3.5 1.6-3.5 3.5v2.1h-2.1c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h2.1V49c0 1.9 1.6 3.5 3.5 3.5s3.5-1.6 3.5-3.5v-2.1H37c1.9 0 3.5-1.6 3.5-3.5s-1.6-3.5-3.5-3.5z"/><circle cx="71.4" cy="38.4" r="4.6"/><circle cx="60.8" cy="47.1" r="4.6"/></g></svg>
      Games
    </div>
    <div class="option">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40"><path d="M33.3 36.805h20.2c1.9 0 3.5-1.6 3.5-3.5s-1.6-3.5-3.5-3.5H33.3c-1.9 0-3.5 1.6-3.5 3.5s1.5 3.5 3.5 3.5zM69.1 39.905H33.3c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h35.8c1.9 0 3.5-1.6 3.5-3.5s-1.6-3.5-3.5-3.5zM61.1 50.005H33.3c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5h27.9c1.9 0 3.5-1.6 3.5-3.5s-1.6-3.5-3.6-3.5z"/><path d="M74.6 15.105H27.4c-6.1 0-11 5-11 11v34.3c0 6.1 5 11 11 11h29.5c4.4 0 8.6 1.6 11.8 4.6l6.7 6.2c1.1 1.1 2.6 1.6 4.1 1.6 3.4 0 6.1-2.7 6.1-6.1v-51.6c.1-6.1-4.9-11-11-11zm4.1 60.7l-5.2-4.8c-4.5-4.2-10.4-6.5-16.6-6.5H27.4c-2.2 0-4-1.8-4-4v-34.4c0-2.2 1.8-4 4-4h47.2c2.2 0 4 1.8 4 4v49.7z"/></svg>
      Comments
    </div>
    <div class="option">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="40" height="40"><path d="M82.4 56.494l-3.9-2.4c.1-1.2.2-2.3.2-3.5v-.5l4.1-2c2.6-1.3 3.7-4.4 2.4-7l-6-12.4c-1.2-2.5-4.5-3.7-7-2.4l-4.1 2c-1.9-1.6-4-2.9-6.2-3.9v-4.6c0-2.9-2.4-5.3-5.3-5.3H42.8c-2.9 0-5.3 2.4-5.3 5.3v4.6c-1.3.6-2.6 1.3-3.8 2.1l-3.9-2.4c-2.4-1.5-5.8-.7-7.2 1.7l-7.3 11.8c-.7 1.2-1 2.6-.6 4 .3 1.4 1.2 2.5 2.4 3.3l3.9 2.4c-.1 1.2-.2 2.3-.2 3.5v.5l-4.1 2c-2.6 1.3-3.7 4.4-2.4 7l6 12.4c1.2 2.5 4.5 3.7 7 2.4l4.1-2c1.9 1.6 4 2.9 6.2 3.9v4.6c0 2.9 2.4 5.3 5.3 5.3h13.8c2.9 0 5.3-2.4 5.3-5.3v-4.6c1.3-.6 2.6-1.3 3.8-2.1l3.9 2.4c.8.5 1.8.8 2.8.8 1.8 0 3.5-.9 4.5-2.5l7.3-11.8c.7-1.2 1-2.6.6-4-.5-1.4-1.3-2.5-2.5-3.3zm-10.8-8.1c.1.8.1 1.5.1 2.3 0 1.2-.1 2.4-.3 3.5-.3 2.1.6 4.2 2.4 5.3l3.4 2.1-5.4 8.8-3.4-2.1c-1.8-1.1-4.1-1-5.8.2-1.4 1-2.9 1.8-4.4 2.5-2 .8-3.3 2.7-3.3 4.8v4H44.6v-4c0-2.1-1.3-4-3.3-4.8-2.3-.9-4.4-2.3-6.2-3.9-1.6-1.4-3.9-1.7-5.8-.8l-3.6 1.7-4.5-9.3 6.8-3.3-.3-2.4c-.1-.8-.1-1.5-.1-2.3 0-1.2.1-2.4.3-3.5.3-2.1-.6-4.2-2.4-5.3l-3.4-2.1 5.4-8.8 3.4 2.1c1.8 1.1 4.1 1 5.8-.2 1.4-1 2.9-1.8 4.4-2.5 2-.8 3.3-2.7 3.3-4.8v-4h10.3v4c0 2.1 1.3 4 3.3 4.8 2.3.9 4.4 2.3 6.2 3.9 1.6 1.4 3.9 1.7 5.8.8l3.6-1.7 4.5 9.3-6.8 3.3z"/><path d="M49.7 35.194c-8.5 0-15.5 6.9-15.5 15.5s6.9 15.5 15.5 15.5 15.5-7 15.5-15.6-6.9-15.4-15.5-15.4zm0 23.9c-4.7 0-8.5-3.8-8.5-8.5s3.8-8.5 8.5-8.5 8.5 3.8 8.5 8.5-3.8 8.5-8.5 8.5z"/></svg>
      Settings
    </div>
  </div>
</div>

script.js

window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
const allOptions = $$('.option')
const options = $('.options')
const bar = $('.bar')
let focus = 0;
allOptions.forEach((option, i) => {
  option.addEventListener('click', () => {
    if (focus !== i) {
      bar.className = 'bar';
      options.className = 'options';
      if (focus < i) {
        bar.classList.add('right')
      } else {
        bar.classList.add('left')
      }
      bar.classList.add(`index${i}`)
      options.classList.add(`index${i}`)
      focus = i;
    }
  })
})

stretchy-nav-highlight.markdown

Stretchy nav highlight

A subtle stretch effect on the nav highlight when changing active option. A moment of charm to make navs a bit more playful

SVG Icons from Ryan Beck from the Noun project

A Pen by Mikael Ainalem on CodePen.

License.

style.css

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
body {
  align-items: center;
  display: flex;
  font-family: 'Nunito Sans', sans-serif;
  font-size: .92em;
  font-weight: bold;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
.nav {
  overflow: hidden;
}
.options {
  display: flex;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.option {
  align-items: center;
  color: #444;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-height: 50px;
  min-width: 100px;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  transition: color 200ms, fill 200ms;
}
.index0 .option:nth-child(1) {
  color: #4080ff;
  fill: #4080ff;
}
.index1 .option:nth-child(2) {
  color: #4080ff;
  fill: #4080ff;
}
.index2 .option:nth-child(3) {
  color: #4080ff;
  fill: #4080ff;
}
.bar {
  background: #4080ff;
  height: 3px;
  margin-bottom: 8px;
  position: relative;
  width: 100%;
}
.cover {
  background: #fff;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.left .cover1 {
  transition: transform 200ms;
}
.left .cover2 {
  transition: transform 200ms 120ms;
}
.right .cover1 {
  transition: transform 200ms 120ms;
}
.right .cover2 {
  transition: transform 200ms;
}
.index0 .cover1 {
  transform: translateX(-95%) skew(45deg);
}
.index0 .cover2 {
  transform: translateX(28.33%) skew(-45deg);
}
.index1 .cover1 {
  transform: translateX(-61.67%) skew(45deg);
}
.index1 .cover2 {
  transform: translateX(61.67%) skew(-45deg);
}
.index2 .cover1 {
  transform: translateX(-28.33%) skew(45deg);
}
.index2 .cover2 {
  transform: translateX(95%) skew(-45deg);
}