Beranda » Navigasi » Link aktif di menu dengan tag conditional

Link aktif di menu dengan tag conditional

Link aktif di menu dengan tag conditional

Dapet ide yang tidak pernah terpikir, sempat senyum - senyum sendiri saat menerapkan tag conditional home untuk background <body> kenapa gak saya coba pada menu ya, hadeh... begini teorinya, misal kita mengunjungi sebuah situs/blog lalu kita menekan salah satu link menu contoh widget, semula ketika kita berada di halaman depan tidak ada perbedaan warna background link, lalu ketika link kita klik dan membuka halaman link tersebut memiliki warna background yang berbeda.

dengan ini kita bisa mrngetahui link menu yang sedang aktif/berada, Contoh anda memiliki memu navigasi seperti berikut

<menu id='navigasi'>
    <ul>
        <li><a href='http://contoh.com'>Beranda</a></li>
        <li><a href='http://contoh.com/aku.html'>Aku</a></li>
        <li><a href='http://contoh.com/arsip.html'>Arsip</a></li>
        <li><a href='http://contoh.com/contact.html'>Kontak</a></li>
    </ul>
</menu>

untuk memberi class warna yang berbeda silahkan sisipkan setiap class di link menu anda, seperti berikut

<menu id='navigasi'>
    <ul>
        <li><a class='depan' href='http://contoh.com'>Beranda</a></li>
        <li><a class='gue' href='http://contoh.com/aku.html'>Aku</a></li>
        <li><a class='arsip' href='http://contoh.com/arsip.html'>Arsip</a></li>
        <li><a class='telpon' href='http://contoh.com/contact.html'>Kontak</a></li>
    </ul>
</menu>

kini setiap link menu anda telah memiliki class yang nanti berguna untuk memberi efek sesuai yang telah di tentukan pada tag conditional, kini kita buat css yang nanti akan kita sisipkan di tag conditional untuk menentukan class dari menu anda, lihat kode di bawah ini:

<style type='text/css'>
    .depan a {background-color:#0A7936;color:white;}
    .gue a {background-color:#0A7936;color:white;}
    .arsip a {background-color:#0A7936;color:white;}
    .telpon a {background-color:#0A7936;color:white;}
</style>

anggap saja css di atas sudah jadi dan sesuai keinginan, kemudian Letakkan kode di atas tepat di atas tag </head> atau buang kode <style type='text/css'> dan <style> lalu gabung dengan kolom css template anda.

Sekarang mengatur tag conditional untuk menunya/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 conditinal halaman terpilih untuk kondisi ini, lihat tag conditional dibawah ini:

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

Lalu buat beberapa pemisah dan batas perintah seperti berikut

<style type='text/css'>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .depan a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .gue a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .arsip a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .telpon a {background-color:#0A7936;color:white;}
    </b:if>
</style>

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

<style type='text/css'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        .depan a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;http://contoh.com/aku.html&quot;'>
        .gue a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;http://contoh.com/arsip.html&quot;'>
        .arsip a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;http://contoh.com/contact.html&quot;'>
        .telpon a {background-color:#0A7936;color:white;}
    </b:if>
</style>

Semoga trik ini bermanfaat untuk anda...

Link aktif di menu dengan tag conditional

Belum ada tanggapan untuk "Link aktif di menu dengan tag conditional"

Post a Comment