Monday, November 10, 2014

Simple Menu Dropdown Hover Animasi

simple menu animasi css3


Simple Menu Dropdown Hover Animasi  - Berbagai efek menu yang ditampilkan tentunya akan menambah nilai lebih dari blog itu sendiri. Sebagai contoh kali ini saya kan membuat menu simple dengan efek hover animasi menggunakan efek transisi delay CSS3. Terkait dengan Flat UI Menu Animasi Dropdown CSS3 dan Dropdown Menu Metro UI Awesome. Dengan metode sederhana ini kita sudah bisa menerapkan efek drop down animasi yang lebih simple. Untuk demonya klik dibawah ini :


.container {
  text-align: center;
  position: relative;
  margin: 3em auto 0 auto;
  width: 9em;
  color: white;
  cursor: pointer;
}

.menu {
  position: relative;width:18em;font-size:1.2em;
  padding: 1em 0;
  background: #111;
  z-index: 100;
}

.opsi{
  position: absolute;
  width: 18em;
  padding: 1em 0;
  font-size: 1.2em;
  top: 0;
  transition: top 0.2s ease-in-out;
}

.siji {
  transition-delay:0;
  background: #222;
  z-index: 50;
}
.loro {
  transition-delay:.05s;
  background: #333;
  z-index: 49;
}
.telu{
  transition-delay:.1s;
  background: #444;
  z-index: 48;
}
.papat {
  transition-delay:.15s;
  background: #555;
  z-index: 47;
}
.limo {
  transition-delay:.2s;
  background: #666;
  z-index: 46;
}

.container:hover > .siji{
  top: 4.7em;
}

.container:hover > .loro {
  top: 8.1em;
}

.container:hover > .telu {
  top: 11.5em;
}

.container:hover > .papat {
  top: 14.9em;
}

.container:hover > .limo {
  top: 18.3em;
}


<div class='container'>
<div class='menu'><i class="fa fa-bars"></i></div>
<div class='opsi siji'>Setunggal</div>
<div class='opsi loro'>Kaleh</div>
<div class='opsi telu'>Tigo</div>
<div class='opsi papat'>Sekawan</div>
<div class='opsi limo'>Gangsal</div>
</div>

Ini sekedar contoh jadi anda bisa kreasikan sendiri sesuai kebutuhan...Semoga bermanfaat