Membuat Menu Dropdown Animasi dengan CSS3

Hallo Teman-teman, pada kesempatan kali ini saya akan memberikan tutorial cara Membuat Menu Dropdown Animasi dengan CSS3. sebelum kita memulai dalam Membuat Menu Dropdown Animasi dengan CSS3, saya akan membahas tentang menu dropdown terlebih dahulu. jadi menu dropdown adalah sebuah menu yang dimana didalamnya terdapat sub-sub menu misalnya dalam sebuah menu pada saat cursor menyentuh menu tersebut maka akan tampil sub-sub menu didalamnya.

jadi bagaimana ? sudah cukup jelas kan, penjelasan singkat diatas dalam menu dropdown nya. nah untuk lebih jelasnya dan lebih mendalam kita langsung saja mulai mempraktekannya dalam Membuat Menu Dropdown Animasi dengan CSS3.

pertama-tama siapkan text-editornya terlebih dahulu, kemudian ketik script HTML dibawah ini kedalam text-editornya :

<div class="container">
  <div class="nav">
    <ul>
      <li>ANIMASI MENU
        <ul class="drop-menu menu-1">
          <li>SUBMENU SATU</li>
          <li>SUBMENU DUA</li>
          <li>SUBMENU TIGA</li>
          <li>SUBMENU EMPAT</li>
          <li>SUBMENU LIMA</li>
          <li>SUBMENU ENAM</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

setelah selesai dengan HTMLnya kemudian langkah selanjutnya teman-teman bisa ketik script CSS nya seperti pada contoh dibawah ini :

ul { list-style: none;}
.container { background-color: #fff; width: 600px; height: 450px; margin: 50px auto; border: 1px solid #333; border-radius: 4px; position: relative;}
.nav { display: inline-block; padding: 50px; text-align: center; margin: 0px 10px; position: absolute;}
.nav li:hover { background: #4fa9d8;}
.nav > ul { list-style: none; padding: 0; margin: 0; display: inline-block; background: #3B95C4; border-radius: 5px; color: rgba(255, 255, 255, 0.7);}
.nav > ul > li { float: left; width: 120px; height: 50px; line-height: 50px; position: relative; font-size: 14px; cursor: pointer;}
ul.drop-menu { position: absolute; top: 100%; left: 0%; width: 100%; padding: 0;}
ul.drop-menu li { background: #318bba;}
ul.drop-menu li:hover { background: #459fce;}
ul.drop-menu li:first-child { border-radius: 2px 2px 0 0;}
ul.drop-menu li:last-child { border-radius: 0 0 5px 5px;}
ul.drop-menu li { display: none;}
li:hover > ul.drop-menu li { display: block;}
li:hover > ul.drop-menu.menu-1 { perspective: 1000px;}
li:hover > ul.drop-menu.menu-1 li { transform-origin: top left; opacity: 0;}
li:hover > ul.drop-menu.menu-1 li:nth-child(1) { animation-name: menu-1; animation-delay: -150ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
li:hover > ul.drop-menu.menu-1 li:nth-child(2) { animation-name: menu-1; animation-delay: 0ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
li:hover > ul.drop-menu.menu-1 li:nth-child(3) { animation-name: menu-1; animation-delay: 150ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
li:hover > ul.drop-menu.menu-1 li:nth-child(4) { animation-name: menu-1; animation-delay: 300ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
li:hover > ul.drop-menu.menu-1 li:nth-child(5) { animation-name: menu-1; animation-delay: 450ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
li:hover > ul.drop-menu.menu-1 li:nth-child(6) { animation-name: menu-1; animation-delay: 600ms; animation-duration: 600ms; animation-fill-mode: forwards; animation-timing-function: ease-in-out;
}
@keyframes menu-1 {
  0% {
    opacity: 0;
    transform: rotateY(90deg);
    margin-top: -100px;
  }
  80% {
    margin-top: 0px;
    transform: rotateY(90deg);
  }
  90% {
    transform: rotateY(-10deg);
    margin-top: 5px;
  }
  100% {
    opacity: 1;
    margin-top: 0px;
    transform: rotateY(0deg);
  }
}

jika sudah HTML dan CSS nya, langkah selanjutnya teman-teman bisa langsung menjalankan/run dibrowser yang teman-teman gunakan dan jika berhasil maka hasilnya akan seperti pada gambar dibawah ini :

Jika Hasilnya sudah seperti pada gambar diatas maka teman-teman telah berhasil dalam Membuat Menu Dropdown Animasi dengan CSS3.

sekian pembahasan yang singkat ini dari saya jika masih ada kekurangan harap dimaklumi, dan tunggu pembahasan yang selanjutnya

Terimakasih