Navigation Bar by Jan Kaděra

index.html

- @icons = ['icon-reorder','icon-th-large','icon-bar-chart','icon-tasks','icon-bell','icon-archive','icon-comment','icon-sitemap','icon-thumbs-up','icon-tumblr']
%ul
  - @icons.each do |icon|
    %li
      %a.list-item{:href=>""}
        %i{:class=>"#{icon}"}

Navigation Bar by Jan Kaděra.markdown

Navigation Bar by Jan Kaděra

Give it a hover! Inspired by: Navigation Bar by Jan Kaděra http://dribbble.com/shots/1267103-Navigation-Bar

Forked from Katy DeCorah's Pen Navigation Bar by Jan Kaděra.

A Pen by Branden Dane on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

body {
  background:#3B3B3B;
}
ul {
  position:relative;
  @include transform(rotate(0deg));
}
.list-item {
  background:#3B3B3B;
  color:#FFFFFF;
  text-align:center;
  height:2.5em;
  width:4em;
  vertical-align:middle;
  line-height:2.5em;
  border-bottom:1px solid #060606;
  position:relative;
  display:block;
  text-decoration:none;
  @include box-shadow(-1em 1em 1em rgba(0,0,0,0.25));
  @include transition(all .25s linear);
  &:hover {
    background:#3FA5C3;
    color:#FFFFFF;
    @include transform(translate(0.5em,-0.5em));
    @include transition(all .25s linear);
    @include box-shadow(-1em 1em 0.25em #e1e1e1);
    &:before, &:after { @include transition(all .25s linear); }
    &:before {
      background:#333333;
      width:1em;
      top:0.5em;
      left:-1em;
    }
    &:after {
      background:#222222;
      width:1em;
      bottom:-2.5em;
      left:1em;
      height:4em;
    }
  }
  &:before, &:after {@include transition(all .25s linear);}
  &:after {
    content:"";
    position:absolute;
    height:4em;
    background:#181818;
    width:0.5em;
    bottom:-2.25em;
    left:1.5em;
    @include transform(rotate(90deg) skew(0deg,45deg));
  }
  &:before {
    content:"";
    position:absolute;
    height:2.5em;
    background:#121212;
    width:0.5em;
    top:0.25em;
    left:-0.5em;
    @include transform(skewY(-45deg));
  }
}

styles

<link href="http://codepen.io/katydecorah/pen/23c0352cf1813420a04865d33f1a7c3f" rel="stylesheet" />

that perfect