A Pen by Captain Anonymous.

index.haml

- @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 A Non Ymous on CodePen.

License.

style.scss

@import "compass/css3";
body {
  background:#f2f2f2;
}
ul {
  position:relative;
  @include transform(rotate(-35deg) skew(20deg,5deg));
}
.list-item {
  background:#000000;
  color:#575757;
  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(-2em 1.5em 0 #e1e1e1);
  @include transition(all .25s linear);
  &:hover {
    background:#ff6e42;
    color:#fffcfb;
    @include transform(translate(0.9em,-0.9em));
    @include transition(all .25s linear);
    @include box-shadow(-2em 2em 0 #e1e1e1);
    &:before, &:after { @include transition(all .25s linear); }
    &:before {
      background:#b65234;
      width:1em;
      top:0.5em;
      left:-1em;
    }
    &:after {

      background:#b65234;
      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));
  }
}