TAHUKAH KAMU BEDANYA MENU NAVIGASI BLOG STICKY DENGAN FIXED DAN DIBUAT MURNI DENGAN CSS?

Mengurangi penggunaan javascript adalah keputusan bijaksana di dalam kegiatan di dunia web yang menggunakan template web sebagai komponen medianya.

Dan hanya dengan menggunakan CSS kita dapat membuat efek efek yang sangat hidup untuk halaman web atau blog kita.

Terimakasih kepada CSS terutama pada pengaturan dan sintaks elemen:

.position:fixed

Perbedaan fixed dengan sticky adalah: Fixed navigasi menu atau elemen tetap berada di suatu posisi, atau dalam contoh tetap berada di atas header pada saat elemen body di scroll naik dan turun.

Sedangkan sticky adalah: Sticky navigasi menu atau sticky elemen yang mana menu baru berhenti pada posisi yang telah di tentukan pada saat pengguliaran menu ke atas selesai.

1. FIXED MENU

Fixed menu berarti navbar atau menu tetap berada diatas pada saat elemen halaman di scroll naik dan turun.

Kita melihat contoh bagaimana membentuk elemen fixed dengan pengaturan CSS berikut:

.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* untuk menentukan posisi fixed navbar */
top: 0; /* untuk menentukan posisi navbar di atas halaman */
width: 100%; /* untuk lebar navbar penuh */
}

Untuk membentuk elemennya maka class atau ID HTML-nya harus sesuai dengan pengaturan CSS di atas, contoh:

<div class="navbar">
<a href="#beranda">Beranda</a>
<a href="#berita">Berita</a>
<a href="#email">Email</a>
</div>

Lihat hasilnya:

See the Pen Fixed navbar menu by sufyan (@sufyan33) on CodePen.

2. STICKY MENU

Sticky navbar atau sticky menu adalah navbar yang memiliki kesan lengket, contohnya ia bisa ikut di scroll dalam batas tertentu dan berhenti pada batas naik yang telah di tentukan melalui pengaturan CSS. Dalam hal ini kita dapat menggunakan elemen CSS -  sekali lagi terimakasih kepada:

position:-webkit-sticky;

Saya menyukai tampilan dinamis dan manis dari efek 'lengket' halaman jadi terlihat lebih alami. Sementara contoh penulisan (atau pengaturan) CSS-nya adalah sebagai berikut:

.Menu{position:sticky;position:-webkit-sticky;height: 30px;

Atau seperti biasa jika kita menggunakannya di dalam sebuah struktur template HTML CSS ini di tempatkan di atas kode </head>:

<style>
.Menu{position:sticky;position:-webkit-sticky;height: 30px;top:0;z-index:2;background:blue;border-bottom: solid;border-color:#fff;margin-left:-13px;margin-top:25px;margin-bottom:0px;}
.Menu font {size: 16px}
.Menu .inner{color:#fff;max-width:auto;margin:auto}
.Menu a{color:#fff;white-space:nowrap;display:block;padding:4px 0;border-bottom.solid;}
.Menu ul,.Menu li{list-style:none;list-style-type:none;padding:0;margin:0}
.Menu ul{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;overflow-x:auto}
.Menu ul li{padding:0 12px;cursor:pointer;position:relative;white-space:nowrap}
.Menu ul li:hover{background-color:#f0f0f0; border:dotted;border-color:#990000;border-radius:8px;transition: all 0.8s;
}</style>

Menurut saya itu sangat sederhana. Saya langsung memberikan contoh:

See the Pen sticky fixed menu by sufyan (@sufyan33) on CodePen.

Perhatikan sisa 'blank space' yang saya sisakan di atas navbar ia segera tertutup ketika seluruh elemen halaman telah selesai di scroll ke atas.

KESIMPULAN:

Kedua elemen membuat halaman blog menjadi lebih interaktif, namun tetap tergantung selera masing masing orang. Menu fixed di pergunakan pada template viomagz buatan mas Sugeng. Sticky menu biasanya di pergunakan pada template template buatan mbak Igniel. 

Di dalam pengaturan CSS kita dapat mengenali kedua positioning CSS sebagai berikut:

1. Sticky menggunakan positioning : relative
2. Fixed menggunakan positioning : absolute;

Tidak terbatas blogger blogspot, template template seperti Wordpress, Wix, Igniester dsb sering ditemukan menggunakan dua teknik di atas. Jika ingin lebih jelas perihal teknik Fixed dan Sticky Menu lebih lanjut silahkan ajukan pertanyaan melalui kolom komentar di bawah. Kita akan berdiskusi bersama.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: