Tambahkan Kelas 'active'/'current' pada Menu Berdasarkan URL pada Address Bar
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 Comments:
jquery nya taruh mana
@Spenza-Sumpiuh: di atas </head>
bang kalo Tulisa BERANDA ARSIP dll cara menjadi kan di tengah tengah gemana bang
Malah jadi kaya gini http://enter404.blogspot.com/
@©Rhaditz'45 Susah ditengahkan kalau sudah memakai CSS float. Paling bisa ke tengah kalau nilai lebar menu ditentukan, lalu menerapkan margin auto pada <nav>
Blog DTE :] interaktif banget sama pengunjung bagus. Tipsnya juga bagus, thanks sudah berbagi kawan.
Udah lama gak berkunjung, pas mampir ksini dapat pengetahuan baru nih, tetap semangat bro....
kok gagal yah?? :'(
Yang paling unik URL Blog ini... ingat waktu masih kecil
Hibernasi apaan ya mas Taufik?
Artinya: kemungkinan dalam waktu dekat blog ini tidak aktif. Jadi kalau komentarnya banyak yang tidak sempat terbalas jangan kaget.
saya akan sangat sedih sekali :'( hehuhe
keren bgt sob,, nice infonya :D
wahh... ikutan sedih juga :(
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 ?
Kalau memakai tag DIV nanti selektornya harus dimodifikasi lagi, di JQuery dan CSS:
<div id="navigasi"> ... </div>
$('#navigasi a').each(function() { ... }
#navigasi {
...
}
keren bank
punyaku udah ada tuh.. tp format RSS
Selamat datang kembali bu Lina Marliana ^_^
izinkan aku menyimak dengan teliti :)
kurang detail tutorialnya gan, gw bukan hebat masalah blogger
Kenapa mau tutup mas :'(
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 ?
Post a Comment
<< Home