Membuat Feature Discovery dengan MaterializeCSS

17/04/2017    Maykhel David    1656     Website

Penggunaan tombol unik pada website sudah menjadi hal umum, seiring berkembangnya desain website, semakin beragam pula inovasi tampilan yang tidak biasa namun tetap mengutamakan para pengunjung website tanpa mengurangi esensi desain yang segar.

Penggunaan efek yang ada pada tombol juga semakin bervariasi, dimulai dari dropdown, accordion dan banyak yang lainnya. Kali ini kita akan membahas tentang bagaimana cara membuat tombol discovery menggunakan framework responsive materialize css.

Apa itu feature discovery?

Feature dscovery adalah konsep baru dari material design, dimana tombol discovery biasa diletakkan seperti pada floating button. Fungsi yang dihasilkan pada button feature discovery sendiri adalah memberikan informasi atau deskripsi singkat pada sebuah interface..

Pada penggunaan nya, tombol feature discovery ini memang bertujuan memberikan informasi, misalnya feature discovery ini akan muncul untuk memberitahukan detail tentang fungsi suatu tombol yang baru ditambahkan pada sebuah aplikasi.

Penggunaannya sangat mudahkita cukup membuat sebuah tombol dengan id tertentu, misalnya seperti navbar yang saya buat ini dengan masing-masing id yang berbeda

<div class="navbar-fixed">
    <nav class="blue">
    <div class="nav-wrapper">
      <ul class="left">
      <li><a href="#menu" id="menu"><i class="material-icons">menu</i></a></li>
      </ul>
      <ul class="right">
      <li><a href="#search" id="search"><i class="material-icons">search</i></a></li>
      <li><a href="#dashboard" id="dashboard"><i class="material-icons">dashboard</i></a></li>
      <li><a href="#refresh" id="refresh"><i class="material-icons">refresh</i></a></li>
      <li><a href="#more" id="more"><i class="material-icons">more_vert</i></a></li>
      </ul>
    </div>
    </nav>
  </div>

 

Selanjutnya kita buat deskripsi discoverynya yang mengarah ke id #search

  <div class="tap-target" data-activates="search">
    <div class="tap-target-content white-text">
      <h5>Lihat Disini</h5>
      <p>contoh penggunaan iscovery feature</p>
    </div>
  </div>

Lalu kita buat javascript seperti ini untuk mengaktifkannya

$(window).on('load', function() {

        $('.tap-target').tapTarget('open');

    });

 

Untuk lebih jelasnya kalian bisa copy script dibawah ini

<!DOCTYPE html>
<html>

<head>
  <title>Discovery Button</title>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
<div class="navbar-fixed">
    <nav class="blue">
    <div class="nav-wrapper">
      <ul class="left">
      <li><a href="#menu" id="menu"><i class="material-icons">menu</i></a></li>
      </ul>
      <ul class="right">
      <li><a href="#search" id="search"><i class="material-icons">search</i></a></li>
      <li><a href="#dashboard" id="dashboard"><i class="material-icons">dashboard</i></a></li>
      <li><a href="#refresh" id="refresh"><i class="material-icons">refresh</i></a></li>
      <li><a href="#more" id="more"><i class="material-icons">more_vert</i></a></li>
      </ul>
    </div>
    </nav>
  </div>

 

  <div class="tap-target" data-activates="search">
    <div class="tap-target-content white-text">
      <h5>Lihat Disini</h5>
      <p>contoh penggunaan iscovery feature</p>
    </div>
  </div>
  <!-- Compiled and minified JavaScript -->

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
  <script>
    $(window).on('load', function() {
        $('.tap-target').tapTarget('open');
    });
  </script>
</body>

</html>

 

Lalu simpan dengan nama discovery.html dan buka file tersebut di browser.

Baiklah teman-teman demikian pembahasan artikel tentang cara membuat feature discovery menggunakan materialize css. Semoga bermanfaat

Web Design

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More