Social Media Slide Out Menu

index.html

<div class="menu">
  <span class="fa fa-twitter fa-2x fa-inverse f-fw hidden"></span>
  <span class="fa fa-facebook fa-2x fa-inverse fa-fw hidden"></span>
  <span class="fa fa-pinterest fa-2x fa-inverse fa-fw hidden"></span>
  <span class="fa fa-bars fa-2x fa-inverse f-fw"></span>
</div>

script.js

$(document).ready(function(){
  $('.menu span:last-child').click(function(){
    $('.menu span').not(':last-child').toggleClass('hidden show') ;
  })
})

scripts

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

social-media-slide-out-menu.markdown

Social Media Slide Out Menu

Slide Out Menu for links to social media

A Pen by Tony Ooi on CodePen.

License.

style.sass

body
  background-color: salmon
  
.menu
  position: relative
  span
    position: absolute
    background-color: black
    padding: 15px 10px
    border: 3px solid white
    border-radius: 50%
    transition: all 0.3s ease-in-out 
    &.hidden
      visibility: hidden  
    &:last-child
      padding: 13px 15px
    &:nth-child(1)
      background-color: lightblue
      padding: 15px 15px
      &.show
        transform: rotate(0deg) translate(100px) rotate(0deg)
    &:nth-child(2)
      background-color: darkblue
      &.show
        transform: rotate(45deg) translate(100px) rotate(-45deg)
    &:nth-child(3)
      background-color: red
      &.show
        transform: rotate(90deg) translate(100px) rotate(-90deg)

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />