Sabtu, 28 Maret 2009

Cara Membuat Menu Drop Down Horizontal Dengan JavaScript

2 hari yang lalu kita telah belajar membuat menu horizontal pada blogspot. Pada postingan ini, saya akan memaparkan bagaimana membuat menu drop down horizontal pada blogspot. Menu drop down merupakan menu yang mempunyai sub-sub menu didalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut. Kode-kode ini saya dapat dari www.dynamicdrive.com. Klik disini untuk melihat contohnya.
Bagaimana cara menambahkan menu drop down pada blog kita? Berikut langkah-langkahnya:
  1. Silahkan login terlebih dahulu pada akun Blogspot pembaca
  2. Klik link menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
  3. Jangan lupa untuk membackup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Klik link Download Template Lengkap
  4. Copy paste kode berikut di atas tag </head>
    <script type="text/javascript"
    src="http://nestoriko.googlepages.com/chrome.js">
    </script>

  5. Cari kode ]]></b:skin> kemudian tambahkan struktur CSS dibawah ini dengan mengcopy paste diatas kode ]]></b:skin>

    .chromestyle{
    width: 100%;
    font-weight: bold;
    }

    .chromestyle:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
    padding: 4px 0;
    margin: 0;
    text-align: center;
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #B5E2FE;
    }

    .chromestyle ul li a:hover, .chromestyle ul li a.selected{
    background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
    }

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #B5E2FE;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
    ,direction=135,strength=4);
    }

    .dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #B5E2FE;
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }

    .dropmenudiv a:hover{
    background-color: #EBF7FF;
    }

  6. Cari struktur seperti dibawah ini pada template pembaca
    <b:includable id='description'>
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>

  7. Jika sudah ketemu, copy paste struktur berikut ini tepat dibawah struktur yang Anda temukan pada langkah 6
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://tutorial-website.blogspot.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Menu1</a></li>
    <li><a href="#" rel="dropmenu2">Menu2</a></li>
    </ul>
    </div>

    <!--menu drop down pertama -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>


    <!--menu drop down kedua -->
    <div id="dropmenu2" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>

    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
  8. Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika pembaca ingin menambah menu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi:
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://tutorial-website.blogspot.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Menu1</a></li>
    <li><a href="#" rel="dropmenu2">Menu2</a></li>
    <li><a href="#" rel="dropmenu3">Menu3</a></li>
    </ul>
    </div>

    <!--menu drop down pertama -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>


    <!--menu drop down kedua -->
    <div id="dropmenu2" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>

    <!--menu drop down ketiga-->
    <div id="dropmenu3" class="dropmenudiv">
    <a href="URL sub menu1">Sub Menu1</a>
    <a href="URL sub menu2">Sub Menu2</a>
    <a href="URL sub menu3">Sub Menu3</a>
    </div>

    <script type="text/javascript">
    cssdropdown.startchrome("chromemenu")
    </script>
  9. Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika pembaca ingin menambah menu drop down keempat, kelima, dan seterusnya.
  10. "URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.
  11. Bagi pembaca yang membuat web dengan menggunakan menggunakan software web design seperti dreamweaver, langkahnya hampir sama dengan yang diatas. Hanya saja struktur yang ada pada langkah 7 diletakkan pada bagian halaman web dimana pembaca ingin menambahkan menu drop down tersebut.
Selamat mencoba dan jangan lupa meninggalkan komentar ya

Comments :

12 komentar to “Cara Membuat Menu Drop Down Horizontal Dengan JavaScript”

terima kasih info nya

reallylife mengatakan...
on 

@reallylife:
sama-sama bos

HelNes mengatakan...
on 

oke juga nich..cuma rada pusing nich ..apa krn saya[guoblok]ya..he.he..pokoknya trimahksih tutornya..

tonzky mengatakan...
on 

@tonzky:
aahh..jgn merendah bro..yg penting kita bisa belajar brg di blog ini...
terima kasih juga uda berkunjung

HelNes mengatakan...
on 

sip laek, mantap postingannya....

okta sihotang mengatakan...
on 

@okta sihotang:
makasi lae...

HelNes mengatakan...
on 

Cool lae.. :D

thegands mengatakan...
on 

pas hari hamamate nanti aku pulang. klo lae gimana?

thegands mengatakan...
on 

berarti gak ketemu lah lae. heheheehe... pas bulan 9 mungkin bisa. hehehee

thegands mengatakan...
on 

salam kenal mas ya,
terima kasih ilmu script-nya, sudah saya jalankan hasilnya cukup bagus, cuma ada yang mau saya tanyakan :
1. bagaimana mengganti warna background dan teks beserta size-nya
2. ada tanda silang di atas kanan knapa ya mas? apa ada yg salah, trus gimana menghilangkannya ? mohon petunjuk, atau klo sempet dan mau kunjungi situs saya http://pras2009.blogspot.com.

sekian terimakasih

Prasetyo Nugroho mengatakan...
on 

mau tanya...
submenu ini efektif untuk semua browser nggk?

Anonim mengatakan...
on 

kok laman saya gak ada ketika saya ketik ya bos????

terry mengatakan...
on 

Posting Komentar