Membuat Menu Dengan DropDown

Posted by handy on 20 January 2011

Mungkin blog anda berisikan tentang sebuah cerita atau kisah  yang bila disatukan pada satu halaman, itu akan membuat halaman postingan yang terlalu panjang, mungkin salah satu solusinya anda bisa membuat menu dengan dropdown. Atau bisa juga Halaman Mempunyai Fungsi Scroll

Tutorial Blog

Cara membuatnya sangat simpel karena hanya memerlukan sedikit kode CSS, maka jadilah dropdown menu tersebut.
Ikuti langkah cara membuatnya.
Yang anda perlukan untuk membuat dropdown menu adalah kode CSS seperti dibawah ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Link target 1">Judul link target 1</option>
<option value="Link target 2">Judul link target 2</option>
<option value="Link target 3">Judul link target 3</option>
<option value="Link target 4">Judul link target 4</option>
</select>

Cara mengedit kode diatas adalah sebagai berikut :

•Tulisan Link target 1 hingga 4 diganti dengan link yang akan dituju ketika pengunjung mengklik judul yang tampil.
•Tulisan Judul link target 1 sampai 4 diganti dengan judul dari link target atau judul yang ingin ditampilkan
Perhatikan contoh pengisian dropdown menu dibawah ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://hmubaraq.blogspot.com/2011/01/halaman-mempunyai-fungsi-scroll.html">Halaman mempunyai fungsi scrol</option>
<option value="http://hmubaraq.blogspot.com/2011/01/cara-membuat-link-otomatis.html">Cara membuat Link</option>
<option value="http://hmubaraq.blogspot.com/2011/01/cara-membuat-breadcrumb-diblog.html">Cara Membuat Breadcrumb</option>
<option value="http://hmubaraq.blogspot.com/2011/01/membuat-kumpulan-link-blog-lain.html">Membuat kumpulan Link</option>
</select>

Contoh pengisian dropdown menu diatas akan kelihatan seperti ini

Artikel Terkait

{ 0 comments... read them below or add one }

Post a Comment