Mecha versi 2.6.4 sudah dirilis!

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

Tabel Konten
  1. jQuery 
  2. HTML 
  3. CSS 
  4. JavaScript 
  5. HTML 
  6. Detail CSS 
jQuery Active Menu

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;}

Lihat Demo

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

©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 margin auto 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

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:

<div id="navigasi"> ... </div>
$('#navigasi a').each(function() { ... }
#navigasi {
...
}

Unknown

punyaku udah ada tuh.. tp format RSS

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 ?

Komentar telah ditutup.