Membuat Transisi Dropdown pada Bootstrap

Website responsive adalah website yang tampilanya menyesuaikan dari media apa yang digunakan oleh penggunanya. Sehingga terlihat mempunyai bentuk yang berbeda pada setiap medianya. Tampilan dibrowser komputer kalian belum tentu sama dengan tampilan pada handphone. Ini adalah salah satu keunggulan website responsive. Kalian bisa membuatnya dengan mengatur CSS sedemikian agar tampilanya bisa maksimal disemua media.

Jika tidak ingin direpotkan dengan CSS yang rumit, kalian bisa menggunakan framework CSS yang sudah banyak di luar sana. Salah satu framework yang populer dikalangan adalah Bootstrap. Bootstrap adalah framework bentukan dari twitter yang bisa dipakai untuk umum. Dengan mempunyai bekal CSS kalian bisa mengutak-atik framework bootstrap. Bootstrap sendiri sebenarnya sudah menyediakan segala kebutuhan penunjang tampilan website.

Tetapi kalian juga bisa memodifikasi fitur yang ada dibootstrap jika kalian merasa ada yang kurang. Salah satu fitur yang akan kita modifikasi adalah menu dropdown. Kali ini kita akan mencoba membuat transisi dropdown pada bootstrap. Langkah awal kalian bisa ikuti contoh code dibawah ini.

transisi.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Transisi Bootstrap</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <style>
      .dropdown {
          margin-top: 50px;
          margin-left: 100px;
      }
      .dropdown .dropdown-menu{
          display: block;
          opacity: 0;

          -moz-transition:    all 1000ms ease;
          -webkit-transition: all 1000ms ease;
          -o-transition:      all 1000ms ease;
          -ms-transition:     all 1000ms ease;
          transition:         all 1000ms ease;
      }
      .dropdown:hover .dropdown-menu {
          display: block;
          opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

Kalian simpan dan bisa lihat hasilnya pada browser kalian. Jika berhasil maka akan seperti ini.

Terdapat efek transisi memudar saat kalian mencoba mengarahkan mouse pada menu. Hal tersebut tidak ada pada file default css. Kalian modifikasi dengan script seperti ini.

<style>
      .dropdown {
          margin-top: 50px;
          margin-left: 100px;
      }
      .dropdown .dropdown-menu{
          display: block;
          opacity: 0;

          -moz-transition:    all 1000ms ease;
          -webkit-transition: all 1000ms ease;
          -o-transition:      all 1000ms ease;
          -ms-transition:     all 1000ms ease;
          transition:         all 1000ms ease;
      }
      .dropdown:hover .dropdown-menu {
          display: block;
          opacity: 1;
      }
    </style>

Mudah bukan ?

Sekian pembahasan mengenai membuat transisi dropdown pada bootstrap. Semoga bermanfaat.