Cara Membuat Animasi Smooth Dropdown Bootstrap 4

Cara Membuat Animasi Smooth Dropdown Bootstrap 4 - Dengan adanya bootstrap tentu kita bisa dengan mudah dalam membuat elemen dan layout yang responsive, berbagai macam elemen cukup lengkap tersedia didalamnya. Contoh: Accordion, Card, Dropdown, Navbar dan masih banyak lagi, semua elemen itu bisa kita gunakan ketika kita membuat halaman website dengan bootstrap. Kita juga dapat melakukan styling sendiri atau custome terhadap elemen bootstrap, seperti contoh berikut yang akan saya bagikan kepada kalian yaitu Cara Membuat Animasi Smooth Dropdown Bootstrap 4. Jika kalian ingin mencoba membuatnya bisa ikuti langkah - langkahnya berikut ini.

Silahkan kalian persiapkan file bootstrapnya, lalu kalian bisa membuat elemen navbar dropdown seperti berikut.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Smooth Dropdown</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link" href="#">Home</a>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Program Kursus
            </a>
            <div class="dropdown-menu animate-menu slideIn-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Web Design</a>
                <a class="dropdown-item" href="#">Web Programing</a>
                <a class="dropdown-item" href="#">Mobile Apps</a>
                <a class="dropdown-item" href="#">Design Graphic</a>
                <a class="dropdown-item" href="#">Motion Graphic</a>
                <a class="dropdown-item" href="#">Digital Marketing</a>
            </div>
              </li>
              <a class="nav-item nav-link" href="#">Blog</a>
              <a class="nav-item nav-link" href="#">Contact Us</a>
        </div>
      </div>
</nav>

Untuk membuat animasi dropdown terlihat smooth, maka perlu ditambahkan style CSS animation seperti berikut.

<style>
    @media (min-width: 992px) {
      .animate-menu {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
      }
    }
    @keyframes slideIn-menu {
      0% {
        transform: translateY(1rem);
        opacity: 0;
      }
      100% {
        transform:translateY(0rem);
        opacity: 1;
      }
      0% {
        transform: translateY(1rem);
        opacity: 0;
      }
    }
    @-webkit-keyframes slideIn-menu {
      0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
      }
      100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
      }
      0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
      }
    }
    .slideIn-menu {
      -webkit-animation-name: slideIn-menu;
      animation-name: slideIn-menu;
    }
</style>

Jika sudah kalian tambahkan style CSS seperti diatas, langkah selanjutnya silahkan kalian simpan filenya kembali kemudian kalian bisa melihat hasil akhirnya di browser masing - masing. Jika kalian klik pada menu dropdownnya maka akan terjadi slide dropdown yang smooth.

Tentu kalian juga bisa melakukan berbagai macam animasi lain pada dropdown. Nah, semoga dengan tutorial sederhana diatas bisa menambah referensi kalian dalam membuat dropdown. Semoga bermanfaat dan selamat mencoba

5 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat