Memberi Tanda Pada Menu Berdasarkan Halaman yang Sedang Aktif

Tabel Konten
  1. Mengatur Warna Menu dengan Tag Kondisional 
  • Alternatif Lain 
    1. Tanpa Tag Kondisional 
    2. Dengan Widget Daftar Halaman (Page List) 
  • Memberi Tanda Pada Menu Berdasarkan Halaman yang Sedang Aktif
    Menu berubah warna pada halaman About.

    Dulu Saya pernah menuliskan potongan kode untuk menandai menu berdasarkan URL pada address bar dengan jQuery atau JavaScript di sini, kali ini Saya akan menggunakan tag kodisional untuk menandai menu berdasarkan persamaan URL halaman atau katakan saja pada halaman yang sedang aktif. Dengan begitu, saat Anda sedang berada pada halaman Tentang, maka menu navigasi Tentang akan berubah warna sesuai dengan pengaturan tampilan menu aktif yang Anda buat. Sebagai contoh.

    Anggaplah Anda sudah memiliki menu navigasi di dalam template dengan kerangka seperti ini:

    <nav id='nav'>
      <ul>
        <li><a href='http://test.blogspot.com'>Beranda</a></li>
        <li><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li>
        <li><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li>
        <li><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li>
      </ul>
    </nav>

    Tambahkan masing-masing item menu dengan ID yang spesifik, misalnya home, about, archive dan sebagainya, sehingga hasilnya akan menjadi seperti ini:

    <nav id='nav'>
      <ul>
        <li id='home'><a href='http://test.blogspot.com'>Beranda</a></li>
        <li id='about'><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li>
        <li id='archive'><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li>
        <li id='contact'><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li>
      </ul>
    </nav>

    Setelah itu temukan kode </head> dan tambahkan kode-kode CSS yang berisi semua ID menu di atas. Isi selektor-selektor tersebut dengan deklarasi yang sama. Sebagai contoh, di sini Saya menuliskan warna latar hijau dan warna teks putih untuk menu yang sedang aktif:

    <style>
    #home    a {background-color:#0A7936;color:white;}
    #about   a {background-color:#0A7936;color:white;}
    #archive a {background-color:#0A7936;color:white;}
    #contact a {background-color:#0A7936;color:white;}
    </style>

    Letakkan kode di atas tepat di atas tag </head>

    Mengatur Warna Menu dengan Tag Kondisional 

    Pada intinya kita hanya akan memecah semua selektor di atas menjadi kode CSS tunggal yang akan tampil hanya jika halaman yang sedang aktif merupakan halaman yang memiliki URL sama dengan URL pada menu. Jadi kita bisa menggunakan tag kodisional halaman khusus untuk kasus ini:

    <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>

    Pisahkan semua selektor item menu di atas menjadi seperti ini:

    <style>
      <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
      #home a {background-color:#0A7936;color:white;}
      </b:if>
      <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
      #about a {background-color:#0A7936;color:white;}
      </b:if>
      <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
      #archive a {background-color:#0A7936;color:white;}
      </b:if>
      <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
      #contact a {background-color:#0A7936;color:white;}
      </b:if>
    </style>

    Ganti kode URL HALAMAN dengan URL halaman pada menu yang terkait dengan ID menu dalam selektor CSS. Dalam contoh menu yang Saya ilustrasikan di atas, seharusnya kodenya akan menjadi seperti ini:

    <style>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      #home a {background-color:#0A7936;color:white;}
      </b:if>
      <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/about.html&quot;'>
      #about a {background-color:#0A7936;color:white;}
      </b:if>
      <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/archive.html&quot;'>
      #archive a {background-color:#0A7936;color:white;}
      </b:if>
      <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/contact.html&quot;'>
      #contact a {background-color:#0A7936;color:white;}
      </b:if>
    </style>

    Catatan: data:blog.homepageUrl setara dengan &quot;http://test.blogspot.com/&quot; menurut sampel alamat blog di atas, dan juga setara dengan window.location.hostname dalam JavaScript.

    Klik Simpan Template.

    Alternatif Lain 

    Tanpa Tag Kondisional 

    Kita bisa membuat manipulasi ini tanpa tag kondisional, diantaranya adalah dengan cara menerapkan manipulasi JavaScript atau jQuery (baca di sini) yang lebih praktis. Tapi metode ini memiliki satu kekurangan yaitu efek tidak akan bekerja jika JavaScript dimatikan. Atau kita juga bisa menggunakan metode yang jauh lebih sederhana lagi, yaitu dengan cara menyisipkan kode CSS secara langsung ke dalam posting, sama seperti saat kita membuat posting Blogazine.

    Hal yang paling penting dalam pembuatan manipulasi efek aktif pada menu sebenarnya hanya ada pada modifikasi ID atau kelas item menu agar mereka menjadi lebih spesifik/berbeda satu sama lain.

    Dengan Widget Daftar Halaman (Page List) 

    Blogger memiliki widget bernama Daftar Laman. Dulu sebenarnya widget tersebut digunakan untuk menampilkan semua daftar tautan khusus untuk halaman statis, tapi saat ini widget tersebut sudah berkembang dan bisa ditambahi dengan tautan-tautan non-halaman statis. Dalam widget tersebut sudah terdapat peraturan kondisi tersendiri yaitu <b:if cond='data:link.isCurrentPage'> yang memiliki kemampuan untuk menambahkan kelas atau keadaan yang berbeda pada item menu jika halaman yang sedang aktif adalah halaman yang memiliki URL sama dengan URL pada menu tersebut:

    <b:widget id='PageList1' locked='false' title='Laman' type='PageList'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
        <b:if cond='data:mobile'>
          <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
            <b:loop values='data:links' var='link'>
              <b:if cond='data:link.isCurrentPage'>
                <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
              <b:else/>
                <option expr:value='data:link.href'><data:link.title/></option>
              </b:if>
            </b:loop>
          </select>
          <span class='pagelist-arrow'>&amp;#9660;</span>
    
        <b:else/>
          <ul>
            <b:loop values='data:links' var='link'>
              <b:if cond='data:link.isCurrentPage'>
                <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
              <b:else/>
                <li><a expr:href='data:link.href'><data:link.title/></a></li>
              </b:if>
            </b:loop>
          </ul>
        </b:if>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>

    Untuk menerapkan efek aktif pada menu, cukup gunakan CSS ini:

    /* Versi daftar menu */
    .PageList li.selected a {
      background-color:#0A7936;
      color:white;
    }
    
    /* Versi selectbox */
    .PageList option[selected] {
      font-weight:bold;
    }
    Widget Halaman Statis

    Kekurangan manipulasi tampilan menu aktif pada widget Daftar Laman adalah kita tidak memiliki kemampuan untuk menambahkan sub-sub menu baru sebagai anak menu utama.

    26 Komentar

    • Unknown

      dulu udah ada kan tutorial ini... sekarang yang membedakan tampilannya nya ya om...
      ouh ia saya mau tanya kalau menu dengan js dari modernizr atau mottool plugin script apa aja biasanya yang di ambil.. kelebihannya apa di bandingkan dengan jquery-ui.

      • Taufik Nurrohman

        Dulu memakai JavaScript. Kalau sekarang memakai tag kondisional yang manipulasinya tidak akan terpengaruh/rusak jika JavaScript dinonaktifkan.

        JQuery dan MooTools itu sama: JavaScript Library. Cuma metodenya saja yang berbeda. Misalnya, event DOM Ready pada JQuery dituliskan seperti ini:

        $(document).ready(function() {
        // DOM Ready...
        });

        Dalam MooTools dituliskan seperti ini:

        window.addEvent("domready", function() {
        // DOM Ready...
        });

        Beberapa fungsi yang lain juga sama, cuma nama dan metodenya saja yang berbeda, misalnya .css() dalam JQuery menjadi .setStyle() dalam MooTools.
        MooTools dan JQuery bukan bahasa baru, keduanya adalah JavaScript yang dipaketkan menjadi pabrik fungsi.
        Umumnya kita harus mengeset kode CSS pada elemen dengan cara seperti ini jika kita menggunakan JavaScript mentah:

        document.getElementById('text').style.color = "red";

        Dengan JQuery kita bisa mudah menuliskannya seperti ini:

        $('#text').css('color', 'red');

        Dalam MooTools menjadi seperti ini:

        $('#text').setStyle('color', 'red');

        Modernizr itu cuma pengaman saja, sebagai otak website/situs. Mengingat situs itu benda mati, maka mereka tidak punya kemampuan untuk mengetahui apakah peramban yang kita pakai mendukung fungsi-fungsi tertentu atau tidak. Modernizr bertugas untuk mengerjakan fallback-nya. Misalnya dalam JQuery Masonry, pada opsi efek animasi kita diizinkan untuk menggunakan CSS transisi dan animasi JQuery. Itu jika kita akan mengesetnya secara manual. Kalau kita sudah memakai Modernizr, Modernizr akan secara otomatis menentukan sendiri dengan cara mendeteksi peramban yang sedang digunakan: Jika peramban yang sedang digunakan mendukung CSS Transisi, gunakan CSS Transisi untuk menganimasikan post-brick. Tapi jika tidak, jatuhkan tugas efek animasi pada JQuery .animate() secara otomatis!

        JQuery UI beda lagi, JQuery UI itu cuma kumpulan plugin UI (User Interface) yang berada di bawah otak JQuery (intinya, JQuery UI hanya bisa bekerja jika ada JQuery). Isinya cuma widget-widget dan efek untuk memudahkan manusia saja, seperti kotak dialog, akordion, tab dsb.

        • Putra

          dulu pernah nyoba yang versi script, yang pernah di postingin kangmas. Tapi saya coba berulang2 juga gak berhasil2 :D

    • Surga Kenari

      mas jika saya ingin memberikan link active pada induk, tapi yang di klik sub item nya gimana yah?

      contohnya saya klik navigasi > Terbaru > Mengungkap Cara Kerja Otak Manusia >

      Nah yg Terbaru / Induk navigasinya tetap active gmn ya mas?

      cth:
      jadikanpinter.blogspot.com/2012/08/mengungkap-cara-kerja-otak-manusia.html

      • Taufik Nurrohman

        Sebenarnya bukannya tidak bisa, cuma njelasinnya yang susah. Intinya lebih baik pakai versi manipulasi JavaScript. Setelah item menu berhasil ditambahi kelas aktif oleh JavaScript, cari induknya lalu tambahkan kelas aktif juga:

        $(function() {
        $('#nav li a').each(function() {
        if ($(this).attr('href') == window.location.href) {
        $(this).addClass('active');
        }
        });
        $('#nav li a.active').parents('li')
        .children('a')
        .addClass('active');
        });​

        Nah loh, gimana tuh. Mudeng?

        Demo: http://jsfiddle.net/tovic/DSk8D/241/

        • Surga Kenari

          oke cakep mas, working..

          tenkyu :)

        • Surga Kenari

          Mas nanya lagi dong boleh yaaa... wehehehe...

          navigasi induk aktif berdasarkan label artikel yang sedang kita baca, itu bagaimana mas?

          cth:

          saya lagi baca jadikanpinter.blogspot.com/2012/07/polisi-tertangkap-basah-terima-suap.html

          dengan label Fun, nah navigasi FUN yg paling atas aktif.

          itu bagaimana mas?

    • Ahmad Santos dan Keluarga :

      Assalamu'alaikum... Mas Taufik,
      salam kenal dari saya Santos dan saya mengucapkan terima kasih atas artikel yang diposting.

      Script menu aktif tersebut di atas sudah saya pakai di blog saya dan berhasil :-bd \o/ , hanya saja ada sedikit masalah :( 0:) .

      Menu yang yang saya pakai ada 5 menu, yaitu : Home, tutorial, kisah, film, Forum.
      Pada menu Home s/d film tanda menu aktif "OK", tapi pada menu Forum tanda menu aktif "tidak bisa".
      Ada kesalahan dimana pada script yang saya buat, mohon penjelasan.
      Link script menu saya, sbb :

      http://files.indowebster.com/download/files/menu_aktif

      Maaf, scrip tsb saya upload ke idws, karena saya tulis dikolom komentar tidak bisa (ada tag yang tidak diijinkan).
      Sebelumnya saya ucapkan banyak terima kasih, salam dan sukses selalu.

    • Ahmad Santos dan Keluarga :

      Assalamu'alaikum... Mas Taufik,
      Masalah yang saya pertanyakan diatas sudah bisa dan sudah tidak ada masalah !
      Terimakasih atas tutorialnya, salam dan sukses selalu.

    • azewBz

      apa markup sperti di bawah bisa mas?

      
      <div class="top-menu-home">
      <nav>
      <a class="blog" href="#">Beranda</a>
      <a class="archive" href="#">Archive</a>
      <a class="contact" href="#">Contact</a>
      <a class="about" href="#">About</a>
      <a class="blog" href="#">Blog</a>
      </nav>
      </div>
      

      setelah saya coba tidak berfungsi.

      • Taufik Nurrohman

        <style type='text/css'>
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
        .top-menu-home a.blog {background-color:#0A7936;color:white}
        </b:if>
        <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
        .top-menu-home a.archive {background-color:#0A7936;color:white}
        </b:if>
        <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
        .top-menu-home a.contact {background-color:#0A7936;color:white}
        </b:if>
        <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
        .top-menu-home a.about {background-color:#0A7936;color:white}
        </b:if>
        </style>
    • azewBz

      ko mas`ada beberapa menu yg tidak terseleksi?
      mlah tampil di homepage
      view :

      • Taufik Nurrohman

        Lebih baik beri nama kelas yang berurutan saja supaya penanganannya mudah:

        <nav class="top-menu-home">
        <a class="menu-item-1">Home</a>
        <a class="menu-item-2">Archive</a>
        <a class="menu-item-3">Contact</a>
        <a class="menu-item-4">About</a>
        <a class="menu-item-5">Blog</a>
        </nav>
    • Unknown

      Komentar ini telah dihapus oleh pengarang.

    • Unknown

      Om klo model link yg kayak gi
      http://contoh-link.blogspot.com/search/label/?max-results=8
      kog ga bisa ya...
      itu ngatasinnya gmana mas..??

    • Anonim

      sangat mudah dipelajari, infonya sangat detail

    • Unknown

      Terima kasih banyak Mas Taufik, sangat bermanfaat :D

    • Kusnadi

      itu khusus buat di blogger ya?
      soalnya saya coba di localhost gk bisa...

    • Summon Agus

      maaf mau bertanya untuk modifikasi PageList bawaan blogger jadi Sub Menu gmna caranya ya mas?

      • Taufik Nurrohman

        Bisa, tapi caranya akan lebih rumit:

        <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a expr:href='data:link.href'><data:link.title/></a>
        <b:else/>
        <li><a expr:href='data:link.href'><data:link.title/></a>
        </b:if>
        <b:if cond='data:link.title == &quot;Nama Menu 1&quot;'>
        <ul>
        <li><a href='#'>Submenu 1</a></li>
        <li><a href='#'>Submenu 2</a></li>
        <li><a href='#'>Submenu 3</a></li>
        …
        </ul>
        </b:if>
        <b:if cond='data:link.title == &quot;Nama Menu 2&quot;'>
        <ul>
        <li><a href='#'>Submenu 1</a></li>
        <li><a href='#'>Submenu 2</a></li>
        <li><a href='#'>Submenu 3</a></li>
        …
        </ul>
        </b:if>
        …
        </li> <!-- tag penutup dipindah ke sini -->
        </b:loop>

        Mending pakai cara manual saja. Kondisional URL juga masih bisa diterapkan pada markup yang dituliskan secara manual.

    • Unknown

      thanks gan infonya,salam kenal... B)

    • Unknown

      Mas kalo Seperti ini gimana CSSnya, tadinya mau buat penanda seperti Navigasi Halaman youtube, jadi halaman yang aktif ada border-bottom warna merah.

      < ul class='idnav-menu'>
      < li id='HOME'>
      < h2 aria-selected='true' class='penanda-tombol-item-jenius'>
      < a alt='Home' href='/' title='HOME'>
      < img alt='Home' src='URLIMAGE' title='HOME'/>
      < span>Home< /span>
      < /a>
      < /h2>
      < /li>
      < li id=FORUM-AE>
      < h2 aria-selected='true' class='penanda-tombol-item-jenius'>
      < a alt='FORUM AE' href='URLPOST' title='FORUM AE'>
      < img alt='Home' src='URLIMAGE' title='FORUM AE'/>
      < span>FORUM AE< /span>
      < /a>
      < /h2>
      < /li>
      < li id='DVD-ONE'>
      < h2 aria-selected='true' class='penanda-tombol-item-jenius'>
      < a alt='Dvd one' href='URLPOST' title='Dvd one'>
      < img alt='Home' src='URLIMAGE'/>
      < span>DVD-ONE< /span>
      < /a>
      < /h2>
      < /li>
      < /ul>
      :)

      • Taufik Nurrohman

        Atau kita juga bisa menggunakan metode yang jauh lebih sederhana lagi, yaitu dengan cara menyisipkan kode CSS secara langsung ke dalam posting, sama seperti saat kita membuat posting Blogazine.

        Coba masukkan kode CSS ini ke dalam konten posting yang dimaksud:

        <style>#DVD-ONE {border-bottom:4px solid red}</style>
    • Unknown

      Sip mas, sangat membantu sekarang saya bisa tidur nyenyak
      http://adjie-yasashii.blogspot.com/

    Komentar telah ditutup.