Menampilkan Kategori secara Dropdown

Ketika jalan-jalan ke blog yang berisi tips-tips wordpress, aku menemukan barisan kategori yang ditampilkan memanjang horisontal dan ada beberapa kategori yang mengandung kategori lain dan ditampilkan secara dropdown. Jika kita lewatkan pointer mouse ke kategori tersebut akan nampak anak kategori lain yang berada dibawah kategori tersebut (lihat gambar).

Cara membuat tampilan kategori di WordPress dalam menu horisontal dropdown tersebut menggabungkan Javascript dan CSS. Berikut langkah-langkahnya yang aku sarikan dari blog tersebut.

1. Langkah pertama adalah buat WordPress menampilkan menu sebagai daftar hirarki tanpa judul

<?php wp_list_categories(’sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0′); ?>

2. Bungkus script tersebut seperti berikut ini sehingga kita dapat mengatur style-nya (di css)

<div style="text-align:center;">
<ul id="menu" style="padding:0; margin:0;">
<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
</ul>
</div>

3. Tambahkan kode tersebut dimana kita akan menaruhnya, dalam contoh gambar diatas kode ini ditambahkan di header.php sehinggu menu tersebut muncul dibagian header.

4. Tambahkan kode-kode berikut ke style.css template wordpress yang anda pakai.

ul#menu {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font-size:1.2em;
}

ul#menu li {
float: left;
padding: 0;
margin: 0;
border-right:solid 1px #fff;
}

ul#menu ul li {
float: none;
position: relative;
border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
border-left: 1px solid #FFF;
z-index:1000;
}

ul#menu li ul {
margin: 0;
padding: 0;
display:none;
list-style: none;
position: absolute;
background: #9CC;
}
ul#menu ul ul{
margin-left: .2em;
position: absolute;
top: 0; /* if using borders, -1px to align top borders */
left: 100%;
}

ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
display: block;
padding: .2em .3em;
text-decoration: none;
background: #5587B3;
color: #FFFFFF;
}

ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
width: 8em;
}

Tentu saja kita perlu menyesuaikan warna dan ukuran font agar hasilnya menyatu dengan tema yang kita gunakan.

5. Langkah terakhir adalah membuatnya bekerja sebagai daftar dropdown pada semua browser. Mungkin dengan deklarasi CSS sederhana dapat bekerja dengan baik di Firefox, namun Internet Explorer tidak dapat membaca “hover pseudo classes”, jadi kita buat dalam Javascript.

Kopi paste kode berikut :

<script type=”text/javascript”>
/*<![CDATA[*/

var mbA,mbT,mbTf,mbSf;
var mbR = [];

function mbSet(m) {
if (document.getElementById&&document.createElement) {
var m=document.getElementById(m);
mbR[mbR.length] = m;
var i;

e=m.getElementsByTagName(‘a’);
if (!mbTf) mbTf=new Function(‘mbHT();’);
if (!mbSf) mbSf=new Function(‘mbS(this);’);
for (i=0;i<e.length;i++) {
e[i].onmouseout=e[i].onblur=mbTf;
e[i].onmouseover=e[i].onfocus=mbSf;
}

m=m.getElementsByTagName(‘ul’);
for (i=0;i<m.length;i++) {
mbH(mbL(m[i]));
}
}}

function mbHA() {
if (mbA) {
while (mbA) mbH(mbA);
mbHE(‘block’);
}
}

function mbHT() {
if (!mbT) mbT=setTimeout(‘mbHA();’, 0);
}

function mbTC() {
if (mbT) {
clearTimeout(mbT);
mbT=null;
}
}

function mbS(m) {
mbTC();
if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
else mbHE(‘none’);

if (mbM(m)) {
mbSH(m,’block’);
mbA=m;
}
}

function mbH(m) {
if (m==mbA) mbA=mbP(m);
mbSH(m,’none’);
mbT=null;
}

function mbL(m) {
while (m && m.tagName != ‘A’) m = m.previousSibling;
return m;
}

function mbM(l) {
while (l && l.tagName != ‘UL’) l = l.nextSibling;
return l;
}

function mbP(m) {
var p = m.parentNode.parentNode;
if (p.tagName == ‘UL’) {
var i = 0;
while (i <mbR.length) {
if (mbR[i] == p) return null;
i++;
}
} else {
return null;
}
return mbL(p);
}

function mbSH(m,v) {
m.className=v;
mbM(m).style.display=v;
}

function mbHE(v) {
mbHEV(v,document.getElementsByTagName(’select’));
}

function mbHEV(v,e) {
for (var i=0;i<e.length;i++) e[i].style.display=v;
}
/*]]>*/
</script>

Untuk mengaktifkannya, ubah tag <body> pada tema yang anda gunakan menjadi <body onload=”mbSet(’menu’);>

Demikian tutorial ini mudah-mudahan dapat membantu. Jika ada yang kurang jelas, silakan kunjungi langsung sumber tulisan ini disini.