Membuat efek saat menampilkan list dengan materialize

Mungkin kita sering menggunakan list di sebuah website, malah list sendiri menjadi hal yang wajib di halaman sebuah website, apa lagi website tersebut membahas atau mengenai sebuah kategori yang sangat banyak, biasanya ketika kita membuat sebuah list, tag ul, li, ol sering kita gunakan bukan, emang lebih cocok menggunakan tag itu ketika kita membuat sebuah list, walaupun judulnya membuat efek saat menampilkan list dengan materialize, kita masih tetap menggunakan sebuah tag ul li, hanya efek saat di tampilkannya saja yang berbeda. oke efek seperti apa yang di maksud, simak terus ya teman-teman.

Membuat efek saat menampilkan list dengan materialize, dari judulnya teman-teman sudah tau ya, saya mengambil refrensi artikel ini dari mana, ya betul dari materialize, teman-teman bisa lihat ada di pilihan javascript dan transitions, disitu ada, transition berarti efek transisi ketika tampil ya, cukup simple ketika kita ingin menggunakan efek ini, kita tinggal memberika sebuah class atau id bawaan materialize, seperti bootstrap ya, nantinya class dan ID itu menimbulkan efek dari sebuah class yang kita berikan tadi. ID yang kita pakai disini adalah #staggered-test, jadi kasusnya seperti ini: kita membuat event onclick di sebuah tombol button lalu di button itu kita selipkan ID dimana id itu menyambung dengan sebuah list, yaitu UL nya, jadi ketika button kita klik langsung menyambung ke UL nya, dan si sebuah linya saya berikan sedikit style seperti nama efek di materialize yaitu, transition, kita berikan style=”transform: translateX(0px); opacity: 1″. kurang lebih seperti ini ya, oke langsung saja supaya jelas ya teman-teman bisa lihat contoh kodenya di bawah ini:

  <!DOCTYPE html>
  <html>
    <head>
    	<title>Membuat Efek saat Menampilkan List dengan Materialize</title>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <-e-style type="text/css">
        h4{
          color: #039BE5;
        }
        p{
          color: #333;
          border-bottom: 2px solid red; 
          width: 300px;
          padding-bottom: 10px;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="row">
          <div class="col s12">
            <h1>Membuat Efek saat Menampilkan List dengan Materialize</h1>
          </div> 
          
        <a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>
        <ul id="staggered-test">
          <li style="transform: translateX(0px); opacity: 1"><h4>List Ke satu</h4><p>ini deskripsi ke satu</p></li>
          <li style="transform: translateX(0px); opacity: 1"><h4>List Ke dua</h4><p>ini deskripsi ke dua </p></li>
          <li style="transform: translateX(0px); opacity: 1"><h4>List Ke tiga</h4><p>ini deskripsi ke tiga </p></li>
          <li style="transform: translateX(0px); opacity: 1"><h4>List Ke Empat</h4><p>ini deskripsi ke Empat</p></li>
          <li style="transform: translateX(0px); opacity: 1"><h4>List Ke Lima</h4><p>ini deskripsi ke Lima</p></li>
        </ul>
        </div> 
      </div>
      <!--Import jQuery before materialize.js-->
       <-e-script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
       <-e-script type="text/javascript" src="js/materialize.min.js"></script>
  <span style="color: #ff0000">     <-e-script type="text/javascript">
        var tampilUl = $("ul").hide();
         $(".btn").click(function(){
            tampilUl.toggle("slow");
        })
       </script></span>
    </body>
  </html>

Bisa teman-teman hayati terlebih dahulu ya, dan bisa lihat ada kode JS yang saya warnai merah, itu saya buat toogle supaya bisa menyembunyikan dan menampikan efek list tersebut saat di klik.

Bisa di lihat ya, belum tampil apa-apa ketika saya belum mengklik, oke sekarang ketika saya klik:

Sudah tampil ya, list-list yang sebelumnya kita sembunyikan, aslinya list itu ketika tampil menampilkan efek gelombang ketika tampil, tapi karena gambar jadi tidak terlihat, oke saya rasa cukup sampai disini belajar kita Membuat efek saat menampilkan list dengan materialize, semoga bermanfaat dan sampai jumpa pada artikel selanjutnnya terimakasih.

Membuat Efek saat Menampilkan List dengan Materialize

Kategori