Cara Membuat Menu Header Atau Navigasi Melayang Ketika Di Scroll

Cara Membuat Menu Header Atau Navigasi Melayang Ketika Di Scroll

www.azid45.web.id - Cara Membuat Menu Header atau Navigasi Melayang Ketika Di Scroll. Assalamualakum.wr.wb, alhamdulillah kali ini akhirnya saya berhasil mencari cara yang efektif dan bagus agar menu header atau navigasi kiita bisa melayang ketika di scroll. Memang didunia blogger sekarang, tak asing lagi menu header maupun navigasi melayang atau fixed ketika di scroll dan dengan hal tersebut maka blog kita akan menjadi keren.

Sebenarnya banyak tutorial yang menyajikan cara tersebut, akan tetapi bagi saya cara-cara yang banyak itu tidak sesuai dengan keinginan saya dan akhirnya saya mendapatkan cara yang bagus tampa mengubah css dan tampilan navigasi yang kebanyakan tutorial menyarankan navigasi dari hasil karya yang ada disetiap tutorial. Cara ini saya ambil dan sedikit saya ubah biar navigasi teman-teman tetap sama.

Ok. Untuk mengetahui cara mmbuat menu header atau navigasi hal yang pertama adalah buka blog sobat terlebih dahulu kemudian pilih menu theme atau template kemudian klik edit HTML.

Setelah masuk Edit HTML masukkan kode berikut in tepat diatas kode </head> atau &lt;!--<head/>--&gt; 


<style>
.sticky.is-active {position:fixed; top: 0; left: 0; width: 100%}
</style>

Setelah mempaste kode tersebut, langkah selanjutnya adalah menambahkan class='sticky' didalam kode <nav> jika navigasi blog teman-teman ingin melayang bila discroll dan masukkan didalam kode <heder> jika header blog teman-teman yang ingin melayang bila discroll. Untuk lebih jelasnya lihat contoh berikut ini;


<html>
<head>
................................
..................................
.....................................
</head>
<body>
.............................
<header>
.......................................
.....................................
...................................
</header>

<nav>
....................................
.................................
...................................
</nav>
................................
...................................

</body>
</html>

menjadi


<html>
<head>
................................
..................................
.....................................
</head>
<body>
.............................
<header class='sticky'>
.......................................
.....................................
...................................
</header>

<nav class='sticky'>
....................................
.................................
...................................
</nav>
................................
...................................

</body>
</html>

Langkah selanjutnya adalah copy java script berikut tepat diatas kode </body>  atau &lt;/body&gt;


<script type="text/javascript">
//<![CDATA[
function throttle(fn, delay) {var last = undefined;var timer = undefined;return function () {var now = +new Date();if (last && now < last + delay) {clearTimeout(timer);timer = setTimeout(function () {last = now;fn();}, delay);} else {last = now;fn();}};} function onScroll() {if (window.pageYOffset) {$$html.classList.add('is-active');} else {$$html.classList.remove('is-active');}} var $$html = document.querySelector('.sticky');window.addEventListener('scroll', throttle(onScroll,25));
//]]>
</script>

Keterangan: Jika ada masalah dengan && maka ganti kode tersebut dengan &amp; &amp;

Langkah terakhir adalah Save Template.

Dari keseluruhan kode, dapat dilihat sebagai berikut;


<html>
<head>
................................
..................................
.....................................
</head>
<body>
.............................
<header>
.......................................
.....................................
...................................
</header>

<nav>
....................................
.................................
...................................
</nav>
................................
...................................

</body>
</html>

menjadi

<html>
<head>
................................
..................................
.....................................
<style>
.sticky.is-active {position:fixed; top: 0; left: 0; width: 100%}
</style>

</head>
<body>
.............................
<header class='sticky'>
.......................................
.....................................
...................................
</header>

<nav class='sticky'>
....................................
.................................
...................................
</nav>
................................
...................................
<script type="text/javascript">
//<![CDATA[
function throttle(fn, delay) {var last = undefined;var timer = undefined;return function () {var now = +new Date();if (last && now < last + delay) {clearTimeout(timer);timer = setTimeout(function () {last = now;fn();}, delay);} else {last = now;fn();}};} function onScroll() {if (window.pageYOffset) {$$html.classList.add('is-active');} else {$$html.classList.remove('is-active');}} var $$html = document.querySelector('.sticky');window.addEventListener('scroll', throttle(onScroll,25));
//]]>
</script>
</body>
</html>

Update:
Untuk lebih muda tanpa javascript kita bisa mengubah css header dengan menambahkan kode "position:fixed dan z-index:999", (Jika ada position:relative atau obsolute bisa ganti langsung dengan fixed), contohnya seperti ini

#header {height: 60px;margin: 0 auto;padding: 5px 10px;top: 0px;left: 0;background: #fff;box-shadow: 0px 0px 8px 0px #000;width: 100%;z-index: 999;position:fixed;}

Kekurangan dari membuat position fixed adalah akan memakan wrapper, untuk mengatasinya bisa menambahkan ;top-50px pada css wrapper (50 sesuaikan dengan tinggi header)

Cara ampuh dan paling efektik kita bisa membuatnya dengan menjadikan scticky, dengan menambahkan kode "position:-webkit-sticky;position:sticky;top:60px;z-index: 996".

Contoh:
#header {height: 60px;margin: 0 auto;padding: 5px 10px;top: 0px;left: 0;background: #fff;box-shadow: 0px 0px 8px 0px #000;width: 100%;position:-webkit-sticky;position:sticky;top:60px;z-index: 996

Bagikan :
Reaksi:
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 085733513782 - Terima kasih.

Berlangganan update artikel terbaru via email:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar Disqus

0 Response to "Cara Membuat Menu Header Atau Navigasi Melayang Ketika Di Scroll"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel