Bikin Drop Down Menu untuk WordPress

Web | March 10th, 2010

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.

Incoming search terms:

skrip dropdown tanpa javascript, themes wordpress drop down menu, bingung buat menu drop down di wordpress, buat dropdown di wordpress, theme wordpress yang bisa dropdown, tips membuat menu pull-down pada wordpress, tutor bikin menu di wordpress

20 Comments ( share your thoughts! )

narsis
Mar 11, 2010

yang ginian aku masih buta, ajarin dasar2nya donk.. hehe

salam narsis

Reply
nadya
Mar 12, 2010

apaan nih mas? CSS, javascript…aku nggak ngerti sama sekali
ditunggu tutorial photoshopnya, please…!

Reply
hanif
Mar 13, 2010

blognya gelap banget nih. tuh apa CSS? PHP?

Reply
- habieb
  Mar 15, 2010
  
  emang kaya gini desain yang diinginkan. untuk ngatur tampilan pakenya CSS.
  
  Reply
- barnest
  Mar 15, 2010
  
  gmn nggak gelap,warnanya dasarnya aja item…
  tapi menurut gue blog ini desainya keren plus gue suka isinya…lagian masih kebaca jelas
  
  Reply
  - adi bowo
    Jul 22, 2010
    
    saran dr pembaca bozz…hehehe
    salam kenal
    segera dicoba nie tutornya
    
    Reply
khairul
Mar 24, 2010

mas yang kode java script nya di paste di widget juga ? dimananya?

Sebelumnya kode yang paling atas itu dibuat dulu kan ?
trus yang kode css nya itu ditaro dimana ?

Reply
- habieb
  Mar 30, 2010
  saran saya file javascriptnya dibuat file sendiri, misal: dropdown.js, trus nanti diikutkan ke themes dg script seperti ini,
```
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/dropdown.js"></script>
```
  kode paling atas hanyalah contoh, kalo mau bikin letakkan kodenya dimana menu mau ditaruh, misal di header.
  
  kalo css dipaste di file css yang udah ada saja.
  Reply
bimaSakti85
Jun 28, 2010

thx sob tipsnya
sepertinya rada njlimet nich

Reply
Kabul
Jul 08, 2010

Terima kasih untuk infonya Mas, sangat berguna sekali untuk saya

Reply
Pengunjung Nyasar
Jul 09, 2010

Saya nyasar po ya, mau mencari artikel-artikel islami di website wisma al hijroh-Pogung Jogjakarta (http://alhijroh.co.cc) kok keluarnya blog berisi tips-tips design ya?

Reply
- habieb
  Jul 09, 2010
  
  mungkin saja mas/mbak… kalo mas/mbaknya ingin mengunjungi situs al hijroh masukin alamatnya jangan http://painthink.com ya jadinya nyasar kesini.
  
  jika mas/mbaknya ingin mendapatkan artikel-artikel tentang islam yang bagus baca saja di http://alhijroh.co.cc ,insyaAlloh sesuai dengan Al Qur’an dan Sunnah dengan pemahaman generasi terbaik islam… saya kenal kok mas/mbak sama pengelola situs al hijroh
  
  Reply
  - Pengunjung Nyasar
    Jul 09, 2010
    
    Maksud saya, sebelumnya kan saya online lewat hape, saya ketiknya http://www.alhijroh.co.cc, tapi keluarnya malah web ini. Saya g paham soal web programing dsb, kok bisa gitu ya? mungkin masnya bisa njelasin??
    
    Reply
    - habieb
      Jul 09, 2010
      
      InsyaAlloh sekarang sudah bisa, kalo ingin penjelasan yang lebih detail tolong saya dikasih alamat email yang masih aktif, insyaAlloh akan saya jawab lewat email
      
      Reply
Pengunjung Nyasar
Jul 09, 2010

Btw Blognya bagus banget…Inspiratif! desainnya juga TOP. Nyasar indah jadinya hehe…sering sering aja di update mas. Kalo boleh tips tentang corelnya juga ada dunk (eh ada g ya, belum liat smua isi blognya) terutama X4.

Reply
- habieb
  Jul 09, 2010
  
  Terimakasih, untuk sarannya saya pertimbangkan
  
  Reply
rajak
Jul 16, 2010

ini yang saya cari selama ne….
tapi gimana cara edit nya ya???
dipaste di template gitu??
trus dimananya???
di bagian mana???
dicopy yang paling atas semua??
mohon pencerahannya…coz blog saya pingin bikin ky gitu
tapi ga bisa……bahasa HTML….
salam kenal kembali………..

Reply
- habieb
  Jul 16, 2010
  
  bisa dibaca komentar khairul beserta jawabannya diatas, kalo masih bingung silakan nanya lagi.
  
  Reply
tomi
Jul 24, 2010

Yang statis dah paham mas.. Tp yg dinamis msh bingung hehehe

Reply
- habieb
  Jul 24, 2010
  
  cuma tinggal ngganti listnya aja dari statis ke dinamis
  
  Reply