Fly Menu

---

caranya: masukkan kode html widget dibawah ini:

<div id="body" class="clearfix">

  <div class="fly-menu">
    <div class="fly-hover"></div>
    <ul>
    <li class="fly-item home"></li>
    <li class="fly-item about"></li>
    <li class="fly-item setting"></li>
    <li class="fly-item portfolio"></li>
    <li class="fly-item mail"></li>
</ul>
    <div class="fly-main"></div>
  </div>
</div>


kemudian css nya ini:




#body {
    padding: 100px 0 150px 0;
}


.fly-menu {
  float: left;
  margin: 50px 100px 0 150px;
  width: 60px;
  height: 60px;
  position: relative;
  border-radius: 50%;
  z-index: 1;
  display: block;
}

.fly-main {
  width: 60px;
  height: 60px;
  background: red;
  position: relative;
  border-radius: 100%;
  border: 2px solid #fff;
  -moz-transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
  transition: 1.5s ease;
  position:absolute;
  cursor:pointer;
}
.fly-main:after{
    content:"";
    position:absolute;
    background:white;
    width:10px;
    height:30px;
    top:15px;
    left:25px;

}
.fly-main:before{
    content:"";
    position:absolute;
    background:white;
    width:30px;
    height:10px;
    top:25px;
    left:15px;

}

.fly-menu:hover .fly-main {
  -moz-transform: rotate(490deg);
  -webkit-transform: rotate(490deg);
  transform: rotate(490deg);
}




.fly-hover {
  width: 60px;
  height: 60px;
  opacity: 0.5;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.fly-menu:hover .fly-hover {
  -moz-transform: scale(5);
  -webkit-transform: scale(5);
  transform: scale(5);
}

ul{
  list-style:none;
}

.fly-item {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

.home,
.about,
.setting,
.portfolio,
.mail{

  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -moz-transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}



.home {
  background-color: #D4F25C;
 width:50px;
  height:50px;
  top: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  cursor:pointer;
}
.home:after{
content: "";
    border-color: transparent transparent #577305;
    border-image: none;
    border-style: solid;
    border-width: 18px;
    content: "";
    height: 16px;
    left: 7px;
    position: absolute;
    top: -30px;
    width: 0;
   display:inline-block;
}
.home:before{
width:30px;
 height:20px;
  content:"";
  background-color:#577305;
  position:absolute;
  top:20px;
  left:10px;
   display:inline-block;
}

.fly-menu:hover .home {
  top: -60px;
  left: -60px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -moz-animation: home 1s 1 linear;
  -webkit-animation: home 1s 1 linear;
  animation: home 1s 1 linear;
}

@-moz-keyframes home {
  0% {-moz-transform: rotate(-360deg); top: 15px; left: 15px;}
  50% {-moz-transform: rotate(0deg); top: -70px; left: -70px;}
  100% {-moz-transform: rotate(360deg); top: -60px; left: -60px;}
}

@-webkit-keyframes home {
  0% {-webkit-transform: rotate(-360deg); top: 15px; left: 15px;}
  50% {-webkit-transform: rotate(0deg); top: -70px; left: -70px;}
  100% {-webkit-transform: rotate(360deg) top: -60px; left: -60px;;}
}

@keyframes home {
  0% {transform: rotate(-360deg); top: 15px; left: 15px;}
  50% {transform: rotate(0deg); top: -70px; left: -70px;}
  100% {transform: rotate(360deg); top: -60px; left: -60px;}
}




.about {
  background-color: #02BDF4;
 width:50px;
  height:50px;
  top: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  cursor:pointer;
}
.about:after{
content:"";
  width:10px;
  height:10px;
  border-radius:10px;
  position:absolute;
  top:10px;
  left:20px;
  background-color:#21383E;
  display:inline-block;

}
.about:before{
content:"";
  width:10px;
  height:20px;
  position:absolute;
  top:22px;
  left:20px;
  background-color:#21383E;
   display:inline-block;
}

.fly-menu:hover .about {
  top: -120px;
  left:50px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -moz-animation: it-2 1.1s 1 linear;
  -webkit-animation: it-2 1.1s 1 linear;
  animation: it-2 1.1s 1 linear;
}

@-moz-keyframes about {
  0% {-moz-transform: rotate(-360deg); top: 15px;}
  50% {-moz-transform: rotate(0deg); top: -110px;}
  100% {-moz-transform: rotate(360deg); top:-100px;}
}

@-webkit-keyframes about {
  0% {-webkit-transform: rotate(-360deg); top: 15px;}
  50% {-webkit-transform: rotate(0deg); top: -110px;}
  100% {-webkit-transform: rotate(360deg); top:-100px;}
}

@keyframes about {
  0% {transform: rotate(-360deg); top: 15px;}
  50% {transform: rotate(0deg); top: -110px;}
  100% {transform: rotate(360deg); top:-100px;}
}



.setting {
  background: #FE9732;
  width:50px;
  height:50px;
  top: 15px;
  right: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  cursor:pointer;
}

.setting:after{
position:absolute;
width:7px;
height:20px;
top:17px;
 left:14px;
content:"";
 background-color:#693E13;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

}
.setting:before{
   border:6px solid #693E13;
  border-top:0px;
  border-radius:0px 0px 10px 10px;
    top: 12px;
    left:19px;
    height: 6px;
  width:10px;
  position:absolute;
  content:'';
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);


}

.fly-menu:hover .setting {
  top: -20px;
  right: -120px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  /*==== Animasi Efek Bouncing ====*/
  -moz-animation: it-3 1.2s 1 linear;
  -webkit-animation: it-3 1.2s 1 linear;
  animation: it-3 1.2s 1 linear;
}

@-moz-keyframes setting {
  0% {-moz-transform: rotate(-360deg); top: 15px; right: 15px;}
  50% {-moz-transform: rotate(0deg); top: -70px; right: -70px}
  100% {-moz-transform: rotate(360deg); top:-60px; right: -60px; }
}

@-webkit-keyframes setting {
  0% {-webkit-transform: rotate(-360deg); top: 15px; right: 15px;}
  50% {-webkit-transform: rotate(0deg); top: -70px; right: -70px}
  100% {-webkit-transform: rotate(360deg); top:-60px; right: -60px; }
}

@keyframes setting {
  0% {transform: rotate(-360deg); top: 15px; right: 15px;}
  50% {transform: rotate(0deg); top: -70px; right: -70px}
  100% {transform: rotate(360deg); top:-60px; right: -60px; }
}



.portfolio {
  background-color:#FDE674;
  bottom: -10px;
  right: 5px;
  width:50px;
  height:50px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  cursor:pointer;
}

.portfolio:after{
content:"";
background:#86680E;
  width:30px;
  height:20px;
  position:absolute;
  top:16px;
  left:10px;
}

.portfolio:before{
content:"";
background:#86680e;
  width:15px;
  height:10px;
  position:absolute;
  top:12px;
  left:25px;

}
.fly-menu:hover .portfolio {
  bottom: -90px;
  right: -110px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -moz-animation: portfolio 1.2s 1 linear;
  -webkit-animation: portfolio 1.2s 1 linear;
  animation: portfolio 1.2s 1 linear;
}

@-moz-keyframes portfolio {
  0% {-moz-transform: rotate(-360deg); bottom: 15px; right: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -70px; right: -70px}
  100% {-moz-transform: rotate(360deg); bottom:-60px; right: -60px; }
}

@-webkit-keyframes portfolio {
  0% {-webkit-transform: rotate(-360deg); bottom: 15px; right: 15px;}
  50% {-webkit-transform: rotate(0deg); bottom: -70px; right: -70px}
  100% {-webkit-transform: rotate(360deg); bottom:-60px; right: -60px; }
}

@keyframes  portfolio {
  0% {transform: rotate(-360deg); bottom: 15px; right: 15px;}
  50% {transform: rotate(0deg); bottom: -70px; right: -70px}
  100% {transform: rotate(360deg); bottom:-60px; right: -60px; }
}




.it-5 {
  background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
  bottom: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.fly-menu:hover .it-5 {
  bottom: -100px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -moz-animation: it-5 1.3s 1 linear;
  -webkit-animation: it-5 1.3s 1 linear;
  animation: it-5 1.3s 1 linear;
}

@-moz-keyframes it-5 {
  0% {-moz-transform: rotate(-360deg); bottom: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -110px;}
  100% {-moz-transform: rotate(360deg); bottom:-100px; }
}

@-webkit-keyframes it-5 {
  0% {-webkit-transform: rotate(-360deg); bottom: 15px;}
  50% {-webkit-transform: rotate(0deg); bottom: -110px;}
  100% {-webkit-transform: rotate(360deg); bottom:-100px; }
}

@keyframes it-5 {
  0% {transform: rotate(-360deg); bottom: 15px;}
  50% {transform: rotate(0deg); bottom: -110px;}
  100% {transform: rotate(360deg); bottom:-100px; }
}



.it-6 {
  background: magenta;
  background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
  bottom: 15px;
  left: 15px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
  transition-delay: 0.7s;
}
.fly-menu:hover .it-6 {
  bottom: -60px;
  left: -60px;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  -moz-animation: it-6 1.4s 1 linear;
  -webkit-animation: it-6 1.4s 1 linear;
  animation: it-6 1.4s 1 linear;
}

@-moz-keyframes it-6 {
  0% {-moz-transform: rotate(-360deg); bottom: 15px; left: 15px;}
  50% {-moz-transform: rotate(0deg); bottom: -70px; left: -70px}
  100% {-moz-transform: rotate(360deg); bottom:-60px; left: -60px; }
}

@-webkit-keyframes it-6 {
  0% {-webkit-transform: rotate(-360deg); bottom: 15px; left: 15px;}
  50% {-webkit-transform: rotate(0deg); bottom: -70px; left: -70px}
  100% {-webkit-transform: rotate(360deg); bottom:-60px; left: -60px; }
}

@keyframes it-6 {
  0% {transform: rotate(-360deg); bottom: 15px; left: 15px;}
  50% {transform: rotate(0deg); bottom: -70px; left: -70px}
  100% {transform: rotate(360deg); bottom:-60px; left: -60px; }
}