Membuat Highlight Hidangan Nav Actived

Cara Membuat Highlight Menu Nav Actived Membuat Highlight Menu Nav Actived

Cara menciptakan hidangan ini cukup mudah, kalian tinggal tambahkan nama Class, javascript & CSS yang diharapkan saja, tidak perlu menambahkan HTML menu. Untuk Demo/Pratinjau kalian dapat cek link dibawah ini, untuk memastikan hidangan Highlight aktif kalian tinggal pilih hidangan Sitemap diurl Demo.

Baca Juga

Demo

Cara Membuat Highlight Menu Nav Aktif

Pastikan Blog kau mempunyai Js jquery ibarat ini

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'></script>

Cari Menu Navigasi blog kau misalnya ibarat gambar berikut
Tambahkan class='active' didalam hidangan <li>

Jika Sudah Tambahkan CSS berikut kedalam <style> atau </style>
Kamu juga dapat ubah warna hidangan aktifnya

.active{background:#eee;}

Langkah terakhir ialah menambahkan Javascript, caranya :
Cari </head> atau </head>, kemudian simpan javascript berikut diatasnya & jangan lupa sesuaikan nama class sesuai dengan hidangan nav blog kalian.

<script type='text/javascript'>//<![CDATA[ $(document).ready(function(){var str=location.href.toLowerCase();$("#_menu-nav li a").each(function(){if (str.indexOf(this.href.toLowerCase()) > -1) {$("li.active").removeClass("active");$(this).parent().addClass("active");}});}) //]]></script>

Jika sudah save & lihat hasilnya..

Ok aku rasa cukup sekian tutorial kali ini biar bermanfaat, kalau ada pertanyaan silahkan tulis dikotak comment dibawah. Sampai jumpa diartikel selanjutnya. Terima kasih.