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,

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.

30 Comments

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

    salam narsis

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

  3. blognya gelap banget nih. tuh apa CSS? PHP?

    • emang kaya gini desain yang diinginkan. untuk ngatur tampilan pakenya CSS.

    • gmn nggak gelap,warnanya dasarnya aja item…
      tapi menurut gue blog ini desainya keren plus gue suka isinya…lagian masih kebaca jelas

  4. 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 ?

    • 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.

  5. thx sob tipsnya
    sepertinya rada njlimet nich 😛

  6. Terima kasih untuk infonya Mas, sangat berguna sekali untuk saya

  7. Pengunjung Nyasar

    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?

    • mungkin saja mas/mbak… kalo mas/mbaknya ingin mengunjungi situs al hijroh masukin alamatnya jangan https://id.grafisia.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

      • Pengunjung Nyasar

        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??

      • InsyaAlloh sekarang sudah bisa, kalo ingin penjelasan yang lebih detail tolong saya dikasih alamat email yang masih aktif, insyaAlloh akan saya jawab lewat email

  8. Pengunjung Nyasar

    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.

  9. 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………..

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

  11. Topan Aprilia

    thx cuy,,
    tp kebanyakan thema wordpress skrang dh dh ada menu drop down mua tuch,,
    ttep ne article bagus ko,,

  12. ne untuk wordpress yg bayar aja?
    klo tuk yg gratisan bs g pke dropdown?

    • tutorial ini untuk yang punya akses mengedit theme WordPress. Jadi yang blognya gratisan di wordpress.com saran saya pake aja theme yang udah ada drop down menunya.

  13. mas, itu kode nya di taruh dimana?

  14. mau tanya sh kk ngasiih java scrip tu dimana lah masih bingung banget nih, maklum lah masih belajar,

  15. terima kasih untuk infonya mas 🙂

Leave a Reply to narsis Cancel