Mau bikin Blog ? Cari Jasa Blog Murah Berkualitas? Ke Jasablog.info aja yuk! Cepat, Mudah, Murah dan Berkualitas

Cara Membuat Menu Ditandai Saat Aktif


Berikut ini adalah cara membuat menu terlihat ditandai highlight saat link menu tersebut aktif atau dibuka.
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>

0 Response to "Cara Membuat Menu Ditandai Saat Aktif"

Post a Comment