Subtle but Bold Navigation

index.html

<nav id="navigation">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

script.js

$('#navigation ul li a').on('click', function () {
  $('#navigation ul li a.active').removeClass('active');
  $(this).addClass('active');
});

style.scss

$color-base: #fff;
$color-text: #888;
$color-accent: #848ba0;
*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { background: #efefef; }
#navigation {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  ul {
    padding: 8px;
    border: 1px solid shade($color-base,10%);
    border-radius: 5px;
    background-color: $color-base;
    background-image: linear-gradient(rgba(#000,0.1),transparent);
    display: flex;
    flex-flow: row nowrap;
    box-shadow: inset 0 1px rgba(#fff,0.5);
    li {
      a {
        position: relative;
        height: 30px;
        padding: 0 12px;
        border: 1px solid shade($color-base,15%);
        border-right-width: 0;
        background-color: $color-base;
        background-image: linear-gradient(transparent,rgba(#000,0.1));
        display: block;
        box-shadow: inset 0 0 0 1px rgba($color-base,0.3);
        font-size: 8pt;
        color: $color-text;
        font-weight: 600;
        line-height: 29px;
        text-decoration: none;
        text-shadow: 0 1px rgba($color-base,0.8);
        &:hover { background-image: linear-gradient(transparent,rgba(#000,0.06)); }
        &:active { background-image: linear-gradient(rgba(#000,0.1),transparent); }
        &.active {
          border: 1px solid shade($color-accent,15%);
          border-right-width: 0;
          background-color: $color-accent;
          background-image: linear-gradient(rgba(#fff,0.1),rgba(#000,0.1));
          z-index: 1;
          box-shadow: inset 0 1px rgba(#fff,0.3), 1px 0 shade($color-accent,15%);
          color: $color-base;
          text-shadow: none;
        }
      }
      &:first-child a { border-radius: 3px 0 0 3px; }
      &:last-child a {
        border-right-width: 1px;
        border-radius: 0 3px 3px 0;
        &.active { box-shadow: inset 0 1px rgba(#fff,0.3); }
      }
    }
  }
}

Subtle-but-Bold-Navigation.markdown

Subtle but Bold Navigation

A Pen by White Wolf Wizard on CodePen.

License.