Bikin Drop Down Menu untuk WordPress
HTML & CSS, Web, WordPress | March 10th, 2010Ketika 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.
Incoming search terms:
Related Posts
29 Comments
Leave a Reply
yang ginian aku masih buta, ajarin dasar2nya donk.. hehe
salam narsis
apaan nih mas? CSS, javascript…aku nggak ngerti sama sekali
ditunggu tutorial photoshopnya, please…!
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
saran dr pembaca bozz…hehehe
salam kenal
segera dicoba nie tutornya
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.
thx sob tipsnya
sepertinya rada njlimet nich
Terima kasih untuk infonya Mas, sangat berguna sekali untuk saya
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 http://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
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
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.
Terimakasih, untuk sarannya saya pertimbangkan
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………..
bisa dibaca komentar khairul beserta jawabannya diatas, kalo masih bingung silakan nanya lagi.
Yang statis dah paham mas.. Tp yg dinamis msh bingung hehehe
cuma tinggal ngganti listnya aja dari statis ke dinamis
thx cuy,,
tp kebanyakan thema wordpress skrang dh dh ada menu drop down mua tuch,,
ttep ne article bagus ko,,
bener bro, tapi kalo tau cara bikinnya kan lebih keren…
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.
mas, itu kode nya di taruh dimana?
bisa dibaca dulu jawaban dr pertanyaan khairul di atas
mau tanya sh kk ngasiih java scrip tu dimana lah masih bingung banget nih, maklum lah masih belajar,
tolong dibaca dulu jawaban dr pertanyaan khairul di atas
[...] satu fitur yang harus ada pada theme WordPress adalah drop down menu, dan kita bisa membuatnya dengan mudah. Tetapi masalah muncul ketika kita menaruh video YouTube [...]