Circular Menu

by mrdesjardins

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div>
  <div class="trigger-zone">
    <div class="circles">
      <div class="circle main-circle">
         <span class="glyphicon glyphicon-cog"></span>
      </div>
      <a href="#">
        <div class="circle top-circle">
            <span class="glyphicon glyphicon-plus"></span>
        </div>
      </a>
      <a href="#">
        <div class="circle middle-circle">
            <span class="glyphicon glyphicon-pencil"></span>
        </div>
      </a>
      <a href="#">
        <div class="circle bottom-circle">
            <span class="glyphicon glyphicon-dashboard"></span>
        </div>
      </a>
    </div>
  </div>    
</div>

CSS

.circle
{
  width:60px;
  height:60px;
  box-shadow: 1px 1px 6px #333333; 
  border-radius:50%;
  position: absolute;
  transition:all 0.5s cubic-bezier(.08,1.08,.58,1.11);
  bottom:10px;
  right:10px;
  transform:scale(1);
}
.circle:hover{
    box-shadow: 2px 2px 6px #333333; 
    transform:scale(1.1);
}
.main-circle
{
  background-color:#79b552;
  z-index: 3;
  cursor:pointer;
}
.top-circle
{
  z-index: 1;
  background-color:#82BD82;
  opacity:0;
}
.middle-circle
{
  z-index: 1;
  background-color:#6B6FDE;
  opacity:0;
}
.bottom-circle
{
  z-index: 1;
  background-color:#B7B6B6;
  opacity:0;
}
.trigger-zone:hover .top-circle
{
  bottom:160px;
  opacity:100;
  bottom:110px;
  right:10px;
}
.trigger-zone:hover .middle-circle
{
  opacity:100;
  bottom:80px;
  right:80px;
}
.trigger-zone:hover .bottom-circle
{
  bottom:160px;
  opacity:100;
  bottom:10px;
  right:110px;
}

.circles
{
    position: absolute;
    height: 80px;
    width: 80px;
    bottom: 1px;
    right: 1px;
}
.trigger-zone
{
  position:fixed;
  bottom:10px;
  right:10px;
  width: 140px;
  height: 140px;
  background-color:#FBFBFB;/*This will be transparent in real-life.*/
}

.glyphicon
{
    font-size:24px;
    margin-left: 19px;
    margin-top: 17px;
    color: #FFF;
}

.circles a,
.circles a:hover
{
    color:white;
}