Drop Down Menu List ~ Ada Nggak

Drop Down Menu adalah satu set menu horizontal yang dipadu dengan sub menu yang vertikal yang dalam penggunaannya berfungsi sebagai menu yang bisa diklik untuk membuka halaman baru yang di inginkan. Cara Membuat menu horizontal dan sub menu yang berisi daftar atau list menu banyak digunakan dengan kode Javascript dan HTML. Aplikasi ini dalam banyak tipe selalu menggunakan satu set javascript yang di instal ke dalam web server yang berlokasi di file web yang dikelola atau web server hosting yang didaftarkan. Cara mengunggah atau mengupload javascript bagi awam tentu sangat rumit. Selain rumit, javascript hosting biasanya berbayar pula. Penggunaan Drop Down menu sebetulnya tidak mesti ada dalam blog karena banyak cara yang digunakan untuk membuat tab di sidebar atau membuat link-link dengan cara yang mudah. Tapi jika anda ingin punya halaman blog atau web yang lebih profesional, maka tab drop menu mutlak diperlukan.

Kali ini kita tidak membahas cara membuat drop down menu dengan javascript, tetapi kita sedang membuat drop down menu dengan cara yang lebih mudah dan simple dengan HTML yang disemat di dalam CSS. Jadi tidak dibutuhkan hosting javascript, mengunggah kode javascript dan kemudian mengaplikasikannya ke blog. Tidak sulit tapi cukup dengan mengutak-atik kode html dan CSS Template blogger anda. Semudah itu,maka blog anda akan lebih indah dari sebelumnya.

Menu drop down menggunakan kode CSS dengan pemakaian kode List Item yang dipakai untuk mengurutkan nomer yaitu : UL dan LI.
Inilah trik yang digunakan oleh http://www.premiumbloggertemplates.com/. Thank you Premiumbloggertemplates.com!

Langkah-langkah Membuat Drop Down Menu

Pertama: Sign Ke Blogger. Lalu pilih blog anda. Masuk ke >>Rancangan >>Element Halaman, Kemudian klik saja << Edit HTML. Saya fikir anda sudah terbiasa dengan ini Tapi jangan lupa, download dulu template anda untuk menghindari kesalahan mengedit template.

Langkah Kedua: Masukkan kode kopi paste kode di bawah ini ke dalam CSS di bagian skin, dimana saja sebelum </style>>/head>

#catmenucontainer{height:39px;display:block;padding:0 0 0 0;font:12px Arial,Tahoma,Century gothic,verdana,sans-serif;font-weight:normal;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivpOasHltjto4B3DGznZb4gAGfs8oAUojAtUDRIEXyf9HPyyQebVMzv8tq92tlyCl-XvJPTEhK-e45OItaD95Bh7bdO1DnJu-sPk4rQaAbk03xtwZfFDInIOw9OWL5yciCjoueUeUyM-w/s1600/catmenu.png) repeat-x}
#catmenu{margin:0 auto;padding:0 0;height:39px;overflow:hidden;width:1000px}
#catmenu ul{float:left;list-style:none;margin:0;padding:0 10px}
#catmenu li{float:left;list-style:none;margin:0;padding:0}
#catmenu li a,#catmenu li a:link,#catmenu li a:visited{color:#801d07;display:block;margin:0;padding:0 10px;line-height:39px;text-shadow:1px 1px 0 #ff8b25}
#catmenu li a:hover,#catmenu li a:active{color:#000;margin:0;padding:0 10px;line-height:39px;text-decoration:none}
#catmenu li.current_page_item a{color:#fff}
#catmenu li li a,#catmenu li li a:link,#catmenu li li a:visited{width:150px;color:#fff;float:none;margin:0;padding:0 10px;font-weight:normal;line-height:30px;text-shadow:none}
#catmenu li li a:hover,#catmenu li li a:active{background:#DB6A18;color:#fff;padding:0 10px;line-height:30px;border-left:none;border-right:none}
#catmenu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:5px;background:#CC5A11}
#catmenu li li{}
#catmenu li ul a{width:140px}
#catmenu li ul a:hover,#catmenu li ul a:active{}
#catmenu li ul ul{margin:-35px 0 0 170px}
#catmenu li:hover ul ul,#catmenu li:hover ul ul ul,#catmenu li.sfhover1 ul ul,#catmenu li.sfhover1 ul ul ul{left:-999em}
#catmenu li:hover ul,#catmenu li li:hover ul,#catmenu li li li:hover ul,#catmenu li.sfhover ul,#catmenu li li.sfhover1 ul,#catmenu li li li.sfhover1 ul{left:auto}
#catmenu li:hover,#catmenu li.sfhover1{position:static}

Langkah Ketiga: Copy Paste kode di bawah ini ke dalam susunan >div>, dimana saja yang anda inginkan.

<div id='catmenucontainer'>
<div id='catmenu'>
<ul>

<li class='current_page_item'>Home

<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Blog</a></li>

<li><a href='#'>Level 1</a>
<ul class='sub-menu'>
<li><a href='#'>Level 2</a>
<ul class='sub-menu'>
<li><a href='#'>Level 3</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Page</a>
<ul class='sub-menu'>

<li><a href='#'>Child page 1</a>
<ul class='sub-menu'>
<li><a href='#'>Child page 2</a></li>
</ul>
</li>

<li><a href='#'>Page with comments</a></li>
<li><a href='#'>Page with comments disabled</a></li>

</ul>
</li>

<li><a href='#'>Full wide</a></li>

<li><a href='#'>arrangement</a>
<ul class='sub-menu'>
<li><a href='#'>aciform</a></li>
<li><a href='#'>broder</a></li>
</ul>
</li>

<li><a href='#'>Cat A</a>
<ul class='sub-menu'>
<li><a href='#'>Cat B</a></li>
<li><a href='#'>Cat C</a></li>
</ul>
</li>

</ul>
</div>
</div>
<div style='clear:both;'/>

Langkah ke Empat: Save template anda, dan lihat hasilnya akan muncul.

Namun ada beberapa hal yang perlu dibenahi lagi.

Pertama: Link (anchor) yang masih kosong karena itu perlu diganti dengan milik anda sendiri. Kode yang seperti ini <a href='#'>Child Page</> perlu diganti misalnya dengan <a href='http://apasaja.com'>Apasaja</>

Kedua: Tapi ini pilihan, tidak mesti digunakan. Di dalam list item atau <li>...</>bisa letakkan javascript feed burner yang berisi list dari judul blog anda dalam bentuk list feed yang bisa anda edit di feedburner.com. Dengan cara ini, anda tidak perlu keluar masuk mengedit template hanya untuk membuat list drop menu baru dari blog anda. Namun jika anda lebih nyaman secara manual mengedit list drop menu, tidak akan berpengaruh pada tampilan blog anda.

Ketiga. Background dan ukuran lebar bisa disesuaikan dengan selera.
Seharusnya kode CSS ini sudah bekerja dan menu dropt down list item sudah bekerja di blog anda.

Cara di atas sebetulnya bisa dibuat lebih mudah. Lebih mudah maksudnya template anda bekerja dengan cara default. Cara di atas itu relatif rumit karena untuk mengedit data link yang baru maka anda mesti harus mengutak atik kode template, dan jika salah mengedit template bisa rusak. Secara default, menginput kode html atau javascript biasanya cukup mudah dengan hanya mengutak atik Elemen Halaman, dan mengklik "Add Gadget" menambah gadget lalu mengetik kode html yang diperlukan. Cara diatas tidak berlaku dalam hal ini, karena untuk menginput data baru maka kita harus buka Edit HTML, mengedit Template. Saya fikir ini cukup ribet bukan?

Karena itu gunakan Cara berikut ini:

Cara Simple Membuat Drop Down Menu

1. Gunakan cara pertama di atas yaitu Copy paste kode ini:

#catmenucontainer{height:39px;display:block;padding:0 0 0 0;font:12px Arial,Tahoma,Century gothic,verdana,sans-serif;font-weight:normal;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivpOasHltjto4B3DGznZb4gAGfs8oAUojAtUDRIEXyf9HPyyQebVMzv8tq92tlyCl-XvJPTEhK-e45OItaD95Bh7bdO1DnJu-sPk4rQaAbk03xtwZfFDInIOw9OWL5yciCjoueUeUyM-w/s1600/catmenu.png) repeat-x}
#catmenu{margin:0 auto;padding:0 0;height:39px;overflow:hidden;width:1000px}
#catmenu ul{float:left;list-style:none;margin:0;padding:0 10px}
#catmenu li{float:left;list-style:none;margin:0;padding:0}
#catmenu li a,#catmenu li a:link,#catmenu li a:visited{color:#801d07;display:block;margin:0;padding:0 10px;line-height:39px;text-shadow:1px 1px 0 #ff8b25}
#catmenu li a:hover,#catmenu li a:active{color:#000;margin:0;padding:0 10px;line-height:39px;text-decoration:none}
#catmenu li.current_page_item a{color:#fff}
#catmenu li li a,#catmenu li li a:link,#catmenu li li a:visited{width:150px;color:#fff;float:none;margin:0;padding:0 10px;font-weight:normal;line-height:30px;text-shadow:none}
#catmenu li li a:hover,#catmenu li li a:active{background:#DB6A18;color:#fff;padding:0 10px;line-height:30px;border-left:none;border-right:none}
#catmenu li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:5px;background:#CC5A11}
#catmenu li li{}
#catmenu li ul a{width:140px}
#catmenu li ul a:hover,#catmenu li ul a:active{}
#catmenu li ul ul{margin:-35px 0 0 170px}
#catmenu li:hover ul ul,#catmenu li:hover ul ul ul,#catmenu li.sfhover1 ul ul,#catmenu li.sfhover1 ul ul ul{left:-999em}
#catmenu li:hover ul,#catmenu li li:hover ul,#catmenu li li li:hover ul,#catmenu li.sfhover ul,#catmenu li li.sfhover1 ul,#catmenu li li li.sfhover1 ul{left:auto}
#catmenu li:hover,#catmenu li.sfhover1{position:static}

2. Letakkan kode di atas pada Skin sebelum </head>
3. Save template anda, kemudian klik Elemen Halaman.
4. Pilih Add Gadget, atau Tambah Gadget, dimana saja anda ingin kode ini dipake. lalu:
4. Copy Paste kode di bawah ini:

<div id='catmenucontainer'>
<div id='catmenu'>
<ul>

<li class='current_page_item'>Home

<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Blog</a></li>

<li><a href='#'>Level 1</a>
<ul class='sub-menu'>
<li><a href='#'>Level 2</a>
<ul class='sub-menu'>
<li><a href='#'>Level 3</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='#'>Parent Page</a>
<ul class='sub-menu'>

<li><a href='#'>Child page 1</a>
<ul class='sub-menu'>
<li><a href='#'>Child page 2</a></li>
</ul>
</li>

<li><a href='#'>Page with comments</a></li>
<li><a href='#'>Page with comments disabled</a></li>

</ul>
</li>

<li><a href='#'>Full wide</a></li>

<li><a href='#'>arrangement</a>
<ul class='sub-menu'>
<li><a href='#'>aciform</a></li>
<li><a href='#'>broder</a></li>
</ul>
</li>

<li><a href='#'>Cat A</a>
<ul class='sub-menu'>
<li><a href='#'>Cat B</a></li>
<li><a href='#'>Cat C</a></li>
</ul>
</li>

</ul>
</div>
</div>

5. Save kode html tadi, lalu buka blog anda. Seharusnya kode itu sudah bekerja dengan baik di blog anda. Jika belum puas tampilannya, pasti tidak sulit dan saya fikir anda tahu cara memperbaikinya.

Kesimpulannya: Tidak mesti menggunakan javascript hanya untuk membuat Drop Down Menulist. Dan kode CSS bisa membuat tampilan menu drop down profesional.

Selamat mencoba!!!

Jika anda tertarik untuk tahu bisnis Rentenir, patut dilihat halaman iniKaya Cara Rentenir

Post title : Drop Down Menu List
URL post : https://adanggak.blogspot.com/2011/04/drop-down-menu-list.html