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'>Pasang kode JQuery tersebut di antara kode <head> dan </head>
$(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>
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...
Post a Comment
Post a Comment