Membuat menu DropDown posisi tetap

menu dropdown kali ini posisinya tetap maksudnya gini menu drop down ini tidak ikut bergerak walaupun scroll digeser kebawah maupun ke atas!

Kebanggaan kita yang terbesar adalah bukan tidak pernah gagal, tetapi bangkit kembali setiap kali kita jatuh. Confusius

menu dropdown kali ini posisinya tetap maksudnya gini menu drop down ini tidak ikut bergerak walaupun scroll digeser kebawah maupun ke atas!

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, sekarang saya akan share lagi tentang menu-menu drop down.
menu dropdown kali ini agak berbeda dengan sebelumya, menu dropdown kali ini posisinya tetap maksudnya gini menu drop down ini tidak ikut bergerak walaupun scroll digeser kebawah maupun ke atas! contohnya di bagian atas blog ini!

berikut step-by step cara membuat menu-dropdown posisi netep

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

<?php //start menu-menu drop 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 //mulai dari sini adalah style cssnya, sobat dapat pindakan ke atas </head>?>

<style type="text/css">
/******* www.indaam.net *********/
html{padding-top:30px;}
#menu-drop-netep{
background-color:lime;/* warna background utama , silakan ganti dengan value lain */
padding:0;
margin:0;
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%;
-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:1px;/*maksud dari property ini ialah posisinya diatas dengan jarak atas 1 px;*/
left:0;/*maksud dari property ini ialah posisinya dikiri dengan jarak atas 0, jadi posisinya dari atas kiri*/
}
/******* www.indaam.net *********/
#menu-drop-netep a{text-decoration:none;}
/******* www.indaam.net *********/
#menustyle-netep{margin:0;padding:0;}
/******* www.indaam.net *********/
#menustyle-netep ul{
float:left;
list-style:none;
margin:0;
padding:0;}
/******* www.indaam.net *********/
#menustyle-netep li{list-style:none;
margin:0;padding:0;}
/******* www.indaam.net *********/
#menustyle-netep li a, #menustyle-netep li a:link, #menustyle-netep 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 li a:hover, #menustyle-netep 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 li li a, #menustyle-netep li li a:link, #menustyle-netep 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 li{float:left;padding:0;}
#menustyle-netep li a.enclose, #menustyle-netep li a.enclose:visited{border-top:1px solid white;}
#menustyle-netep li ul{z-index: 9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0;}
#menustyle-netep li ul a{width: 140px;}
#menustyle-netep li ul ul{margin:-75px 0 0 171px;}
#menustyle-netep li:hover ul ul, #menustyle-netep li:hover ul ul ul, #menustyle-netep li.sfhover ul ul, #menustyle-netep li.sfhover ul ul ul{left:-999em;}
#menustyle-netep li:hover ul, #menustyle-netep li li:hover ul, #menustyle-netep li li li:hover ul, #menustyle-netep li.sfhover ul, #menustyle-netep li li.sfhover ul, #menustyle-netep li li li.sfhover ul{left:auto;}
#menustyle-netep li:hover, #menustyle-netep li.sfhover{position:static;}

</style>
<?php //end, sampai disini style cssnya?>
<?php //mulai dari sini adalah menu-menunya?>
<div id='menu-drop-netep'>
<ul id='menustyle-netep'>
<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>
</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 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.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.php') ?>

  • maka jadinya akan seperti ini

<?php include (TEMPLATEPATH.'/menu-menu-posisi-netep.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.php') ?>

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

keterangan pada file menu-menu-posisi-netep.php

  • didalam menu-menu-posisi-netep.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.

Indam

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

4 thoughts on “Membuat menu DropDown posisi tetap”

  1. dodi ichwana says:

    salam kenal …. infonya bagus…
    kunjungi juga ya situs ini juga blog saya di ichwana.blogdetik.com dan di blog.unand.ac.id/ichwana
    terima kasih….kenal… infonya bagus/..

  2. wanarata says:

    nice inpo gan :D

    terima kasih banyak atas semua article yang bewrmanfaatnya

    :beer:

  3. danibik says:

    Copas dulu gan

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

+
-