TANYA Cara Membuat Dropdown Menu
URL: http://trickmp.multiply.com/notes/item/487
Saya ingin punya menu dropdown di website Multiply saya yang bisa dimunculkan di setiap halaman. Bersyukur, saya sudah bisa membuat seperti di bawah ini:
Itu saya dapatkan dari tool di http://www.myspacegens.com/handler.php?gen=redirect.
Tapi, saya masih kurang puas, saya maunya bisa seperti yang diuraikan di http://multiplydesign.multiply.com/journal/item/258/Dropdown_Menu_-_CSSHTML_combo yang mana penulisnya memberi contoh: (1) drop tut.html dan (2) my dropdown.html. Saya suka contoh yang kedua.
Masalahnya, menu di bawahnya susah diraih. Sebagai ilustrasi, kalau kita sudah mengarahkan mouse ke “Music” lalu mouse turun untuk meraih “Fresh” dan seterusnya, maka menunya malah hilang.
Pertanyaannya adalah:
- Bagaimana mengatasi hilangnya menu pada contoh di grup multiplydesign tersebut?
- Di mana saya bisa mendapatkan semacam layanan widget gratis pembuat menu dropdown, yang bisa di-embed di Multiply?
- Adakah yang punya cara lain?
Terima kasih atas petunjuk teman-teman.
ahmadabdulhaq wrote on Jun 16, ’09
Yang di http:// poetoegaul.multiply.com/journal/item/336/Membuat_Menu_Dropdown itu juga dropdown, tapi saya maunya bisa muncul submenu lagi.
beeglay wrote on Jun 16, ’09
admin…Hallooo??
juriglagu wrote on Jun 16, ’09
beeglay said
hadir… tapi lieur
ahmadabdulhaq wrote on Jun 16, ’09
😀
Thanks atas kehadirannya.
yukinahawmie13 wrote on Jun 16, ’09
tunggu admin…
mau ikutan make menu dropdown, soalnyah 😀
juriglagu wrote on Jun 16, ’09
link pada comment pertamaX juga admin
roomofcreation wrote on Jun 17, ’09
binun…
kakireina wrote on Jun 17, ’09
juriglagu said
knp Poetoe nyah nda ditanya lsg, kali2 ajah dia tau… jd Kang Admin bs ceria lg, nda perlu lieur… ;-D
ahmadabdulhaq wrote on Jun 17, ’09
kakireina said
Ya, barusan sudah saya tanya di halaman webnya.
kakireina wrote on Jun 17, ’09
ahmadabdulhaq said
xixixixixixi… sbenernya aq cuman mo godain JL krn suka lieur ;-D
tp klo dah bener2 ditanya ya Alhamdulillah.. tar di share disini ya mas..
mau nanya Kangmas Lilok tp dia lg sakit, huhuhuhu… nda bowle lama2 liat monitor, mesti byk istirahat. skarang ajah nda kerja, hiks hiks :”(
ahmadabdulhaq wrote on Jun 17, ’09
kakireina said
friewan wrote on Jun 17, ’09
ahmadabdulhaq said
coba di view source disini sepertinya code untuk sub menunya ada.
http:// pan.ahro.googlepages.com/cssdropdownmenu.html
ahmadabdulhaq wrote on Jun 17, ’09, edited on Jun 17, ’09
friewan said
Thanks. Tapi submenunya susah diraih juga. Memang sifat dropdown a la CSS, semuanya begitu ya? Tapi, nggak juga ah. Buktinya punya Bung Poetoe gampang.
laptopmini wrote on Jun 17, ’09
kakireina said
Moga cepet sembuh dan bisa bantuin murid-muridnya disini…
mupengml wrote on Jun 19, ’09, edited on Jun 19, ’09
ahmadabdulhaq said
susah diraih? maksudnya gimana Pak?
padahal sourcenya bisa diambil kannn?
<style type=”text/css”>
.dropdown {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.dropdown ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:104px; height:20px; text-align:center; color:#fff; background:#000; line-height:20px; font-size:11px; overflow:hidden;}
.dropdown ul {padding:0; margin:0; list-style: none;}
.dropdown ul li {float:left; position:relative;}
.dropdown ul li ul {display: none;}
.dropdown ul li:hover a {color:#000; background:#999;}
.dropdown ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.dropdown ul li:hover ul li ul {display: none;}
.dropdown ul li:hover ul li a {display:block; background:#DDD; color:#000;}
.dropdown ul li:hover ul li a:hover {background:#555; color:#000;}
.dropdown ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.dropdown ul li:hover ul li:hover ul.left {left:-105px;}
</style>
</head><body>
<div class=”dropdown”>
<ul>
<li><a href=”#”>DROP DOWN</a>
<ul>
<li><a href=”#”>item 1</a></li>
<li><a href=”#”>item 2</a></li>
<li><a href=”#”>item 3</a></li>
<li><a href=”#”>item 4</a></li>
<li><a href=”#”>item 5</a>
<ul>
<li><a href=”#” rel=”nofollow”>subitem 1</a></li>
<li><a href=”#”>subitem 2</a></li>
<li><a href=”#”>subitem 3</a>v/li>
</ul>
</li>
<li><a href=”#”>item 6</a></li>
<li><a href=”#”>item 7</a></li>
</ul>
</li>
</ul>
</div>
ahmadabdulhaq wrote on Jun 19, ’09, edited on Jun 19, ’09
mupengml said
Bukan masalah source. Tapi masalah tampilan menunya yang sudah jadi. Saya kutip lagi sebagian posting saya di atas:
“Masalahnya, menu di bawahnya susah diraih. Sebagai ilustrasi, kalau kita sudah mengarahkan mouse ke “Music” lalu mouse turun untuk meraih “Fresh” dan seterusnya, maka menunya malah hilang.”
Perhatikan gambar ini:
Kalau nggak percaya, tes saja sendiri menunya di http:// images.spunj.multiply.com/attachment/0/SGkVhgoKCB0AADdE2Xk1/my%20dropdown.html?nmid=103520531 .
mupengml wrote on Jun 19, ’09
ahmadabdulhaq said
“Masalahnya, menu di bawahnya susah diraih. Sebagai ilustrasi, kalau kita sudah mengarahkan mouse ke “Music” lalu mouse turun untuk meraih “Fresh” dan seterusnya, maka menunya malah hilang.”
Perhatikan gambar ini:
Kalau nggak percaya, tes saja sendiri menunya di http://
images.spunj.multiply.com/attachment/0/SGkVhgoKCB0AADdE2Xk1/my%20dropdown.html?nmid=103520531 .
ups maaf Pak..baru nyadar saya..emang iya..
kadang nyantol kadang meleset..heheh
kode yg anehhhh….
jd pengen buat……
ahmadabdulhaq wrote on Jun 22, ’09
Alhamdulillah. Ketemu yang lebih baik: http:// www .cssplay.co.uk/menus/final_drop.html. Kayanya mudah ditiru.
ahmadabdulhaq wrote on Jun 23, ’09
Perkembangan terakhir
Saya sudah berhasil memasang drop-down menu pada MP pribadi saya lengkap dengan submenu-submenunya. Menu tersebut merupakan hasil modifikasi dari contoh di halaman http:// www .cssplay.co.uk/menus/final_drop.html. Semua kode HTML dan CSS yang kita butuhkan tersedia cukup jelas pada halaman tersebut. Hasilnya:
Pada gambar di atas terlihat menu drop-down berada pada site title (header). Namun, sebenarnya saya memasang kode HTML-nya pada side-bar. Kenapa begitu? Alasannya bukan karena saya punya account premium, tapi karena saya punya problem ketika memasang kode menu tersebut pada header.
Sebuah problem lama sebenarnya, yang pernah saya tanyakan pada grup “admingrup” (http:// admingrup.multiply.com/notes/item/42). Yaitu, ketika saya pasang kode menu pada header, semua teks yang ada pada menu
muncul semua pada titlebar situs saya, yang menyebabkan titlebar saya menjadi terlalu amat sangat panjang, sampai judul postingnya tidak terlihat.
mupengml wrote on Jun 23, ’09, edited on Jun 23, ’09
ahmadabdulhaq said
Saya sudah berhasil memasang drop-down menu pada MP pribadi saya lengkap dengan submenu-submenunya. Menu tersebut merupakan hasil modifikasi dari contoh di halaman http:// www .cssplay.co.uk/menus/final_drop.html. Semua kode HTML dan CSS yang kita butuhkan tersedia cukup jelas pada halaman tersebut. Hasilnya:
Pada gambar di atas terlihat menu drop-down berada pada site title (header). Namun, sebenarnya saya memasang kode HTML-nya pada side-bar. Kenapa begitu? Alasannya bukan karena saya punya account premium, tapi karena saya punya problem ketika memasang kode menu tersebut pada header.
Sebuah problem lama sebenarnya, yang pernah saya tanyakan pada grup “admingrup” (http:// admingrup.multiply.com/notes/item/42). Yaitu, ketika saya pasang kode menu pada header, semua teks yang ada pada menu
muncul semua pada titlebar situs saya, yang menyebabkan titlebar saya menjadi terlalu amat sangat panjang, sampai judul postingnya tidak terlihat.
hmm..iya juga yahh..mungkin ini memang
itu karena link masing2 menu & sub-menu punya sampeyan menggunakan text asli (disebut apa yahh)….
mungkin bisa disiasati dengan menggunakan gambar tombol yang sudah terlebih dahulu diberi tulisan, seperti pada tombol google translate di site Om Lilok, (beliau memakai CSS untuk memberi background image)
thanks buat Om Lilok udah ngasi ijin intip CSS kemaren2.. 🙂
ahmadabdulhaq wrote on Jun 23, ’09
mupengml said
Memang. Tahu generator yang ampuh untuk buat image seperti itu? Biasanya sih saya pakai MS FrontPage. Tapi repot juga kalau item menunya banyak 🙂
mupengml wrote on Jun 23, ’09
ahmadabdulhaq said
aduuhh…memang paling bagus membuat sendiri..atau ke situs penyedia button gratis, ini ada beberapa link yg mungkin bisa membantu
http:// www .allwebdesignresources.com/webdesignblogs/graphics/free-online-button-makers-creators-generators-mega-list-of-free-button-generation-tools/
http:// mashable.com/2007/10/28/20-button-badge-makers/
kalau dirasa masih kurang, bisa search di goggle, keywordnya “online button generator”
arzackfishfarm wrote on Jul 28, ’09
wah tq U bngt tipnya aku masih baru dimultiply….
3snahouse wrote on Jul 31, ’09
udah liat STU nicholsnya…
1.cuman bnung hanya bisa liat HTML codenya saja, tidak dengan CSSnya, kenapa yah?
2. kode2 HTML nya sebaiknya dimasukkan kemana? kalau di titlebar pengalaman, judul nya jadi terlihat panjang di tab browser?
trims..
3sna
ahmadabdulhaq wrote on Aug 2, ’09
3snahouse said
Sebagian besar, css-nya jadi satu dengan HTML yang bersangkutan letaknya di header HTML, diapit tag <style type=”text/css”>…<script>.
ahmadabdulhaq wrote on Aug 2, ’09
3snahouse said
Itu pengalaman semua orang, termasuk juga saya. Kebetulan saya punya account premium, sehingga saya bisa letakkan di rail.
Kalau ngotot ingin meletakkan di site title, Anda harus mengorbankan judul posting Anda. Dengan menyisipkan sebanyak-banyaknya karakter non-breaking space (kode HTML: ) antara judul situs Anda dan kode-kode menu, maka judul Anda tidak akan lagi terlihat panjang. Untuk lebih jelasnya, Anda bisa meniru situs Pak Tito (http:// raoseco.multiply.com) yang memodifikasi menu MP menjadi bahasa Indonesia.
onlinetop wrote on Mar 16, ’10
salam bagus ya …
zahrazuuhra wrote on Mar 17, ’11
Gimana cara ganti nama situs di multiply?? Misalnya dari Yuuri’s Site menjadi Yuuri Imut?
ahmadabdulhaq wrote on Mar 17, ’11
zahrazuuhra said
1. Buka situsmu.
2. Klik “Customize My Site” di sidebar (bagian kanan situsmu).
3. Klik “Edit” pada bagian judul.
4. Ketik judul yang kamu kehendaki.
5. Selesai. Klik “Done” di area kuning di atas.
puritama wrote on Feb 19
pengen pake…
udah coba tapi menunya malah ilang entah kemana :))