Bikin Drop Down Menu untuk WordPress

Ketika ingin mendesain sebuah situs dengan menu yang memiliki banyak level mungkin kita akan berpikir bagaimana cara terbaik untuk menjaga navigasi tetap sederhana dan rapi. Mungkin drop down menu adalah solusi terbaik yang bisa kita gunakan. Bagaimana cara membuat drop down menu untuk wordpress? dapatkan triknya di blog desain ini.
Sebanarnya untuk membuat drop down menu, banyak plugin yang bisa kita gunakan. Tapi tau sendiri, tidak semua plugin mudah untuk dicustomize. Karena alasan itu mari kita buat sendiri drop down menu untuk WordPress kita.

Persiapan

Sebelum memulainya harus ditentukan terlebih dahulu isi dan hierarki dari menu yang diinginkan. Misal kita gunakan daftar menu yang ada pada painthink. Berikut susunannya,

• Home
• Tutorial
  • Photoshop
  • Illustrator
  • Tipografi
  • Web
• Links
• About

jika dalam html maka susunannya seperti berikut:

<ul id="nav">
 <li><a href= "#">Home</a></li>
 <li><a href= "#">Tutorial</a>
  <ul id="tutorial">
   <li><a href= "#">Photoshop</a></li>
   <li><a href= "#">Illustrator</a></li>
   <li><a href= "#">Tipografi</a></li>
                        <li><a href= "#">Web</a></li>
  </ul>
 </li>
 <li><a href= "#">Links</a></li>
 <li><a href= "#">About</a></li>
</ul>

Membuatnya Dinamis

Menu yang kita buat tersebut sifatnya statis, jadi jika ingin menambah daftar menu baru harus melakukannya secara manual. Agar bisa dinamis kita beri sedikit perubahan pada daftar submenu tutorial.

<ul id="nav">
 <li><a href= "#">Home</a></li>
 <li><a href= "#">Tutorial</a>
  <ul id="tutorial">
   <? wp_list_pages('title_li=&sort_column=menu_order&child_of=2'); ?>
  </ul>
 </li>
 <li><a href= "#">Links</a></li>
 <li><a href= "#">About</a></li>
</ul>

dengan begitu ketika daftar submenu tutorial bertambah, yang tampil juga akan bertambah secara otomatis tanpa harus mengotak-atik skrip lagi.

Javascript

Disini kita membutuhkan sedikit javascript untuk menampilkan atau menyembunyikan submenu.

// JavaScript Document

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

Secara lengkap susunan menu yang kamu buat (termasuk didalamnya javascript) tampak sebagai berikut,

<ul id="nav">
 <li><a href= "#">Home</a></li>
 <li onmouseover="javascript:toggleLayer('tutorial');" onmouseout="javascript:toggleLayer('tutorial');"><a href= "#">Tutorial</a>
  <ul id="tutorial">
   <? wp_list_pages('title_li=&sort_column=menu_order&child_of=2'); ?>
  </ul>
 </li>
 <li><a href= "#">Links</a></li>
 <li><a href= "#">About</a></li>
</ul>

CSS

Jika kita sudahi disini maka akan kita dapati tampilan yang kurang bagus, atau lebih tepatnya nggak karu-karuan. Untuk itu kita membutuhkan style untuk mengatur tampilannya. Disini kamu bisa berkreasi untuk mendapatkan hasil yang sesuai dengan keinginanmu. Dan yang saya tampilin disini hanyalah dasarnya saja.

@charset "utf-8";
/* CSS Document */

* {margin:0;padding:0;}
body {text-align:left;padding: 30px;font: 12px Arial, Helvetica, sans-serif;}

ul, ol {padding: 10px 0;}

#nav ul {display:none;position:absolute;margin: 16px 0 0 -1px;} /* menyembunyikan submenu */
*+ html #nav ul {margin: 16px 0 0 -122px;} /* ie 7 hack */
#nav li {list-style:none;display:block;float:left;}
#nav a {display:block;float:left;padding: 5px 15px;border:1px solid #ddd;margin: 0 0 0 -1px;text-decoration:none;width:90px;}

/*style submenu*/
#nav ul li, #nav ul li a {float:none;}
#nav ul li a {margin: -1px 0 0 0;width:150px;}
#nav ul li a:hover {background:#efefef;color:#000;}

Hmmm…sekarang kamu udah punya drop down menu buatan kamu sendiri, jangan lupa subscribe ke painthink RSS Feed.