Membuat Icon Mengambang di Samping

By Haqqi in Information Technology 17 Comments

Repost dari artikel saya di PC Mild 20/2010

Kombinasi antara javascript dengan CSS mampu menghasilkan tampilan website yang semakin menarik. Salah satunya adalah membuat tombol atau icon yang mengambang di bagian samping website, seperti pada http://mashable.com dan http://erikvandeven.com.

Tampilan floating button pada mashable.com

Kunci utama dari pembuatan tersebut terletak pada property CSS yang digunakan beserta struktur dokumen html-nya. Agar tombol (button) yang semula terletak tetap dapat ikut bergeser ke bawah seiring berjalannya scroll vertical pada browser, maka harus ditambahkan sedikit pemrograman javascript di dalamnya. Untuk lebih mudahnya, pada tutorial ini akan menggunakan library javascript yang sudah cukup terkenal dan banyak digunakan, yaitu jQuery. Untuk mendapatkan library ini, dapat didownload pada website resminya http://jquery.com.

  1. Langkah paling awal adalah membuat struktur layout html untuk halaman dengan button mengambang tersebut. Berikut ini adalah contoh layout html sederhana dengan header, content, dan footer. Lokasi div dari button umumnya diletakkan pada content, agar koordinat vertical awalnya sejajar dengan content.

    Posisi button adalah relatif, sehingga tidak akan berubah berapapun resolusi monitor yang digunakan. Perlu diketahui juga bahwa float-button-wrapper tidak boleh dihilangkan. Bagian ini akan mencegah menu agar tidak berpindah ke posisi absolut sebelah kiri website. Jika ingin mengetahui perbedaannya, Anda bisa mencoba menghilangkannya setelah seluruh aplikasi jadi.

    Setelah itu, barulah di dalam float-button-wrapper akan diisi dengan float-button-page yang menyimpan seluruh icon yang ada.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" charset="utf-8" href="style.css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/float.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">Ini adalah header berukuran 700px x 300px</div>
      <div id="content">
        <div id="float-button-wrapper">
          <div id="float-button-page">
            <a href="http://www.facebook.com"><img src="images/fb.png" alt="Facebook" /></a>
            <a href="http://www.twitter.com"><img src="images/twitter.png" alt="Twitter" /></a>
          </div>
        </div>
        Ini adalah content berukuran 700px x 2000px
      </div>
      <div id="footer">Ini adalah footer</div>
    </div>
  </body>
</html>
  2. Langkah berikutnya adalah mendefinisikan style yang digunakan. Untuk lebih mudahnya, style diletakkan pada file terpisah. Pada style ini, terdapat class fixed yang menjadi kunci utama untuk membuat button yang semula absolut menjadi ikut bergerak ke bawah. Berikut ini adalah contoh style sederhana yang digunakan.

    Perhatikan dan pahami bagian float-button-wrapper dan float-button-page secara mendalam. Perhatikan juga bahwa bagian yang diberi class fixed adalah float-button-page dan bukan float-button-wrapper.

    body { margin: 0;
       padding: 0; }

#wrapper { width: 700px;
           margin: auto;
           border-left: dashed 1px #888888;
           border-right: dashed 1px #888888;
           background: #cccccc; }

#header { width: 100%;
          height: 300px;
          background: #999999; }

#content { width: 100%;
           height: 2000px;
           background: #555555;
           position: relative; }

#float-button-wrapper { position: absolute;
                        left: -120px; }

#float-button-page img{ background: none;
                        border: none;
                        padding: 0;
                        margin: 0; }

#float-button-page a { float: left;
                       clear: left;
                       margin-bottom: 10px; }

#float-button-page { position: absolute;
                     background: #ccffcc; }

#float-button-page.fixed { position: fixed;
                           top: 20px; }
  3. Langkah terakhir adalah menambahkan javacript dengan jQuery. Sebelum melakukan scrolling, perlu dilakukan pengecekan apakah browser yang digunakan adalah IE6. Jika memang menggunakan IE6, maka scrolling dibatalkan. Sebab IE6 tidak mengenal property fixed untuk sebuah elemen.

    Jika bukan IE6, maka dilakukan pengambilan lokasi button bagian atas yang kemudian disimpan dalam variable “top”. Kemudian jQuery akan mem-bind event scroll yang terjadi. Jika posisi vertical scroll lebih besar dari variable top tadi, maka akan ditambahkan class fixed yang membuat button dapat mengambang mengikuti scroll. Jika tidak, maka hilangkan class fixed tersebut.

    jQuery(document).ready(function() {
  var msie6 = $.browser == 'msie' && jQuery.browser.version < 7;
  if (!msie6) {
    var top = $('#float-button-page').offset().top -
      parseFloat($('#float-button-page').css('margin-top')
      .replace(/auto/, 0));

    $(window).scroll(function (event) {

      // di mana posisi Y
      var y = $(this).scrollTop();
      // apakah di bawah floating button
      if (y >= top-20) {
        // jika ya, tambahkan class fixed
        $('#float-button-page').addClass('fixed');
      } else {
        // jika tidak, hilangkan
        $('#float-button-page').removeClass('fixed');
      }
    });
  }
});
  4. Setelah seluruh langkah telah dilakukan, maka selesailah proses pembuatan floating button pada website. Anda bisa mencobanya langsung pada website Anda sendiri. Selamat mencoba.

Hasil floating button buatan sendiri

Download source code keseluruhan.Artikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 20 tahun 2010 lalu.

Related Articles.

17 Comments

  1. Pingback: Tweets that mention Membuat Icon Mengambang di Samping | HQ's Serenity -- Topsy.com

  7. keren tuh j query nya

    tapi klo bisa pakek java script soalnya disuruh sama dosen harus pakek java script

    (mbuat tugas hehe :P)

    Reply

    • lah, jQuery kan javascript. pernyataan yang aneh tuh.. bilang aja ini pakai library javascript pak, daripada bikin dari nol.. pasti pak dosen lebih terkesima.. haha..

      Reply

Leave a Comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.