<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>
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)
View Compiled
$(document).ready(function(){
$('.menu span:last-child').click(function(){
$('.menu span').not(':last-child').toggleClass('hidden show') ;
})
})
