[Web] Membuat Sticky Navigation dan Sticky Widget
By
Rachmat Santoso
—
Minggu, 30 April 2017
—
Tutorial
 |
| 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>
.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:
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'>▼</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' -->
<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'>▼</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>
//<![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>
.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>
<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>
//<![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