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

  • 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 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

    keren bank

  • 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.