<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div id="wrapper">
  <h1><i class='icon-sort-by-attributes'></i> CSS3 <span>Card Deck Drop Down</span></h1>
      <div class="card-drop">
        <a class='toggle' href="#">
          <i class='icon-suitcase'></i> 
          <span class='label-active'>Everyting</span>
        </a>
        <ul>
          <li class='active'>
            <a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Everyting</a>
          </li>
          <li>
            <a data-label="Design" href="#"><i class='icon-magic'></i> Design</a>
          </li>
          <li >
            <a data-label="UI-UX" href="#"><i class='icon-bolt'></i> UI-UX</a>
          </li>
          <li>
            <a data-label="Print" href="#"><i class='icon-tint'></i> Print</a>
          </li>
          <li>
            <a data-label="Photography" href="#"><i class='icon-camera-retro'></i> Phtography</a>
          </li>

        </ul>
      </div>
    </div>

@import "compass/css3";

@import "compass/reset";
@import "compass/css3";

$green:#6A9094;
$border:darken($green, 10%);

body{
  background-color: #EDEAE3;
  padding-top:40px;
  font-family: helvetica, arial, sans-serif;
  font-size: 1em;
}
*{
  @include box-sizing(border-box);
}
#wrapper{
  width: 680px;
  margin: 0 auto;
}
h1{
  font-size:2.5em;
  text-align: center;
  font-weight: bold;
  margin-bottom:10px;
  line-height: 1.4em;
  color: darken($green, 8%);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  font-family:helvetica, arial, sans-serif;
  span{
    font-weight: lighter;
  }
}

.card-drop{
  max-width: 300px;
  position: relative;
  margin: 0 auto;
  @include perspective(800px);
  a{
    display: block;
    width: 100%;
    background-color: salmon;
    padding:20px 0 20px 20px;
    height: 60px;
    text-decoration: none;
    color: darken($green, 30%);
    background-color: $green;
    border-bottom: 1px solid $border;
    @include transition(all .3s ease-out );
    i{
      display: inline-block;
      width: 20px;
    }
  }
  >a.toggle{
    position: relative;
    z-index: 300;
    @include backface-visibility(hidden);
    @include transform-style(preserve-3d);
    @include transform-origin(50%, 0%);
    @include transition(.1s linear);
    background-color: lighten($green, 8%);
    &:active{
       @include rotateX(60deg);
    }
    &.active{
      &:before{
        content: "\f0d8";
       }
    }

    &:before{
      font-family: 'FontAwesome';
      content: '\f0d7';
      font-size: 1.3em;
      color: darken($green, 20%);
      text-shadow:0 1px 0 rgba(255,255,255,.3);
      position: absolute;
      right: 0;
      top: 0;
      height: 59px;
      line-height: 60px;
      width: 60px;
      text-align: center;
      display: block;
      border-left: 1px solid $border;
    }
  }
  ul{
    position: absolute;
    height: 100%;
    top: 0;
    display: block;
    width: 100%;
    li{
      margin: 0 auto;
      @include transition(all, .3s ease-out);
      position: absolute;
      top: 0;
      z-index: 0;
      width:100%;
      a:hover{
        background-color: lighten($green, 5%);
        color: lighten($green, 44%);
      }
      &.active{
        a{
          color: lighten($green, 20%);
          background-color: darken($green, 5%);
          cursor: default;
        }
      }
      &.closed{
        a:hover{
          cursor: default;
          background-color: $green;
        }
      }
    }
  }
}

(function($){
  
  /* -------------------------------------------------------- */ 
  /*  //set Global variables
  /* -------------------------------------------------------- */ 
  var cards = $(".card-drop"),
    toggler = cards.find(".toggle"),
    links = cards.find("ul>li>a"),
    li = links.parent('li'),
    count = links.length,
    width = links.outerWidth();

    //set z-Index of drop Items
    links.parent("li").each(function(i){
      $(this).css("z-index" , count - i); //invert the index values
    });

    //set top margins & widths of li elements
    function setClosed(){
      li.each(function(index){
         $(this).css("top" , index *2)
            .css("width" , width - index *2)
            .css("margin-left" , (index*2)/2);
      });
      li.addClass('closed');
      toggler.removeClass("active");
    }
    setClosed();

  /* -------------------------------------------------------- */ 
  /*  Toggler Click handler
  /* -------------------------------------------------------- */ 
  toggler.on("mousedown" , function(){
    var $this = $(this); //cache $(this)
    //if the menu is active:
    if($this.is(".active")){
      setClosed();
    }else{
      //if the menu is un-active:
      $this.addClass("active");
      li.removeClass('closed');
      //set top margins
      li.each(function(index){
         $(this).css("top" , 60 * (index + 1))
            .css("width" , "100%")
            .css("margin-left" , "0px");
      });
    }
  });

  /* -------------------------------------------------------- */ 
  /*  Links Click handler
  /* -------------------------------------------------------- */ 
  links.on("click" , function(e){
    var $this = $(this),
      label = $this.data("label");
      icon = $this.children("i").attr("class");
      
      li.removeClass('active');
    if($this.parent("li").is("active")){
      $this.parent('li').removeClass("active");
    }else{
      $this.parent("li").addClass("active");
    }
    toggler.children("span").text(label);
    toggler.children("i").removeClass().addClass(icon);
    setClosed();
    e.preventDefault;
  });

})(jQuery);