Memberikan Animasi JQuery pada Dropdown Bootstrap 3

Diantara teman – teman semua pasti ada yang pernah memikirkan hal seperti yang tertera di judul artikel ini. Yaitu cara memberikan animasi jquery pada dropdown bootstrap 3. Secara default, bootstrap 3 memiliki dropdown yang sagat bagus untuk digunakan seperti pada website secara umum. Namun para pengguna yang memiliki keingintahuan lebih biasanya mereka akan bertanya – tanya tentang kustomisasi tampilan atau efek animasi yang bias diberikan pada dropdown bootstrap 3 tersebut. Pada artikel kali ini saya akan membagikan sebuah trik bootstrap dimana kali ini kita akan membahas tentang cara memberikan animasi jquery pada dropdown bootstrap 3. Cara membuatnya cukup mudah, sekarang kita akan membuat struktur html basic seperti berikut

<!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>Dropdown Bootstrap Animasi</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  </head>
  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

 

Selanjutnya kita akan membuat struktur navbar yang kita perlukan seperti berikut

 

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">APPAREL <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Bottoms</a></li>
            <li><a href="#">Formal Wear</a></li>
            <li><a href="#">Golfers</a></li>            
            <li><a href="#">Jackets</a></li>            
            <li><a href="#">Knitwear</a></li>
            <li><a href="#">Shirts</a></li>
            <li><a href="#">Sweaters</a></li>
            <li><a href="#">Tracksuits</a></li>
            <li><a href="#">T-Shirts</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">BRANDS <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Altitude</a></li>
            <li><a href="#">Birdi</a></li>
            <li><a href="#">Chefworks</a></li>            
            <li><a href="#">Drimac</a></li>            
            <li><a href="#">Flexfit</a></li>
            <li><a href="#">Lexor</a></li>
            <li><a href="#">SA Rugby</a></li>
            <li><a href="#">Underarmour</a></li>
          </ul>
        </li>
      </ul>
      
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">CATEGORY <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Activewear</a></li>
            <li><a href="#">Hospitality</a></li>
            <li><a href="#">Locally Produced</a></li>
            <li><a href="#">Outdoor</a></li>
            <li><a href="#">Supporters</a></li>
            <li><a href="#">Team Wear</a></li>
            <li><a href="#">Workplace</a></li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav">
        <li><a href="#">CLEARANCE</a></li>
        <li><a href="#">SPECIALS</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

 

Sekarang kita akan memberikan baris kode javascript untuk memanggil fungsi jquery agar dropdown bootstrap yang kita buat memiliki animasi slide. Berikut adalah baris kode yang kita perlukan.

$(function(){
$('.dropdown').on('show.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  $('.dropdown').on('hide.bs.dropdown', function(e){
    e.preventDefault();
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
        $('.dropdown').removeClass('open');
          $('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
    });
    
  });
});

Dengan kode jquery diatas sudah bias kalian terapkan pada website kalian terapkan pada website kalian
Demikian artikel kali ini yang membahas tentang cara memberikan animasi jquery pada dropdown bootstrap.

2 Januari 2018

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat