Horizontal Dropdown Menu

Horizontal Dropdown Menu Oleh Rohman. Selasa, Agustus 21, 2007 Beberapa hari tidak ada tulisan baru, bukan karena kehabisan bahan untuk menulis, tapi terlalu sibuk dengan kode-kode template. Yups, akhirnya ada juga template yang sudah jadi walaupun sekilas masih mirip dengan pendahulunya. Jika ada yang mau lihat templatenya seperti apa, bisa sobat Klik di sini !. Tapi maaf nih, bagi sobat yang suka akan template ini belum bisa di download sekarang karena datanya masih belum saya upload, jadi sabar deh mungkin besok atau lusa sudah bisa di download. Yo'i sobat tadi adalah hanya sekilas info saja, yang akan saya bahas sekarang adalah menyoal tentang pernak-pernik blog, ada satu lagi nih yang bisa sobat pasang. kali ini tentang cara pembuatan menu dropdown dengan javascript dalam bentuk horizontal alias mendatar. Sekilas tentang menu dropdown ini yaitu menu navigasi yang apabila di sorot oleh mouse akan secara otomatis mengeluarakan sub menu yang terkandung di dalamnya. Contoh gampang yaitu silahkan sobat sorot menu-menu yang ada pada bagian atas blog ini, tentunya nanti akan keluar berupa sub-sub menu. Ingin tahu cara membuatnya? silahkan baca tutorialnya sampai selesai ! Untuk membuat menu dropdown seperti di atas, bisa menggunakan bantuan image ataupun cukup hanya warna background biasa. Untuk saat ini saya mau menerangkan menu dropdown tanpa bantuan image, dan untuk yang menggunakan latar belakang image, akan di bahas pada pembahasan selanjutnya. Script yang saya pakai kali ini adalah di ambil dari http://www.dynamicdrive.com akan tetapi saya modifikasi pada bagian css agar tampil lebih menarik. Ada beberapa tahapan yang harus di persiapkan yaitu yang pertama adalah menentukan menu utama apakah yang akan di tampilkan. Contoh pada blog saya adalah Home, Free Blog Tamplate, Rubrik Elektronik, Obral lus, How to make a Website, serta Contuct Us. Yang kedua adalah mempersiapkan sub menu dari menu utama yang di tampilkan. Contoh blog saya yaitu Link-link postingan yang ada pada blog tersebut, untuk template unik dan rubrik elektronik yaitu menampilkan judul-judul dari postingan semisal About Battery Electronic shopping, Minima 3 column, dan lain sebagainya. Nah sudah barang tentu dari judul-judul yang saya sebutkan tadi itu mempunyai alamat URL masing-masing, langkah selanjutnya adalah mencatat alamat URL setiap judul yang di pasang. Setiap template tentunya akan berbeda kodenya, untuk memberi gambaran saja maka yang saya terangkan adalah template minima dengan pemasangan menu dropdown di bagian header • Untuk template minima klasik 1. Sig in di blogger

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting

5. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode

#dropmenudiv{ position:absolute; border:1px solid black; border-bottom-width: 0; font:normal 12px verdana; line-height:18px; z-index:100;

} #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; color:#ffffff; } #dropmenudiv a:hover{ /*hover background color*/ background-color: #e7f4fd; color:#000000; } /* menu dropdown ----------------------------------------------- */

#menu{ text-align: center; background:#c4e1ff; height:20px; } #menu a{ margin:0; font-size:1em; font-weight:normal; padding-left:20px; padding-right:20px; letter-spacing:-1px; color: #000000; font-family:georgia,verdana,arial; text-decoration:none; } #menu a:hover{ color: #ffffff; background: #140E7E; }

6. Copy paste kode berikut di atas kode

<script type='text/javascript'> //
/*********************************************** * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //isi dari menu 1, silahkan ubah dengan link milik sobat var menu1=new Array() menu1[0]='Minima 3 column (classic)' menu1[1]='Minima 3 column (beta)' menu1[2]='Scribe 3 column (classic)'

menu1[3]='Scribe 3 column (new)' menu1[4]='1St Template Unik (new)' menu1[5]='Denim 3 column (new)' menu1[6]='Blue Lover (new)' //isi dari menu 2, silahkan ubah dengan link milik sobat var menu2=new Array() menu2[0]='About Television' menu2[1]='About Battery' menu2[2]='About Progressive' menu2[3]='Electronic Shopping' menu2[4]=' About Mp3 Player' menu2[5]='About Handy Cam'

//isi dari menu 3, silahkan ubah dengan link milik sobat var menu3=new Array() menu3[0]='Obral Plus' //isi dari for menu 4, and so on var menu4=new Array() menu4[0]='Resep Bisnis.com' var menuwidth='200px' //default menu width var menubgcolor='#4B4D52' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all

if (ie4||ns6) document.write('') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)
function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& ! contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu //]]>

7. Copy paste kode berikut persis di bawah kode :

<$BlogDescription$>

Home Free Template Rubrik Elektronik Obral Plus Belajar website

8. Klik tombol Simpan Perubahan Template

9. Selesai.

Yang di atas tadi merupakan pemasangan untuk template minima klasik, untuk template minima baru, silahkan ikuti langkah berikut ! • Untuk template minima baru 1. Sigin di blogger

2. Klik menu Layout

3. Klik menu Edit HTML

4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting

5. Copy paste kode berikut di antara kode , atau jika bingung simpan saja persis di atas kode ]]>

#dropmenudiv{ position:absolute; border:1px solid black; border-bottom-width: 0; font:normal 12px verdana; line-height:18px; z-index:100;

} #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; color:#ffffff; } #dropmenudiv a:hover{ /*hover background color*/ background-color: #e7f4fd; color:#000000; } /* menu dropdown ----------------------------------------------- */

#menu{ text-align: center; background:#c4e1ff; height:20px; } #menu a{ margin:0; font-size:1em; font-weight:normal; padding-left:20px; padding-right:20px; letter-spacing:-1px; color: #000000; font-family:georgia,verdana,arial; text-decoration:none; } #menu a:hover{ color: #ffffff; background: #140E7E; }

6. Copy paste kode berikut di atas kode

<script type='text/javascript'> //
/*********************************************** * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //isi dari menu 1, silahkan ubah dengan link milik sobat var menu1=new Array() menu1[0]='Minima 3 column (classic)' menu1[1]='Minima 3 column (beta)' menu1[2]='Scribe 3 column (classic)'

menu1[3]='Scribe 3 column (new)' menu1[4]='1St Template Unik (new)' menu1[5]='Denim 3 column (new)' menu1[6]='Blue Lover (new)' //isi dari menu 2, silahkan ubah dengan link milik sobat var menu2=new Array() menu2[0]='About Television' menu2[1]='About Battery' menu2[2]='About Progressive' menu2[3]='Electronic Shopping' menu2[4]=' About Mp3 Player' menu2[5]='About Handy Cam'

//isi dari menu 3, silahkan ubah dengan link milik sobat var menu3=new Array() menu3[0]='Obral Plus' //isi dari for menu 4, and so on var menu4=new Array() menu4[0]='Resep Bisnis.com' var menuwidth='200px' //default menu width var menubgcolor='#4B4D52' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all

if (ie4||ns6) document.write('

') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{

var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)
function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& ! contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu //]]>

7. Copy paste kode berikut persis di bawah kode :

<span>