Hay Day Clone v1.35.114 (June 19, 2017) versi terbaru --> klik di sini

Menandai Menu Navigasi Yang Sedang Aktif

//
menandai menu navigasi yang aktif

Mungkin ini salah satu cara yang ane cari-cari selama bertahun-tahun. Tentang bagaimana caranya menu navigasi berubah warnanya (ditandai) ketika kita sedang berada di halaman tersebut. Misalnya, ketika kita berada di halaman about maka menu navigasi "about" akan berubah warnanya atau ditandai dengan sesuatu

Akhirnya ane menemukan caranya, lagi-lagi dengan bantuan JQuery yang luar biasa. Caranya yaitu dengan menambahkan class active pada menu yang sedang aktif

Bagaimana cara membuatnya?

Jika kamu sudah memasang menu navigasi sebelumnya, kamu tinggal memasang kode JQuery dan sedikit kode CSS nya.

Umumnya kode menu navigasi seperti ini:
<div id="menu">
<ul>
<li><a href='http://www.asd.com'>Beranda</a></li>
<li><a href='http://www.asd.com'>About</a></li>
<li><a href='http://www.asd.com'>Arsip</a></li>
<li><a href='http://www.asd.com'>Kontak</a></li>
<li><a href='http://www.asd.com'>Download</a></li>
<li><a href='http://www.asd.com'>Dll</a></li>
</ul>
</div>

JQuery
<script type='text/javascript'>
$(function() {
var path = window.location.href; // Mengambil data URL pada Address bar
$('nav a').each(function() {
// Jika URL pada menu ini sama persis dengan path...
if (this.href === path) {
// Tambahkan class "active" pada menu ini
$(this).addClass('active');
}
});
});
</script>
Pasang kode JQuery tersebut di antara kode <head> dan </head>

CSS
#menu li a.active {
background:#000;
color:#fff;
}

Perhatikan huruf yang dicetak tebal, nama id harus sama. Untuk kode warna bisa di lihat di sini. Bagi pengguna blogger pasang kode CSS di atas kode ]]></b:skin>




Semoga membantu, terima kasih...

8 Comments

wah makin matep aja blog nya...
hatur nuhun informasina...

oh ya fi saya teh mau nanya saya kan ngedit edit html supaya ada related post cuman kok letaknya jauh banget dr kolom komentar yah...? nuhun ah di antos
Reply Delete
@aimkazuhiko: mungkin letak kode related post nya tidak berada satu "div" dengan kolom komentar... atu bisa juga membuat "div" baru untuk kode related post sehingga margin nya bisa diutak-atik kang, ^^
Reply Delete
Kang tutorialnya yang lebih detail donk, agak bingung soalnya...
bingung dibagian mana gan? :)
Delete
Reply Delete
ko ga bisa ya?
perhatikan kode CSS nya gan, karena itu yang sangat vital :)
Delete
Reply Delete
Anonymous 10 February, 2013
thanks...it works
Reply Delete

Post a Comment

Silakan tulis komentar atau pertanyaan kamu di sini. Komentar yang berbau spam, promosi dan sebagainya akan segera saya hapus. Terima kasih.

Cancel Reply