Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding

Baik Sobat sekalian. Kali ini saya akan membagikan sedikit tips Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding di tampilan template kita.

Menu fixed atau menu melayang sampai saat ini masih menjadi primadona para Blogger. Dengan menu melayang, maka keterlihatan menu dan kesempatan diakses pengunjung menjadi lebih banyak dan lebih mudah dieksplore.

Baca Juga

Untuk itu, untuk melangkapi tutorial yang ada di klikberita.co, saya akan membagikan cara membuat fixed menu atau menu melayang dengan CSS dan Javascript.

Javascript yang digunakannya pun hanya beberapa baris saja dan tidak memerlukan Jquery Library sehingga sangat ringan untuk digunakan di blog tidak menambah loding blog.

Trik jenis ini sangat cocok untuk menu yang posisi awalnya berada di bawah header. Artinya, posisi awal menu tidak menempel di atas.

Jika ternyata posisi awal menu blog Anda sudah berada di atas, itu artinya Anda tidak memerlukan trik ini. Untuk membuat menu melayang yang posisi awalnya sudah berada di atas, Anda hanya perlu pakai CSS saja tanpa javascript ataupun jquey, sehingga akan lebih ringan tanpa beban script.

Baiklah, kita mulai untuk Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding.

Di sini saya tidak memberikan cara membuat menunya, hanya membuat menunya menjadi melayang saja. Jadi untuk menunya tetap menggunakan menu yang sudah ada di blog Anda masing-masing.

Langkah Pertama

Tambahkan elemen div berikut untuk membungkus kode HTML menu blog Anda.

<div id='fixedmenu'>
KODE HTML MENU BLOG ANDA DI SINI
</div>

Akan tampil seperti ini

<div id='fixedmenu'>
<span class='show-mobile-menu'/>
<nav class='main-menu-wrap'>
<b:section class='galaxymag-main-menu' id='galaxymag-main-menu' maxwidgets='1' name='Main Menu' showaddelement='no'>
<b:widget id='LinkList155' locked='true' title='Main Menu' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Berita Korupsi</b:widget-setting>
<b:widget-setting name='link-1'>https://kabarkorupsi.com</b:widget-setting>
<b:widget-setting name='text-0'>Home</b:widget-setting>
<b:widget-setting name='link-0'>/</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul id='galaxymag-main-menu-nav' role='menubar'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' role='menuitem'><data:link.name/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</nav>
</div>
</div>
</div>

Kode div tersebut untuk ditandai oleh javascript untuk mendapatkan tinggi elemen dari tepi atas untuk mengeksekusi tindakan selanjutnya ketika elemen tersebut menyentuh tepi atas ketika discroll.

Langkah Kedua

Tambahkan beberapa baris javascript ini di atas kode </body>

<script>
//<![CDATA[
const nav = document.querySelector('#fixedmenu');
const navTop = nav.offsetTop;

function stickyNavigation() {
console.log('navTop = ' + navTop);
console.log('scrollY = ' + window.scrollY);

if (window.scrollY >= navTop) {
document.body.classList.add('fixed-nav');
} else {
document.body.classList.remove('fixed-nav');
}
}

window.addEventListener('scroll', stickyNavigation);
//]]>
</script>

Javascript di atas akan menambahkan class fixed-nav pada body ketika elemen yang ditandai menyentuh tepi atas dan ketika elemen kembali ke posisi semula maka class pada body akan dihilangkan.

Langkah Ketiga

Kini saatnya memberikan style pada elemen ketika elemen menyentuh sisi atas dan class ditambahkan pada body agar elemen menjadi melayang.

.fixed-nav #fixedmenu{position:fixed;top:0;left:0;width:100%;z-index:999;}

akan jadi CSSnya seperti ini

.rtl #klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab{float:right;margin:-20px -10px 0 0}
#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab:before{content:'';position:absolute;left:0;top:0;width:100%;height:100vh;background-color:rgba(155,155,155,0.07);box-sizing:border-box;display:block}
#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li{width:100%;margin:0}
#klikberita-main-menu ul > li > ul.complex-tabs > ul.select-tab > li > a{position:relative;display:block;height:auto;font-size:13px;color:$(megamenu.color);line-height:33px;padding:0 20px}
#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active > a:after{content:'\f054';font-family:'Font Awesome 5 Free';font-weight:900;font-size:9px;float:right}
.rtl #klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active > a:after{content:'\f053';float:left}
#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active,#galaxymag-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li:hover{background-color:$(megamenu.bg)}
#klikberita-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li.active > a,#galaxymag-main-menu .mega-menu > ul.complex-tabs > ul.select-tab > li:hover > a{color:$(megamenu.hover.color)}
.fixed-nav #fixedmenu{position:fixed;top:0;left:0;width:100%;z-index:999;}

Anda bisa menambahkan style lainnya pada CSS di atas untuk mengatur tampilan ketika menu melayang.

Penambahan class pada body ini juga bisa dimanfaatkan untuk mengatur elemen lainnya selain menu, misalnya show hide elemen ketika scroll. Contohnya seperti CSS berikut.

.element{display:none;}
.fixed-nav .element{display:block;}

Bagaimana, mudah bukan?

Kini saatnya Anda untuk mencoba membuat menu blog Anda menjadi melayang. Silahkan kembangkan dan sesuaikan dengan blog Anda.

DEMO

Demikian tips Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript Tanpa Menambah Loding. Selamat mencoba.