Horizontal Tab Navigation

by Konstantin Rouda

HTML

<!--Horizontal Tab Navigation with CSS3 Transitions--> 
  
  
  <nav class="nav-container">
    <ul role="navigation" class="nav">
      <li class="nav__item current"><a href="#x" accesskey="1">Home</a></li>
      <li class="nav__item"><a href="#x" accesskey="t">Toys</a></li>
      <li class="nav__item"><a href="#x" accesskey="f">Food</a></li>
      <li class="nav__item"><a href="#x" accesskey="c">Clothes</a></li>
      <li class="nav__item"><a href="#x" accesskey="s">Shoes</a></li>
      <li class="nav__item"><a href="#x" accesskey="g">Glasses</a></li>
    </ul>
  </nav>

CSS

/*Horizontal Tab Navigation with CSS3 Transitions*/
BODY {
  margin: 0;
}

.nav-container {
  min-height: 100vh;
  max-width: 5em;
  padding: .5em 0;
  //background: #ddd;
}

.nav {
  list-style: none;
  padding: 0; margin: 0;
}

.nav__item {
  display: block;
  filter: drop-shadow(1px 0 2px rgba(0, 0, 0, .5))
}

/*
writing-mode: vertical-rl;
text-orientation: upright;
inspired by:
https://24ways.org/2016/css-writing-modes
*/

.nav__item A {
  display: block;
  position: relative;
  margin: -.5em 0 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.2em;
  padding: .9em 1.6em;
  border: 1px solid #2e4f8a;
  border-left: none;
  border-radius: 0 .7em .7em 0;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(to right, #3d61a0 50%, cornflowerblue);
  //background: linear-gradient(to right, rgba(61, 97, 160, 0.5) 50%, rgba(100, 149, 237, 0.5));
  opacity: .7;
  transition: padding .3s ease-out, opacity .3s;
}

.nav__item A:first-letter {
  font-size: 1.2em
}

.nav__item:first-child A {
  margin: 0;
}

.nav__item:hover A,
.nav__item.current A {
  padding-left: 2.5em;
  margin-bottom: .5em;
  opacity: 1;
}