Membuat Menu DropDown posisi netep dengan tombol tutup

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!

Sukses seringkali datang pada mereka yang berani bertindak, dan jarang menghampiri penakut yang tidak berani mengambil konsekuensi. Jawaharlal Nehru

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!

Last Modif at July 8th, 2011

Silakan ikuti url berikut untuk tutorial versi terbaru :

http://www.indaam.net/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.net *********/
#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.net *********/
#menu-drop-netep-dgn-tombol-tutup a{text-decoration:none;}
/******* www.indaam.net *********/
#menustyle-netep-dgn-tombol-tutup{margin:0;padding:0;}
/******* www.indaam.net *********/
#menustyle-netep-dgn-tombol-tutup ul{
float:left;
list-style:none;
margin:0;
padding:0;}
/******* www.indaam.net *********/
#menustyle-netep-dgn-tombol-tutup li{list-style:none;
margin:0;padding:0;text-align:left;}
/******* www.indaam.net *********/
#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.net *********/
#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.net *********/
#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.net *********/
#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.net' target="_blank"><?php //bisa diganti ?>indaam.net</a></li>
<li><a href='http://www.indaam.net/about'><?php //bisa diganti ?>indaam.net/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.net
?>
<?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!

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-