Slide-out contact info

index.html

%ul#contact
    %li
        %i.icon-male.icon-2x
        %span Daniel Weiner
    %li
        %i.icon-globe.icon-2x
        %a(href="") www.example.com
    %li
        %i.icon-phone.icon-2x
        %span 999-555-1212
    %li
        %i.icon-2x @
        %a(href="") foo@bar.com

script.js

$(function() {
  $('#contact li').click(function(){
    var $this = $(this);
    if ($this.hasClass('expanded')) {
      $this.removeClass('expanded');
    } else {
      $this.addClass('expanded');
    }
  });
});

scripts

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

Slide-out contact info.markdown

Slide-out contact info

A Pen by Daniel Weiner on CodePen.

License.

style.css

@import "compass/css3";

$sqSize: 50px;
@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
#contact {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  li {
    background-color: mediumseagreen;
    width: $sqSize;
    height: $sqSize;
    margin-right: 3* $sqSize;
    line-height: $sqSize;
    position: absolute;
    text-align: center;
    clip: rect(0, (5* $sqSize + 5),$sqSize, 0);
      &:nth-child(2) {
        top: $sqSize;
        left: $sqSize;
      }
      &:nth-child(3) {
        top: 2 * $sqSize;
        left: 0;
      }
      &:nth-child(4) {
        top: 3 * $sqSize;
        left: $sqSize;
      }
      i {
        text-align: center;
        line-height: $sqSize;
        color: rgb(0, 50, 0);
      }
      a, span {
        position: absolute;
        top:0;
        left:-3* $sqSize;
        width: 4* $sqSize;
        font-family: Oxygen;
        z-index: -1;
        background-color: oldlace;
        @include transition(left .3s);
        &::after {
          content: "";
          position: absolute;
          top:0;
          bottom:0;
          right: -5px;
          width: 5px;
          background-color: sandybrown;
        }
      }
      &:hover, &.expanded{
        a, span {
          left: $sqSize;
        }
      }
      &.expanded {
        background-color: seagreen;
      }
  }
}

styles

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