<ul class="menu bottomRight">
  <li class="share top">
    <i class="fa fa-share-alt"></i>
    <ul class="submenu">
      <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
    </ul>
  </li>
</ul>

<!--  -->
<ul class="menu bottomLeft">
  <li class="share right">
    <i class="fa fa-share-alt"></i>
    <ul class="submenu">
      <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
    </ul>
  </li>
</ul>

<!--  -->

<ul class="menu topLeft">
  <li class="share bottom">
    <i class="fa fa-share-alt"></i>
    <ul class="submenu">
      <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
    </ul>
  </li>
</ul>

<!--  -->

<ul class="menu topRight">
  <li class="share left">
    <i class="fa fa-share-alt"></i>
    <ul class="submenu">
      <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
    </ul>
  </li>
</ul>

<div class="container">
  <h1>Social Media Icons</h1>
</div>

@import url('https://fonts.googleapis.com/css?family=Montserrat');

$background:#B2B1CF;
$white:#fff;
body{
  background-color: $background;
  font-family: 'Montserrat', sans-serif;
}
.container{
  height:70px;
  padding:55px;
  position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  text-align:center;
}


.menu{
  z-index:999;
  position:fixed;
  padding:0;
  margin:0;
  list-style-type:none;
  .share{
    i.fa{
      height:50px;
      width:50px;
      text-align:center;
      line-height:50px;
      background-color: #fff;
      border-radius:2px;
    }
    &:hover{
      &.bottom {
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              top:#{$i*50}px;
              transform:rotate(0deg);
              border-top:1px dashed darken($white,20%);
              transition-delay:#{$i*0.08}s;
            }
          }
        }
      }
      &.left{
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              left:#{-$i*51}px;
              transform:rotate(0deg);
              transition-delay:#{$i*0.5}s;
              border-right:1px dashed darken($white,20%);
            }
          }
        } 
      }
      &.right{
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              left:#{$i*50}px;
              transform:rotate(0deg);
              transition-delay:#{$i*0.08}s;
              border-left:1px dashed darken($white,20%);
            }
          }
        }
      }
      &.top{
        .submenu{
          @for $i from 1 through 5{
            li:nth-child(#{$i}){
              opacity:1;
              top:#{-$i*51}px;
               transition-delay:#{$i*0.08}s;
              transform:rotateY(0deg);
              border-bottom:1px dashed darken($white,15%);
            }
          }
        }
      }
    }
  }
  .submenu{
    list-style-type:none;
    padding:0;
    margin:0;
    li{
      transition:all ease-in-out 0.5s;
      position:absolute;
      top: 0;
      left: 0;
      z-index:-1;
      opacity:0;
      a{
        color: #212121;
        &:hover{
          i.fa{
            color:#fff;
          }
          &.facebook{
            i.fa{
               background-color: #3b5999;
            }
          }
          &.twitter{
            i.fa{
              background-color: #55acee;
            }
          }
          &.googlePlus{
            i.fa{
              background-color: #dd4b39;
            }
          }
          &.instagram{
            i.fa{
              background-color: #e4405f;
            }
          }
        }
      }
    }
    @for $i from 1 through 4{
      li:nth-child(#{$i}){
        transform:rotateX(#{$i*45}deg);
      }
    }
    
  }
  &.topLeft{
    top:10px;
    left:10px;
  }
  &.topRight{
    top:10px;
    right:10px;
  }
  &.bottomLeft{
    bottom:10px;
    left:10px;
  }
  &.bottomRight{
    bottom:10px;
    right:10px;
  }
}


 
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

External JavaScript

This Pen doesn't use any external JavaScript resources.