Yang dimaksud 2 level, Drop Down pertama akan memilih kategori, baru akan memilih yang halaman yang masuk dalam kategori tersebut.
Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Penempatannya
dibawah <body>
........
diatas </body>
<form name="dynamiccombo">
<select name="stage2" size="1" onChange="displaysub()">
<option value="#">This is a place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
</select>
<input type="button" name="test" value="Go!"
onClick="gothere()"/>
</form>
<script type='text/javascript'>
//<![CDATA[
//Drop Down menu 2 level script by
//http://www.javascriptkit.com/script/script2/2levelcombo.shtml
//Langkah pertama masukkan kategori
var category=new Array()
category[0]=new Option("CATEGORY ", "") //THIS LINE RESERVED TO CONTAIN COMBO TITLE
category[1]=new Option("Tutorial Blogger", "combo1")
category[2]=new Option("Tutorial Kode", "combo2")
category[3]=new Option("SEO", "combo3")
//Untuk Kategori pertama :
var combo1=new Array()
combo1[0]=new Option("Cara mudah membuat Blogspot","http://nanoyulianto.blogspot.com/2010/05/cara-membuat-blog-buat-pemula-di.html")
combo1[1]=new Option("Cara posting Blogspot","http://nanoyulianto.blogspot.com/2010/05/cara-posting-di-blogger.html")
combo1[2]=new Option("Rekomendasi pada Dashboard","http://nanoyulianto.blogspot.com/2010/05/rekomendasi-bahasa-pada-dashboard.html")
combo1[3]=new Option("Settings Blogspot","http://nanoyulianto.blogspot.com/2010/05/cara-setting-atau-pengaturan-blogspot.html")
combo1[4]=new Option("Tips menjaga akun anda","http://nanoyulianto.blogspot.com/2010/05/tips-menjaga-akun-anda.html")
combo1[5]=new Option("Membuat page Blogspot","http://nanoyulianto.blogspot.com/2010/10/membuat-page-di-blogspot.html")
combo1[6]=new Option("Menjadwalkan posting","http://nanoyulianto.blogspot.com/2011/01/menjadwalkan-postingan.html")
combo1[7]=new Option("Menulis kode HTML","http://nanoyulianto.blogspot.com/2010/12/menulis-kode-html-diposting.html")
combo1[8]=new Option("Cara memasang favicon","http://nanoyulianto.blogspot.com/2010/05/cara-memasang-favicon.html")
combo1[9]=new Option("BACK TO CATEGORIES","") //Untuk kembali
//Untuk Kategori kedua :
var combo2=new Array()
combo2[0]=new Option("HTML","http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-html.html")
combo2[1]=new Option("XHTML","http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-xhtml.html")
combo2[2]=new Option("CSS","http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-css.html")
combo2[3]=new Option("Penempatan kode CSS, JavaScript, dan HTML","http://nanoyulianto.blogspot.com/2010/10/penempatan-kode-css-javascript-dan-html.html")
combo2[4]=new Option("BACK TO CATEGORIES","") //Untuk kembali
//Untuk Kategori ketiga :
var combo3=new Array()
combo3[0]=new Option("Memasang Meta Tags","http://nanoyulianto.blogspot.com/2010/06/memasang-meta-tags-blogspot-seo.html")
combo3[1]=new Option("Meta Tags berbeda setiap posting","http://nanoyulianto.blogspot.com/2010/07/meta-tags-terlihat-berbeda-setiap.html")
combo3[2]=new Option("Meta Tags Description hanya di Home page","http://nanoyulianto.blogspot.com/2010/07/description-hanya-di-home-page.html")
combo3[3]=new Option("BACK TO CATEGORIES","") //Untuk kembali
var curlevel=1
var cacheobj=document.dynamiccombo.stage2
function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true
}
function displaysub(){
if (curlevel==1){
populate(cacheobj.options[cacheobj.selectedIndex].value)
curlevel=2
}
else
gothere()
}
function gothere(){
if (curlevel==2){
if (cacheobj.selectedIndex==cacheobj.options.length-1){
curlevel=1
populate(category)
}
else
location=cacheobj.options[cacheobj.selectedIndex].value
}
}
populate(category)
//]]>
</script>
Credit : JavaScript Kit
Alhamdulillah
0 comments:
Posting Komentar