dropdown menu CSS buat Joomla! 1.5

beberapa hari yang lalu dapet PR dari seorang teman…dia pengen dibuatkan sebuah template buat Joomla 1.5 dengan kriteria warna dominan hitam dan putih,terus buat top menu nya pake model dropdown…hehehe langsung saya iyakan saja…soalnya sekalian saya mau eksplore inijoomla 1.5….asal joomla 1.5 everything is possible kata saya waktu itu… :D *metuwek*
segera setelah air nya mendidih langsung saya tuang ke cangkir huehehe bikin kopi dulu maksud-e…terus nyalain sebatang jisamsu…puter kartolo.mp3…. :D *tanpa ketiga unsur penting ini otak saya ga mau jalan* saya buka itu photoshop….tarik garis sana sini….slice sana slice sini….akhirnya jadilah raw layoutnya….terus buka notepad++ buat bikin draft template nya…..dan sudah sesuai dengan ide dasarnya…dominan item putih..dengan aksen ijo (menyesuaikan logo tempat kerja teman saya) dengan tambahan extreem liquid width layoutnya :D ekstreem soalnya nyobanya mulai resolusi 640*480 :D nah sekarang tinggal bikin dropdown nya…

ide awal yang terlintas dikepala saya pada awalnya cukup pake dropdown ala suckerfish yang pake


li ul {
position:absolute;
left: -999em;
}

jadi pada keadaan normal list pada li ul tidak kelihatan(tersembunyi), hampir sama seperti kalo pakai display:none; trus biar nongol lagi kalo menu nya di-hover saya pake

li:hover ul {
left:auto
}

pake cara ini lebih aman (menurut saya) daripada menggunakan DHTML menu yang full JavaScript…soalnya tanpa stylesheet pun menu akan tetap ditampilkan pada browser (terkait isu2 browser compatibility dan SEO campaign) ngomong2 soal browser compatibility saya jadi ingat IE :( yang tidak support pseudo class macam :hover gyaaa…..mau ga mau harus menyisipkan fungsi JavaScript ala suckerfish juga yang menambahkan .sfhover pada tiap li yang dalam keadaan mouse over…. (bahasane mbulet)

sfHover = function() {
var sfEls = document.getElementById(")
.getElementsByTagName("li");
for (var i=0; i
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);

maksudnya setiap dalam keadaan hover..sebuah .sfhover akan ditambahkan pada class li, dan nantinya li.sfhover tersebut akan berfungsi sama seperti li:hover :D nah akhirnya tiba pada var sfEls = document.getElementById("") padahal output default topmenu pada joomla 1.5 seperti ini

<ul><li><a href=""><span>...</span></a></li>
<li><span>...</span></li>
....
<li><span>...</span></li>
</ul>
nah terus diambil darimana id nya buat document.getElementById("") pertama saya pikir cara yang termudah adalah menambahkan sebuah division dengan id baru yang mengapit bagian topmenu tersebut…tapi kemudian terpikir untuk mengganti fungsi document.getElementById("") dengan document.getElementByClass("") yang nantinya class nya diambilkan dari class punya tag ul :D

saatnya buka2 buku lagi :D mulai dari seri2 dummies sampe JavaScript
Techniques Keluaran apress saya baca dari depan belakang bolak balik sampe 3 malam ga tidur akhirnya nemu fungsi yang memungkinkan kita untuk mengambil element dari class (nemu di buku Simply JavaScript kluaran SitePoint 2007) dan scriptnya itu ternyata puanjaaanngg dan lamaaaa…ga efisien blass pokoke kalo cuman wat bela2in IE…akhirnya di malam keempat saya ga tidur…saya putuskan untuk menambahkan division dengan id baru saja…. *setengah hati dan sangat tidak sedap kalau ada satu divisi yang kurang penting gitu* T.T

di hari kelima…dengan mata yang sudah setengah bengkak dan diiringi harum semerbak bau badan yang belum terjamah air :D akhirnya jadilah sebuah template hitam putih,tableless,dengan dropdown 3 level tested d browser FF,Opera,IE dan tetap full lebarnya pake resolusi berapapun.

Sebelum sempat merapikan code2 yang berserakan,khususnya CSS nya yang tumpang tindih, sayapun tertidur.Dan ditengah tidur itu saya bermimpi kalau seharusnya ada cara yang lebih rapi daripada menambahkan satu meaningless DIV untuk mengapit topmenu.Ditengah malam saya terbangun dan berpikir…haruskah saya mengoverride output modul topmenu dari joomla???phew..sudah terlalu banyak override yang saya lakukan pada template ini….paling tidak untuk bagian frontpage dan content…meski cuma bermodalkan referensi dari BEEZ dan Rhuk_milkyway :D eh…eh…eh..ternyata…ternyata….di advanced parameter top_menu module manager di bagian administrasi (back-end) ada iku… Menu Tag ID dimana kita bisa menambahkan sebuah id langsung pada tag ul nya >.< wasyuuuuu!@!##! lhah seinget saia yang bisa diatur dari sana iku cuman yg model2 menambahkan suffix di classnya saja….. sekali lagi wassssyuuuu!@#$% huehe dan akhirnya jadi sudah templatenya..dan sentuhan terakhirnya saya tambahkan fitur standar…fungsi JavaScriptbuat memperbesar dan memperkecil ukuran font :D

yowis lah nyo iki readme ne templateku..

Module Parameter
————————–
-Menu Name :topmenu
-Menu Style : List
-Always show
sub-menu items :Yes

Advanced Parameter
———————–
Menu Tag ID :nav
Menu Class Suffix :-nav

nb:moral untuk hari ini..KISS Keep It Simple STUPID! yang gampang dipake gampang aja jangan dibikin susyeehh >.<