Membuat Dropdown menu dengan CSS3 Animation

Di internet sekarang ini banyak sekali beredar plugin atau pun library untuk membuat dropdown menu, mulai dari yang simpel ampe yang ribet banget. Nah kali ini saya akan share cara membuat dropdown menu hanya dengan CSS3, moga aja sesuai dengan selera kalian atau paling tidak bisa menambah pengetahuan kalian

Preview: <a href='https://plus.google.com/107704214034239413877/posts/D4uYQqcpQs9'>https://plus.google.com/107704214034239413877/posts/D4uYQqcpQs9</a>

Ok....kita mulai dengan struktur HTML jangan lupa link font-awesome di bagian head (optional) gk ada yang spesial dari kode berikut, hanya kode dasar biasa

<nav>
  <ul>
    <li class="off-1">Fruits
      <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
      <ul class="drop-menu menu-1">
        <li>Apple</li>
        <li>Orange</li>
        <li>Mango</li>
        <li>Papaya</li>
      </ul>
    </li>
    <li>Vegie
      <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
      <ul class="drop-menu menu-2">
        <li>Carrot</li>
        <li>Broccoli</li>
        <li>Lettuce</li>
        <li>Cabbage</li>
      </ul>
    </li>
    <li>Spices
      <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
      <ul class="drop-menu menu-3">
        <li>Nutmeg</li>
        <li>Pepper</li>
        <li>Onion</li>
        <li>Garlic</li>
      </ul>
    </li>
    <li>Herbs
      <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
      <ul class="drop-menu menu-4">
        <li>Basil</li>
        <li>Fennel</li>
        <li>Chives</li>
        <li>Mints</li>
      </ul>
    </li>
  </ul>
</nav>

OK....kita lanjut ke bagian asiknya, yaitu CSS disini saya menganggap kalian sudah paham dengan CSS dasar dan familiar dengan beberapa CSS Pseudo Class

nav {
  padding: 50px;
  text-align: center;
}
nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  background: MediumSeaGreen;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
nav > ul > li {
  float: left;
  width: 150px;
  height: 65px;
  line-height: 65px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: bold;
  color: #BBE4CD;
  cursor: pointer;
  border-right: solid thin SeaGreen;
}
nav > ul > li > i {
  -webkit-transition: -webkit-transform 0.1s ease;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
nav > ul > li:hover {
  background: SeaGreen;
  color: Azure;
}
nav > ul > li:hover > i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
nav > ul > li:hover > ul.drop-menu li {
  display: block;
}
nav > ul > li:last-child {
  border-right: none;
}

ul.drop-menu {
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  padding: 0;
}
ul.drop-menu li {
  background: #666;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: solid thin #595959;
  display: none;
}
ul.drop-menu li:hover {
  background: #595959;
}
ul.drop-menu li:last-child {
  border-radius: 0px 0px 5px 5px;
  border-bottom: none;
}

li:hover > ul.drop-menu.menu-1 {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
li:hover > ul.drop-menu.menu-1 li {
  opacity: 0;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(1) {
  -webkit-animation-name: menu-1;
          animation-name: menu-1;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(2) {
  -webkit-animation-name: menu-1;
          animation-name: menu-1;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(3) {
  -webkit-animation-name: menu-1;
          animation-name: menu-1;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(4) {
  -webkit-animation-name: menu-1;
          animation-name: menu-1;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes menu-1 {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg) translateY(20px);
            transform: rotateY(-90deg) translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateY(0);
            transform: rotateY(0deg) translateY(0);
  }
}
@keyframes menu-1 {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg) translateY(20px);
            transform: rotateY(-90deg) translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0deg) translateY(0);
            transform: rotateY(0deg) translateY(0);
  }
}
li:hover > ul.drop-menu.menu-2 {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
li:hover > ul.drop-menu.menu-2 li {
  opacity: 0;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(1) {
  -webkit-animation-name: menu-2;
          animation-name: menu-2;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 0;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(2) {
  -webkit-animation-name: menu-2;
          animation-name: menu-2;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 120ms;
          animation-delay: 120ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 1;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(3) {
  -webkit-animation-name: menu-2;
          animation-name: menu-2;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 240ms;
          animation-delay: 240ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 2;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(4) {
  -webkit-animation-name: menu-2;
          animation-name: menu-2;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 360ms;
          animation-delay: 360ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 3;
}
@-webkit-keyframes menu-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes menu-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
li:hover > ul.drop-menu.menu-3 {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
li:hover > ul.drop-menu.menu-3 li {
  opacity: 0;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(1) {
  -webkit-animation-name: menu-3;
          animation-name: menu-3;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 0;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(2) {
  -webkit-animation-name: menu-3;
          animation-name: menu-3;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 120ms;
          animation-delay: 120ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 1;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(3) {
  -webkit-animation-name: menu-3;
          animation-name: menu-3;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 240ms;
          animation-delay: 240ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 2;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(4) {
  -webkit-animation-name: menu-3;
          animation-name: menu-3;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 360ms;
          animation-delay: 360ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 3;
}
@-webkit-keyframes menu-3 {
  0% {
    opacity: 0;
    -webkit-transform: skewX(-20deg) translateX(30px);
            transform: skewX(-20deg) translateX(30px);
  }
  70% {
    -webkit-transform: skewX(10deg) translateX(-10px);
            transform: skewX(10deg) translateX(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: skewX(0deg) translateX(0);
            transform: skewX(0deg) translateX(0);
  }
}
@keyframes menu-3 {
  0% {
    opacity: 0;
    -webkit-transform: skewX(-20deg) translateX(30px);
            transform: skewX(-20deg) translateX(30px);
  }
  70% {
    -webkit-transform: skewX(10deg) translateX(-10px);
            transform: skewX(10deg) translateX(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: skewX(0deg) translateX(0);
            transform: skewX(0deg) translateX(0);
  }
}
li:hover > ul.drop-menu.menu-4 {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
li:hover > ul.drop-menu.menu-4 li {
  opacity: 0;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(1) {
  -webkit-animation-name: menu-4;
          animation-name: menu-4;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 0;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(2) {
  -webkit-animation-name: menu-4;
          animation-name: menu-4;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 1;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(3) {
  -webkit-animation-name: menu-4;
          animation-name: menu-4;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 2;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(4) {
  -webkit-animation-name: menu-4;
          animation-name: menu-4;
  -webkit-animation-duration: 300ms;
          animation-duration: 300ms;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  z-index: 3;
}
@-webkit-keyframes menu-4 {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  60% {
    -webkit-transform: rotateX(45deg);
            transform: rotateX(45deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
@keyframes menu-4 {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  60% {
    -webkit-transform: rotateX(45deg);
            transform: rotateX(45deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

Ada beberapa yang ingin saya terangkan disini :last-child = Memilih setiap element yang terakhir dari induk :nth-child(n) = Memilih setiap element yang ke-n dari induk animation-fill-mode: forwards = Animasi berhenti di posisi akhir (defaultnya kembali ke posisi awal)

wow......banyak amat ya CSSnya santai gan,... sepadan kok ama hasilnya ;) disini hanya sebagian contoh, silahkan kalian kembangkan lagi sesuai dengan imajinasi dan selera masing-masing

source code bisa kalian lihat di link di bawah (disana saya pke SASS, jd kalian harus klik menu compile CSS )

sekian dulu tuk kali ini, kita lanjut dilain waktu dengan topik yang lebih menarik. Jika ada yang ditanyakan silahkan tulis komentar, jangan lupa klik coto jika kalian merasa tutorial ini bermanfaat

last but not lease,... Thanks, Relax and Keep Coding!

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

10 Jawaban:

Terima kasih sudah berbag

avatar jamilr
@jamilr

8 Kontribusi 7 Poin

Dipost 7 tahun yang lalu

@jamilr sama2 gan mari berbagi bersama

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

Terima Kasih atas infonya ya, infonya sangat membantu

avatar DikyKurniawan13
@DikyKurniawan13

4 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

@DikyKurniawan13 sama2 gan mari belajar bersama dan saling berbagi

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

Semoga Apa yang di bagi bukan sekedar menjadi ilmu tapi juga menjadi amal bagi agan . amin

avatar Fariz21
@Fariz21

11 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

nice gan

avatar asyhad
@asyhad

2 Kontribusi 1 Poin

Dipost 7 tahun yang lalu

@Fariz21 berbagi tuk menambah ilmu gan :)

@asyhad mari belajar bersama gan

avatar maddock
@maddock

119 Kontribusi 115 Poin

Dipost 7 tahun yang lalu

keren gan

avatar ahanafi
@ahanafi

815 Kontribusi 552 Poin

Dipost 7 tahun yang lalu

bagus gan ,

avatar DanangPras
@DanangPras

3 Kontribusi 0 Poin

Dipost 7 tahun yang lalu

terimakasih dan sekalian bertanya .. mas ini dropdownnya agar bisa diatas thubnail bagaimana apa yg perlu dirubah css nya?

avatar Irfanmuhluster
@Irfanmuhluster

69 Kontribusi 8 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban