[Web] Membuat Sticky Navigation dan Sticky Widget - nblognlife

[Web] Membuat Sticky Navigation dan Sticky Widget

Membuat Sticky Navigation dan Sticky Widget

     Seperti kita tahu menu navigasi adalah bagian penting dari suatu website, karena bagian inilah yang membantu kita berpindah ke halaman sesuai dengan kebutuhan informasi yang sedang kita cari. Menu navigasi standar mengharuskan pengguna menggulirkan kembali ke bagian atas halaman web untuk menemukan menu.

Lalu apa itu sticky navigation?
     Sticky navigation adalah menu navigasi yang posisinya terkunci pada tempat tertentu sehingga tidak hilang ketika kita menggulir/melakukan scroll ke bawah halaman. Hal ini membuat menu navigasi sticky dapat diakses tanpa perlu terlebih dulu menggulir kembali ke bagian atas halaman seperti pada menu navigasi standar. Pada umumnya sticky navigation diletakkan pada bagian atas atau kiri, namun tentu saja dapat diletakkan dimana saja sesuai dengan kebutuhan.

     Begitulah penjelasan tentang sticky navigation. Agar menghemat waktu, langsung saja ke pembahasan utama. Pada postingan kali ini saya akan membahas cara membuat sticky navigation dan sebagai tambahan saya juga akan membahas cara membuat sticky widget. Contoh yang akan saya bahas menggunakan sticky navigation dan sticky widget yang saya terapkan pada blog ini (nblognllife.com).


Letakkan kode berikut setelah tag <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

MEMBUAT STICKY NAVIGATION
Langkah pertama untuk membuat sticky navigation, buat kode css seperti di bawah ini:
<style type="text/css">
.fixed {
   position: fixed;
   top: 0;
   z-index: 110;
}
</style>
*z-index di sini digunakan agar navigasi berada di tumpukan paling atas

Langkah kedua, tambahkan tag <div> pada menu navigasi yang akan digunakan untuk fungsi offset(). Lihat kode html di bawah ini:
<div class='navi'>
  <nav>
    <ul id='navigation'>
      <li class='namablog'>NBLOGNLIFE</li>
      <li><a class='home' href='/'>HOME</a></li>

      <li><a href='#'>C++ <span style='font-size:10px'>&#9660;</span></a>
      <div class='sub-nav-wrapper'>
      <ul class='sub-nav'>
        <li><a href='http://nblognlife.com/search/label/Cplusplus'>Pemrograman C++</a></li>
        <li><a href='http://nblognlife.com/search/label/Struktur%20Data'>Struktur Data</a></li>
      </ul>
      </div>
      </li>

...

    </ul> <!-- akhir ul id='navigation' -->
  </nav> <!-- akhir nav -->
</div> <!-- akhir div class='navi' -->
Keterangan:
Kode berwarna merah adalah kode yang saya tambahkan pada menu navigasi utama blog ini. Kode berwarna merah tersebut nantinya diperlukan untuk membuat sticky navigation. Nama class dari tag div silahkan disesuaikan dengan keinginan.

Lanjut langkah ketiga, atau yang terakhir adalah membuat kode javascript seperti di bawah ini:
<script type = 'text/javascript'>
//<![CDATA[
if (window.matchMedia('(min-width: 1068px)').matches) {
  var navpos = $('.navi').offset();
  $(window).bind('scroll', function () {
  if ($(window).scrollTop() > navpos.top) {
    $('.navi').addClass('fixed');
    $('.namablog').show();
    $('#wrapper').css({
      'margin-top': '42px'
    });
  } else {
    $('.navi').removeClass('fixed');
    $('.namablog').hide();
    $('#wrapper').css({
      'margin-top': '0px'
    });
  }
  });
}
//]]>
</script>

Penjelasan:
     if (window.matchMedia('(min-width: 1068px)').matches){}, kode ini sama dengan media query pada css. Jadi kode javascript di dalam pernyataan if hanya akan dijalankan ketika resolusi layar minimal yang digunakan adalah 1068px. Sehingga sticky navigation pada blog saya hanya berlaku ketika user menggunakan perangkat dengan resolusi layar minimal 1068px, di bawah itu saya menggunakan menu navigasi standar.

var navpos = $('.navi').offset();
if ($(window).scrollTop() > navpos.top) {
            $('.navi').addClass('fixed');
            ...
}else {
            $('.navi').removeClass('fixed');
            ...
}
     Jika jendela tampilan telah melewati bagian atas dari div ‘navi’, maka elemen div ber-class 'navi' akan ditambahkan class fixed, sehingga jika dilihat menggunakan inspect pada chrome yang awalnya <div class=’navi’> menjadi <div class=’navi fixed’> dengan penambahan class fixed otomatis juga menambahkan css class fixed pada div 'navi'. Jika kondisi tidak sama dengan if, maka class fixed akan di hapus dari div 'navi' sehingga kembali menjadi <div class=’navi’> .

*Tambahan :
Kode dengan warna biru adalah tambahan saja (bisa diabaikan). Kode tersebut saya sesuaikan dengan template blog yang saya pakai sehingga bukan merupakan kode inti. Saya jelaskan sedikit, jadi text “NBLOGNLIFE” pada cssnya saya set display:none dan ketika di scroll saya munculkan dengan javascript show().


MEMBUAT STICKY NAVIGATION – (RECENT POSTS)
Langkah pertama untuk membuat sticky widget, buat kode css seperti di bawah ini:
<style type="text/css">
.recent-fixed {
   position: fixed;
   top: 42px;
   z-index: 90;
}
</style>

Langkah kedua, menambahkan tag <div> yang akan digunakan untuk fungsi offset(). Lihat kode html di bawah ini:
<!-- SIDEBAR WRAPPER -->
<aside id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'>
      <b:widget id='HTML3' locked='false' title='' type='HTML'>

....

         <div class="rece">
            <ul id="recent-posts">
               <li class="rent">...</li>
               <li class="rent">...</li>
               <li class="rent">...</li>
               <li class="rent">...</li>
               <li class="rent">...</li>
            </ul>
         </div>

....

      </b:widget>
   </b:section>
   <div class='bim-fixed'/>
</aside>

Penjelasan:
     Tag <div class='bim-fixed'/> saya letakkan tepat setelah akhir dari section sidebar </b:section>. Jadi nantinya widget recent-posts, yaitu div ber-class 'rece' akan ditambahkan class 'recent-fixed' ketika jendela tampilan telah melewati bagian atas dari div “bim-fixed” ATAU artinya setelah melewati semua widget yang ada pada sidebar.

Lanjut langkah ketiga, atau yang terakhir adalah membuat kode javascript seperti di bawah ini:
<script type = 'text/javascript'>
//<![CDATA[
if (window.matchMedia('(min-width: 1068px)').matches) {
  var navpos2 = $('.bim-fixed').offset();
  $(window).bind('scroll', function () {
  if ($(window).scrollTop() > navpos2.top) {
    $('.rece').addClass('recent-fixed');
    $('.rece').css({
      'margin-top': '10px'
    });
  } else {
    $('.rece').removeClass('recent-fixed');
    $('.rece').css({
      'margin-top': '0'
    });
  }
  });
}
//]]>
</script>

 Penjelasan pada bagian ini lebih kurang sama dengan penjelasan sebelumnya.

*Tambahan
Kode dengan warna biru adalah tambahan saja (bisa diabaikan). Kode tersebut saya sesuaikan dengan template blog yang saya pakai sehingga bukan merupakan kode inti.

Hasil dapat dilihat pada tampilan blog ini. Jika masih kurang jelas silahkan bertanya melalui kolom komentar.

[RS]

Klik Like & Share jika postingan ini bermanfaat
Apa tanggapan Anda?

Berikan tanggapan Anda melalui kolom komentar yang telah disediakan.
- Gunakan bahasa yang sopan;
- Saat menjadikan postingan pada blog ini sebagai referensi, jangan lupa mencantumkan sumbernya (link dari blog ini).

Jika blog ini bermanfaat jangan lupa memberikan 'like' atau 'share' untuk mendapatkan update terbaru.

Terima kasih

0 Response to "[Web] Membuat Sticky Navigation dan Sticky Widget"