Membuat current page pada menu navigasi

Current page atau Current menu adalah sebuah fungsi dimana di posisikan sebagai penanda halaman aktif pada menu navigasi yang sedang di buka atau di kunjungi, misalkan pada link menu navigasi Contact, maka link pada menu navigasi Contact yang akan di beri penanda berbeda dari link menu navigasi lainnya. biar sobat tidak bingung langsung saja lihat demonya di gambar bawah ini atau klik menu navigasi blog milik saya.

buat sobat yang tertarik dan ingin menerapkan fitur ini dan untuk mempercantik menu navigasi sobat, silahkan saja di simak triknya.

Dalam pembuatan current page atau menu ini kita akan menggunakan jquery dan sedikit tambahan css pada menu navigasi, tidak terlalu rumit caranya seperti berikut:

1. Pertama silahkan buka editor HTML template anda sperti biasanya
2. Letakkan kode berikut ini di atas tag </head>

<script type='text/javascript'>
//<![CDATA[
  function extractPageName(hrefString){
  var arr = hrefString.split('/');
  return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();}
  function setActiveMenu(arr, crtPage){
  for (var i=0; i<arr.length; i++){
  if(extractPageName(arr[i].href) == crtPage){
  if (arr[i].parentNode.tagName != "DIV"){
   arr[i].className = "penanda-nav";
   arr[i].parentNode.className = "penanda-nav";}}}}
  function setPage(){hrefString = document.location.href ? document.location.href : document.location;
  if (document.getElementById("id-menu-navigasi")!=null)setActiveMenu(document.getElementById("id-menu-navigasi")
   .getElementsByTagName("a"), extractPageName(hrefString));
  }
//]]>
</script>

perhatikan kode di atas, silahkan di ubah sesuai dengan ID menu navigasi sobat, untuk contoh saya menggunakan ID id-menu-navigasi.

3. Sisipkan sedikit kode script berikut kedalam elemen menu navigasi sobat

<script language='javascript'>setPage()</script>

hingga nampak seperti berikut:

<nav id='id-menu-navigasi'>
<ul>
<li><a href='/'>Depan</a></li>
<li><a href='#'>Tentang</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Member</a></li>
<li><a href='#'>Iklan</a></li>
</ul>
<script language='javascript'>setPage()</script>
</nav> 

4. Setelah langkah di atas selesai kita buat sedikit css untuk class penanda pada current menunya, contoh saja seperti berikut:

.penanda-nav {
 background-color:#98CB00;
 color:#222;
}

5. Tambahkan css di atas pada css menu navigasi sobat, contoh terlihat seperti di bawah ini:

pada contoh di atas, css menu navigasi saya adalah #id-menu-navigasi dan akan terlihat seperti ini:

#id-menu-navigasi li .penanda-nav {
 background-color:#98CB00;
 color:#222;
}

css di atas hanya sebuah contoh saja agar sobat lebih mudah menerapkan, silahkan di rombak dan rubah sesuai keinginan.

6. Silahkan simpan semua editan template yang sudah di buat dan lihat hasilnya.

demikian saja posting saya tentang membuat current menu atau current page pada menu navigasi, silahkan di jadikan eksperimen dan di pelajari. semoga bermanfaat...