Menu Hover Drop Down Sederhana

​

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 :

DEMO

Konsep dasarnya :

CSS

Code:

.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;
}

HTML

Code:

<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>

Untuk pengembangan silakan anda kreasikan sendiri sesuai kebutuhan

 

Makasih scriptnya mas