Langsung ke konten utama

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

css positioning for sticky and fixed elemen
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:

Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa