Tambahkan Kelas 'active'/'current' pada Menu Berdasarkan URL pada Address Bar
Tabel Konten

Tambahkan kelas active
pada menu yang sedang aktif (menu dengan nilai href
yang sama dengan URL pada Address bar):
jQuery
$(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 kelas "active" pada menu ini
$(this).addClass('active');
}
});
});
HTML
<nav>
<ul>
<li><a href='http://www.aa.com'>Beranda</a></li>
<li><a href='http://www.bb.com'>Arsip</a></li>
<li><a href='http://www.cc.com'>Tentang</a></li>
<li><a href='http://sekaratmutlak.blogspot.com/2012/01/active-menu.html'>Komentar</a></li>
<li><a href='http://www.ee.com'>Kontak</a></li>
</ul>
</nav>
CSS
nav {
font:normal 14px Impact,Arial,Sans-Serif;
text-transform:uppercase;
}
nav ul {
list-style:none;
border:1px solid #1D4ABE;
margin:0px 0px;
padding:0px 0px;
background:#222;
-webkit-box-shadow:0px 1px 2px #000;
-moz-box-shadow:0px 1px 2px #000;
box-shadow:0px 1px 2px #000;
overflow:auto;
}
nav li {
display:inline;
float:left;
}
nav li a {
display:block;
text-decoration:none;
padding:10px 15px;
background:#222;
color:#ccc;
text-shadow:0px 1px 1px rgba(0,0,0,0.8);
}
nav li a:hover {background:#333;text-decoration:none;}
nav li a.active {background:#1D4ABE;color:#fff;}
Pembaharuan: Versi JavaScript murni
JavaScript
function currentNav(navId) {
var current = window.location.href.split('#')[0],
nav = document.getElementById(navId),
navItem = nav.getElementsByTagName('a');
for(var i = 0; i < navItem.length; i++) {
// Jika nilai atribut href pada salah satu array tautan = URL address bar...
if(navItem[i].href == current || navItem[i].href == decodeURIComponent(current)) {
// Tambahkan kelas 'active' pada tautan tersebut
navItem[i].className = "active";
}
}
} currentNav('navigation'); // Terapkan fungsi 'currentNav()' pada navigasi dengan id="navigation"
HTML
<nav id="navigation">
...
...
</nav>
Detail CSS
#navigation a.active {
color:red;
font-weight:bold;
}
Sumber: Stackoverflow - A Better Idea to Add Active Class to Menu Item
22 Komentar
Unknown
jquery nya taruh mana
Taufik Nurrohman
@Spenza-Sumpiuh: di atas </head>
©Rhaditz'45
bang kalo Tulisa BERANDA ARSIP dll cara menjadi kan di tengah tengah gemana bang
Malah jadi kaya gini http://enter404.blogspot.com/
Taufik Nurrohman
@©Rhaditz'45 Susah ditengahkan kalau sudah memakai CSS
float
. Paling bisa ke tengah kalau nilai lebar menu ditentukan, lalu menerapkan marginauto
pada<nav>
Unknown
Blog DTE :] interaktif banget sama pengunjung bagus. Tipsnya juga bagus, thanks sudah berbagi kawan.
NEDI ARWANDI
Udah lama gak berkunjung, pas mampir ksini dapat pengetahuan baru nih, tetap semangat bro....
Putra
kok gagal yah?? :'(
Anonim
Yang paling unik URL Blog ini... ingat waktu masih kecil
Surga Kenari
Hibernasi apaan ya mas Taufik?
Taufik Nurrohman
Artinya: kemungkinan dalam waktu dekat blog ini tidak aktif. Jadi kalau komentarnya banyak yang tidak sempat terbalas jangan kaget.
Surga Kenari
saya akan sangat sedih sekali :'( hehuhe
abang ichal
wahh... ikutan sedih juga :(
Unknown
keren bgt sob,, nice infonya :D
Rosyd Aqbar
wah bagus juga, sama kayak link ya bang bisa di kasih `Active`
ijin Bookmark pak.
tapi saya mau tanya, apa harus pake tag <nav ?
apa bisa pake <div ?
Taufik Nurrohman
Kalau memakai tag DIV nanti selektornya harus dimodifikasi lagi, di JQuery dan CSS:
Unknown
keren bank
Unknown
punyaku udah ada tuh.. tp format RSS
Taufik Nurrohman
Selamat datang kembali bu Lina Marliana ^_^
Unknown
izinkan aku menyimak dengan teliti :)
Misba_al
kurang detail tutorialnya gan, gw bukan hebat masalah blogger
Anonim
Kenapa mau tutup mas :'(
Mastah
Ini bisa diterapin di .comment gak min ? Jadi pas kita klik timestamp komentar, 1 kolom komentar tersebut bakal memicu .active, Apakah bisa ?
Atau harus pakai metode lain ?