Membuat Menu DropDown posisi netep dengan tombol tutup

Silakan ikuti url berikut untuk tutorial versi terbaru :

http://www.indaam.com/2011/06/imenu-dropdown-menu-versi-2-for-wordpress-dan-blogspot/

hy blogger!
kemarin saya sudah buat tutorial tentang menu-menu drop dan menu-menu drop posisi netap, sekarang saya akan share lagi tentang menu-menu drop down.
menu dropdown kali ini agak berbeda dengan sebelumya, menu dropdown kali ini di lengkapi dengan tombol tutup, jadi jika di klik menu ini akan hilang!

berikut step-by step cara membuat menu-dropdown posisi netep dengan tombol tutup

• masuk ke directory theme sobat
• …wp-content/themes/nama-theme-sobat/
• buat file baru dengan nama menu-menu-posisi-netep-dengan-tombol-tutup.php di directory/folder theme sobat(misal di default atau classic)
• ekstensinya harus [dot]php
• edit menu-menu-posisi-netep-dengan-tombol-tutup.php
• kemudian isi dengan style, script, markup berikut

<?php //start menu-menu drop posisi netep dengan kategori, pages, archive, rss?>
<?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 //start javascript ?>
<script type="text/javascript">
//<![CDATA[
var menututup_arr = new Array();
var menututup_clear = new Array();
function menututupFloat(menututup) {
menututup_arr[menututup_arr.length] = this;
var menututuppointer = eval(menututup_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.menututupsrc = document.all? document.all[menututup] : document.getElementById(menututup);
this.menututupsrc.height = this.menututupsrc.offsetHeight;
this.menututupheight = this.cmode.clientHeight;
this.menututupoffset = menututupGetOffsetY(menututup_arr[menututuppointer]);
var menututupbar = 'menututup_clear['+menututuppointer+'] = setInterval("menututupFloatInit(menututup_arr['+menututuppointer+'])",1);';
menututupbar = menututupbar;
eval(menututupbar);
}
function menututupGetOffsetY(menututup) {
var menututupTotOffset = parseInt(menututup.menututupsrc.offsetTop);
var parentOffset = menututup.menututupsrc.offsetParent;
while ( parentOffset != null ) {
menututupTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return menututupTotOffset;
}
function menututupFloatInit(menututup) {
menututup.pagetop = menututup.cmode.scrollTop;
menututup.menututupsrc.style.top = menututup.pagetop - menututup.menututupoffset + "px";
}
function closeTopAds() {
document.getElementById("menu-drop-netep-dgn-tombol-tutup").style.visibility = "hidden";
}
//]]>
</script>
<?php //sampai disini javascript ?>
<?php //mulai dari sini adalah style cssnya, sobat dapat pindakan ke atas </head>?>
<style type="text/css">
/******* www.indaam.com *********/
#menu-drop-netep-dgn-tombol-tutup{
background-color:lime;/* warna background utama , silakan ganti dengan value lain */
padding:0;
margin:0;
font-family:times;/* warna 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%;
-moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
text-transform:capitalize;
position:fixed;
top:45px;/*maksud dari property ini ialah posisinya diatas dengan jarak atas 45 px, ubah 45px menjadi 0 agar posisinya rapat;*/
left:0;/*maksud dari property ini ialah posisinya dikiri dengan jarak atas 0, jadi posisinya dari atas kiri*/
}
/******* www.indaam.com *********/
#menu-drop-netep-dgn-tombol-tutup a{text-decoration:none;}
/******* www.indaam.com *********/
#menustyle-netep-dgn-tombol-tutup{margin:0;padding:0;}
/******* www.indaam.com *********/
#menustyle-netep-dgn-tombol-tutup ul{
float:left;
list-style:none;
margin:0;
padding:0;}
/******* www.indaam.com *********/
#menustyle-netep-dgn-tombol-tutup li{list-style:none;
margin:0;padding:0;text-align:left;}
/******* www.indaam.com *********/
#menustyle-netep-dgn-tombol-tutup li a, #menustyle-netep-dgn-tombol-tutup li a:link, #menustyle-netep-dgn-tombol-tutup 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-netep-dgn-tombol-tutup li a:hover, #menustyle-netep-dgn-tombol-tutup 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-netep-dgn-tombol-tutup li li a, #menustyle-netep-dgn-tombol-tutup li li a:link, #menustyle-netep-dgn-tombol-tutup 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-netep-dgn-tombol-tutup li{float:left;padding:0;}
#menustyle-netep-dgn-tombol-tutup li a.enclose, #menustyle-netep-dgn-tombol-tutup li a.enclose:visited{border-top:1px solid white;}
#menustyle-netep-dgn-tombol-tutup li ul{z-index: 9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0;}
#menustyle-netep-dgn-tombol-tutup li ul a{width: 140px;}
#menustyle-netep-dgn-tombol-tutup li ul ul{margin:-75px 0 0 171px;}
#menustyle-netep-dgn-tombol-tutup li:hover ul ul, #menustyle-netep-dgn-tombol-tutup li:hover ul ul ul, #menustyle-netep-dgn-tombol-tutup li.sfhover ul ul, #menustyle-netep-dgn-tombol-tutup li.sfhover ul ul ul{left:-999em;}
#menustyle-netep-dgn-tombol-tutup li:hover ul, #menustyle-netep-dgn-tombol-tutup li li:hover ul, #menustyle-netep-dgn-tombol-tutup li li li:hover ul, #menustyle-netep-dgn-tombol-tutup li.sfhover ul, #menustyle-netep-dgn-tombol-tutup li li.sfhover ul, #menustyle-netep-dgn-tombol-tutup li li li.sfhover ul{left:auto;}
#menustyle-netep-dgn-tombol-tutup li:hover, #menustyle-netep-dgn-tombol-tutup li.sfhover{position:static;}
</style>
<?php //end, sampai disini style cssnya?>
<?php //mulai dari sini adalah menu-menunya?>
<div id='menu-drop-netep-dgn-tombol-tutup'>
<ul id='menustyle-netep-dgn-tombol-tutup'>
<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><li><a style="background-color:red;" href='javascript:void(0)' onclick="closeTopAds();return false;">tutup</a></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-dengan-tombol-tutup yang kita buat tadi belum bisa ditampilkan, karena kita tidak menambahkan secara langsung kedalam theme kita(lebih jauh tentang include cari di google).
nah, agar menu menu ini berfungsi kita wajib menambahkan ini

<?php include (TEMPLATEPATH.'/menu-menu-posisi-netep-dengan-tombol-tutup.php') ?>
<!-- kedalam file theme kita -->

berikut caranya

• buka/edit footer.php
• pada footer.php
• cari

</body>

• kemudian tambahkan script ini tepat di atas </body>

<?php include (TEMPLATEPATH.'/menu-menu-posisi-netep-dengan-tombol-tutup.php') ?>

• maka jadinya akan seperti ini

<?php include (TEMPLATEPATH.'/menu-menu-posisi-netep-dengan-tombol-tutup.php') ?>
</body>
</html>

• setelah itu save/simpan/update file
• lihat blog sobat
• ( jika menunya tidak muncul, normalkan kembali footer.php , kemudian
• cari <body> biasanya ada di header.php
• kemudian tambahkan ini

<?php include (TEMPLATEPATH.'/menu-menu-posisi-netep-dengan-tombol-tutup.php') ?>

• tepat di bawah <body>
• update file
• lihat blog

keterangan pada file menu-menu-posisi-netep-dengan-tombol-tutup.php

• didalam menu-menu-posisi-netep-dengan-tombol-tutup.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
• warna mirip(pink) adalah javascript(dapat di pindakan/cut keatas tag </head>)
• pada style cssnya, setelah karakter titik dua) itu adalah value jadi bisa diganti dengan valaue lain! fungsinya agar tempilanya berubah!