Membuat Daftar Label Kategori Model Dropdown

Dropdown merupakan efek untuk menampilkan item sub menu dalam diagram dengan gerakan menurun kebawah. Seperti daftar link menu navigasi blog pada umumnya, dimana jika selector <ul> digandakan lagi untuk membuat sub menu, maka saat element induk diHOVER akan menunjukkan beberapa pilihan item menu dengan efek dropdown seperti ini:

<div id="daftar label kategori">
   <ul="[class:atibut]">
     <li><a href="....">Daftar Label Kategori</a></li>
     <li><a href="....">Daftar Label Kategori</a></li>
          //menggandakan diagram ul
          <ul class="model menu">
              <li>.....</li>
              <li>.....</li>
          </ul>
   </ul>
</div>

Disini yang kita butuhkan hanya satu item menu, yang nantinya akan kita buat menjadi model menu dropdown untuk menampilkan daftar label blog dengan JavaScript perintah (JavaScript Variable=[json.feed.category]), seperti ini:

document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>')

CONTOH:

Kode lengkapnya:

<style>
.file {color:#eee}
.fileLabels {color:#fff;background:red}
#wpLabels {background:red;width:27%;padding:3px}
</style>
<div id="wpLabels">
<script type="text/javascript">
//<![CDATA[
//(orange text) ganti dengan URL-Blog Anda..
var homepage = "http://m-hidayat.blogspot.com";
function showLabels(json) {
    var label = json.feed.category;
    document.write('<select onchange="window.open(this.value);"><option selected disabled class="file">DAFTAR LABEL CATEGORY</option>');
    for (var i = 0; i < label.length; i++) {
        document.write('<option class="fileLabels" value="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '">' + label[i].term + '</option>');
    }
    document.write('</select>');
}
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>
</div>