Cara membuat menu dropdown dengan submenu

hy blogger!
untuk membuat sebuah blog yang memiliki tampilan lebih keren, ada baiknya kita menambahkan menu-menu!
nah, disini saya akan share tentang cara membuat menu-menu dropdown yang dilengkapi dengan sub-sub menu, pada sub-submenu ini, sudah saya tambahkan, dropdown karegory, dropdown archive, dropdown pages, dropdown rss, serta beberapa sub-sub menu lainya, untuk contohnya ada di bagian atas blog ini!

Berikut Step-By Step Cara Membuat Menu-Dropdown

• Masuk ke directory theme sobat
• …Wp-content/themes/nama-theme-sobat/
• Buat file baru dengan nama menu-menu-dropdown-keren.php di directory/folder theme sobat(misal di default atau classic)
• Ekstensinya harus [dot]php
• Edit menu-menu-dropdown-keren.php
• Kemudian isi dengan style, script, markup berikut


<?php
//style css dibawah langsung saya masukan ke dalam tag body, sobat bisa memindakan style cssnya kedalam tag head
//sobat juga bisa merubah style cssnya, sobat bisa mengedit semuanya atau ubah yang saya beri komentar
// yang terpenting adalah ganti warnanya.red, lime, yellow, black, silakan ganti dengan warna lain!
?>
<?php //mulai dari sini adalah style cssnya, sobat dapat pindakan ke atas </head>?><?php //start menu-menu drop dengan kategori, pages, archive, rss?>
<style type="text/css">
/******* www.indaam.com *********/
#menudrop{
background-color:lime;/* warna background utama , silakan ganti dengan value lain */
padding:0;
margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
margin-left:1px;/* jarak luar kiri , silakan ganti dengan value lain */
margin-right:1px;/* jarak luar kanan , silakan ganti dengan value lain */
overflow:hidden;
font-family:times;/* werna background utama , silakan ganti dengan value lain */
font-size:18px;/* ukuran font, silakan ganti dengan value lain */
font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
width:100%;/*lebar background belakang , silakan atur lebarnya */
-moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
text-transform:capitalize;
}
/******* www.indaam.com *********/
#menudrop a{text-decoration:none;}
/******* www.indaam.com *********/
#menustyle{margin:0;padding:0;}
/******* www.indaam.com *********/
#menustyle ul{
float:left;
list-style:none;
margin:0;
padding:0;}
/******* www.indaam.com *********/
#menustyle li{list-style:none;
margin:0;padding:0;}
/******* www.indaam.com *********/
#menustyle li a, #menustyle li a:link, #menustyle li a:visited{
background:yellow;/* warna background link, silakan ganti dengan value lain */
color:black;/* warna text link, silakan ganti dengan value lain */
display:block;
padding:14px 10px 13px 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
-moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
}
/******* www.indaam.com *********/
#menustyle li a:hover, #menustyle li a:active{
background-color:red;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
margin:0;
-moz-border-radius:4px;
}
/******* www.indaam.com *********/
#menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
width:350px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
float:none;
margin:0;
font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
}
/******* www.indaam.com *********/
#menustyle li{float:left;padding:0;}
#menustyle li a.enclose, #menustyle li a.enclose:visited{border-top:1px solid white;}
#menustyle li ul{z-index: 9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0;}
#menustyle li ul a{width: 140px;}
#menustyle li ul ul{margin:-75px 0 0 171px;}
#menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{left:-999em;}
#menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul, #menustyle li li li.sfhover ul{left:auto;}
#menustyle li:hover, #menustyle li.sfhover{position:static;}
</style>
<?php //end, sampai disini style cssnya?>
<?php //mulai dari sini adalah menu-menunya?>
<div id='menudrop'>
<ul id='menustyle'>
<li><a href='<?php bloginfo('url'); ?>/'>home</a></li>
<li><a href='javascript:void(0)'>pages</a>
<ul>
<?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
</ul></li>
<li><a href='javascript:void(0)'>category</a>
<ul>
<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
</ul></li>
<li><a href='javascript:void(0)'>archive</a>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul></li>
<li><a href='javascript:void(0)'>rss</a>
<ul>
<li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li>
</ul></li>
<li><a href='javascript:void(0)'>other link</a>
<ul>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
</ul></li>
<li><a href='javascript:void(0)'>other link 2</a>
<ul>
<li><a href='javascript:void(0)'>other link 2 a</a>
<ul>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 1</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 2</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 3</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 4</a></li>
</ul>
</li>
<li><a href='javascript:void(0)'>other link 2 b</a>
<ul>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li>
</ul>
</li>
<li><a href='javascript:void(0)'>other link 2 c</a>
<ul>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 6</a></li>
</ul>
</li>
<li>
<a href='javascript:void(0)'>other link 2 d</a>
<ul>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 1</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 2</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 3</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 4</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 5</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 6</a></li>
<li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 7</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='javascript:void(0)'>other link 3</a><ul><?php //yang dibawah hanya contoh ?>
<li><a href='http://www.indaam.com' target="_blank"><?php //bisa diganti ?>indaam.com</a></li>
<li><a href='http://www.indaam.com/about'><?php //bisa diganti ?>indaam.com/about</a></li>
<li><a href='http://www.salsabeela.com'><?php //bisa diganti ?>salasabeela</a></li>
</ul>
</li>
</ul>
</div>
<?php //sampai sini adalah menu-menunya?>
<?php
//sobat juga dapat mengganti linknya, ganti href='javascript:void(0)' dengan link lain kemudian sesuaikan
//salam kenal dari www.indaam.com
?>
<?php //end menu-menu drop dengan kategori, pages, archive, rss?>

• Pastikan semua ter-copy
• Setelah itu save

Langkah Selanjutnya, Ialah Menambahkan Include

File menu dropdown yang kita buat tadi belum bisa ditampilkan, karena kita tidak menambahkan secara langsung di di index.php, single.php, maupun archive.php(lebih jauh tentang include cari di google).
nah, agar menu menu ini berfungsi kita wajib menambahkan ini

<?php include (TEMPLATEPATH.'/menu-menu-dropdown-keren.php') ?>
<!– kedalam, index.php, single.php, home.php dll –>

Berikut Caranya

Buka/Edit Index.Php

• Pada index.php
• Cari . . . . get_header(); ?>
• Kemudian tambahkan script ini tepat di bawahnya

<?php include (TEMPLATEPATH.'/menu-menu-dropdown-keren.php') ?>

• Setelah itu save/simpan/update file
• Lihat homepage blog sobat( jika menunya tidak muncul, edit/buka home.php)
• Kemudian lakukan hal yang sama seperti di index.php

Keteranagan

• Buka/edit juga(jika ada), single.php, search.php, 404.php, archive.php, tag.php,page.php, home.php
• Kemudian lakukan hal yang sama seperti index.php

Keterangan Pada File Menu-Menu-Dropdown-Keren.Php

• Didalam menu-menu-dropdown-keren.php yang kita buat tadi, berisikan source html, style css, dan php
• Khusus cssnya, bisa dipindahkan keatas tag </head> (biasanya di header.php) atau juga bisa di pindahkan/cut ke style.css
• Yang bercetak tebal adalah menu-menu awal, sedangkan
• Yang bercetak miring adalah sub-sub menu
• Text warna kuning adalah komentar php, jadi abaikan saja
• Warna merah adalah url yang not vailid alias url yang tidak dianggap
• Warna biru langit adalah style css
• Pada style cssnya, setelah karakter :(titik dua) itu adalah value jadi bisa diganti dengan valaue lain! fungsinya agar tempilanya berubah!

Kelebihan dari menu-menu drop ini adalah tidak menggunakan javascipt jadi masalah ngerelodnya ngga perlu dipusingkan! jika ada pertanyaan silakan beri komentar.

sumber : www.indaam.com