Membuat Drop Down Menu


Anda pasti pernah menjumpai menu seperti ini:











Menu ini dinamakan dengan menu drop down.
Menu drop down sudah sangat sering dijumpai di website-website yang ada di internet. Tampilannya yang  elegan dan multifungsi menjadikannya menarik untuk digunakan. Untuk membuat menu drop down ini HTML saja tidaklah cukup. Diperlukan CSS dan juga Javascript, CSS digunakan untuk mengatur tampilan, sedangkan Javascript digunakan untuk mengatur action-action untuk menu tersebut. Untuk membuat menu drop down ini anda bisa saja membuatnya dari 0 (semuanya dikerjakan manual), namun dengan perkembangan zaman saat ini sudah banyak tersedia source code gratis yang bisa digunakan. Salah satunya tutorial yang akan saya berikan ini. Tutorial ini saya dapat dari dynamicdrive.com.

Langsung saja, berikut adalah tutorialnya:


  • Download dulu Javascript untuk membuat menu dropdown ini disini (Klik kanan save link as)
  • Download juga CSS style untuk membuat menu dropdown ini disini (Klik kanan save link as)
  • Buat file HTML baru, dan pastikan file tersebut berada pada folder yang sama dengan file CSS dan Javascript yang tadi anda download.
  • Di dalam tag <head> tambahkan kode ini :
<link rel="stylesheet" type="text/css" href="chromestyle.css" />
<script type="text/javascript" src="chrome.js"></script>

  • kode tersebut artinya mengambil script dari external file yaitu file chromestyle.css dan chrome.js. Selanjutnya untuk membuat menu utamanya gunakan script berikut :
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://blajar-komputer.blogspot.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>

  • untuk menambahkan menu dropdown tambahkan saja atribut rel="dropmenu1" dimana dropmenu1 adalah nama dari dropmenu yang nantinya dideklarasikan di bawahnya. Tambahkan script berikut ini untuk memunculkan dropdown menunya :
<!--Yang ini kalau mouse berada diatas menu Resources-->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<!--Yang ini kalau mouse berada diatas menu news -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>
<!-- Yang ini kalau mouse berada diatas menu search -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>

  • dan terakhir tambahkan script ini :
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>


script tersebut digunakan untuk menjalankan menu drop down ini. Atau anda bisa juga pelajari contohnya yang dapat di download di link di bawah ini
DOWNLOAD
Posted by
Labels: , , ,

10 comments:

  1. dap ITApril 27, 2011 at 8:51 PM

    wah sih bintank posting yang kmren ane tnya k ente.. :-)

    ok ok nice inpo deh.. hehehe

    ReplyDelete
  2. UnknownApril 27, 2011 at 9:00 PM

    wah, si agung komennya cepet banget,,,
    baru terbit langsung dikomen,,
    makasih dah mampir gung,,,
    =)

    ReplyDelete
  3. VenatioApril 28, 2011 at 4:25 PM

    nice post...


    http://venatioisgame.blogspot.com/
    Game review for all gamers..

    ReplyDelete
  4. UnknownApril 29, 2011 at 8:02 AM

    menuju TKP

    ReplyDelete
  5. AdrianMay 7, 2011 at 9:01 PM

    thanks ya sob.nice trik!jgn lupa jga komentar balik di blogku ya

    ReplyDelete
  6. UnknownMay 11, 2011 at 7:39 AM

    oke,,, menuju ke blog agan,,,

    ReplyDelete
  7. Boegis FashionSeptember 23, 2018 at 3:00 AM

    Trik Mengatasi Laptop yang Mati Total.. @Laptop
    Lihat video lengkapnya...


    Penyebab kerusakan pada RAM Komputer @vigo @indo
    Lihat video lengkapnya...

    Trik Paling Gila Memperbaiki Hard Disk @trik @vigo
    Lihat video lengkapnya...

    Penyebab Download Internet Sangat Lambat @vigo
    Lihat video lengkapnya...

    3 Software untuk menembus password wifi @wifi
    Lihat video lengkapnya...

    ReplyDelete
  8. UnknownFebruary 28, 2019 at 4:22 PM

    Kabar Gembira Buat Semua Member Setia Bolavita
    Dalam Rangka Menyambut Ulang Tahun Bolavita Ke 6 (Enam)
    Bolavita Memberikan Bonus Spesial IDR 2.000.000
    Ayo Buruan Gabung Sekarang dan Ambil Bonusnya

    Mari Kunjungin Segera Website kami :
    www(titik)bolavita(titik)fun
    www(titik)sateayam(titik)club
    www(titik)pokervita(titik)live

    Info Lebih Lanjut Bisa Hub kami Di :
    Live Chat Online 24 JAM NONSTOP !!!
    WA : +628122222995
    Pin BBM : BOLAVITA / D8C363CA (NEW)


    ReplyDelete
  9. angelaSeptember 9, 2019 at 5:08 PM

    haii numpang promo yahhh
    KENARI POKER,com lagi bagi-bagi bonus newmember
    20.000 dengan deposit minimal 15.000
    yukk buruan jangan sampai ketinggalan !! ^_^V

    DAN DI KENARI POKER JUGA ADA BONUS NEXT DEPOSIT LOH !!untuk member lama
    dengan minimal deposit hanya 100.000 untuk mendapatkan bonus 20%nya Nihh yukk buruaan jangan sampaii
    ketinggalannn !!

    ReplyDelete
  10. Kucing LiarDecember 14, 2019 at 5:00 PM

    MasterCeme, Agen CEME IDNPLAY Terpercaya di INDONESIA
    masterceme.com
    HOT PROMO :
    - THR akhir Tahun 2019
    - Referral 20%
    - Cashback 0.3%
    - Bonus Deposit Harian 5.000 / hari

    Link Alternatif :
    masterceme.info
    masterceme.net

    WA: +85578968600
    Line : Masterceme

    ReplyDelete

Subscribe to: Post Comments (Atom)