Membuat Drop Down Menu Pada Top Menu Joomla

Diawali dengan perasaan ribet dan kurang jelas pada sumber-sumber yang memberikan langkah-langkah pembuatan drop down menu di internet, maka setelah mencoba sendiri karena kebutuhan seorang teman. Maka tertulislah apa yang terltulis.. oh teman terima kasih atas pertanyaanmu yang membakar rasa keingintauanku

Sebenarnya untuk membuat dropdown menu itu perkara yang bukan susah atau sulit, tanpa menggunakan module extension pun bisa, yaitu menggunakan pure css style. Dalam hal ini kita hanya melakukan designing disisi css file kita saja tanpa tambah-tambahan yang lain . Memang disini ada kendala, belum semua browser bisa mengadopsi css element level 3 ini, walaupun demikian, untuk IE khususnya, di versi 8 sudah bisa diterapkan.

Permasalahannya sepele sebenarnya, di <>

Kondisi saat praktek ini :

• Versi Joomla 1.5x
• Template Clarify
• Saat install joomla menggunakan sample data

Perhatikan ID top menu anda menggunakan ”top-menu” atau “topmenu” biasanya untuk ID kalo di css tandanya “#” sementara class tandanya “.” , dan untuk melihat Id top menu kita maka masuk ke Menu->Top Menu dan perhatikan namanya. Berikut contoh kode css dengan ID “topmenu” :

#topmenu .menu{ /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#topmenu .menu ul{
display: inline-block;
list-style: none;
}
#topmenu .menu a {
display: block;
padding: 8px 10px;
}

#topmenu .menu li { /* all list items */
float: left;
margin:0;
padding:0;
}
#topmenu .menu li li{
width: 15em;
}
#topmenu .menu li ul { /* second-level lists */
width: 15em;
position: absolute;
z-index: 99999;
left: -999em;
}

#topmenu .menu li ul ul { /* third-and-above-level lists */
margin: -2.3em 0 0 15em;
}

#topmenu .menu li:hover > ul{ /* lists nested under hovered list items */
left: auto;
}

#topmenu .menu li > li:hover ul{
left: -999em;
}

/*styling menu*/
#topmenu .menu a{}
#topmenu .menu li ul{
border: 1px solid #ddd;
border-bottom: none;
background: #fff;
}
#topmenu .menu ul li{
border-bottom: 1px solid #ddd;
}
#topmenu .menu li li.parent{ /* add arrow to the parent */
background: url(../images/arrow.png) no-repeat 96% 50%;
}
#topmenu .menu ul li:hover, #top-menu .menu li li.parent:hover{
background-color: #ddd;
}

Selanjutnya tambahkan code diatas di template.css pada bagian paling bawah, file tersebut terletak di folder template/nama_template_kita/css. Atau sebenarnya kita juga bisa menyimpannya dalam bentuk file css dengan nama terserah kita dan menambahkan link rel di index.php di folder template kita .

Kemudian untuk mengaktifkan dropdown menu disisi modulenya, pilih EXTENSIONS –> MODULE MANAGER —> module menu yang anda jadikan default dropdown, misal MAIN MENU.

selanjutnya ubah parameternya seperti dibagian MODULE PARAMETER –> Always show sub-menu Items (pilih YES).

Pada bagian Advance Parameter buang semua class suffix bawaan installasi joomla default nya, biar clear.

Kemudian coba refresh browser anda. jika tampilan sudah sesuai dan menu dropdown sudah bisa dipanggil, tinggal styling css nya aja, misal ganti warna hovernya, dst. Cara ini compatible di browser FF 3.5.x, Opera 9.x, chrome 3.x, safari, IE8. Untuk browser yang tidak support sebaiknya jangan ragu-ragu segera update ke versi yang lebih tinggi.

sumber: http://www.agungnugroho.net/?p=203