Cara Mudah Memasang Drop Down Menu Memakai Javascript Sederhana

Beberapa hari lalu saya sempat pusing mencari javascript drop down menu yang sederhana, sudah berupa javascript yang tinggal copas di widget javascript, nggak usah otak-atik HTML yang notabene (bagi saya) terasa rumit :D

Alhasil saya menemukan kode javascript drop down menu tersebut, hasilnya bisa Anda lihat di blog ini. Ketika kursor di arahkan menu tersebut otomatis deh menu yang lain pada nge-drop (melorot ke bawah).

Javasacript Drop Down Menu Sederhana

Cara memasang drop down menu seperti yang kamu lihat di blog ini sangat sederhana, kamu tinggal copas kode ini di widget javascript. Keuntungan dari memakai drop down menu adalah kemudahan dalam navigasi blog, dan masih banyak lagi.

Cara Memasang Javascript Drop Down Menu di Blog

• Masuk ke bagian Layout/Tata Letak
• Pilih Add Widget
• Pilih Javascript 
• Copy kode javascript drop down menu di bawah ini dan paste di jendela munculan widget javascript
• Save dan lihat hasilnya

<style>
    #menunavigasihorisontal {
        background: #106FE4;
        width: 100%;
   
        color: #FFF;
            margin: 3px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }
    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFCC00;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #0169cc;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}
    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}
    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #00A2e8;
        width: 120px;
        color: #000;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
<li>
<a href='http://blogbelajar2.blogspot.co.id/2012/04/cara-membuat-menu-navigasi-horisontal.html'>Alamat E-mail Redaksi</a>
<ul>
<li><a href='http://blogbelajar2.blogspot.co.id/2012/04/cara-membuat-menu-navigasi-horisontal.html'>E-mail Redaksi Koran</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/2012/05/alamat-email-redaksi-majalah.html'>E-mail Redaksi Majalah</a></li>
<li><a href='http://www.blogger.comhttp//absurditasmalka.blogspot.com/p/profil-absurditas-malka.html'>E-mail Redaksi IAK</a></li>
</ul>             

<li><a href='http://absurditasmalka.blogspot.co.id/p/info-lomba-terbaru-tahun-ini.html'>Info Lomba Terbaru</a>                
<ul>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Lomba%20Berbayar'>Info Lomba Berbayar</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Lomba%20Blog'>Info Lomba Blog</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Lomba%20Desain'>Info Lomba Desain</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Lomba%20Foto'>Info Lomba Fotografi</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Lomba%20Menulis'>Info Lomba Menulis</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Lomba%20Video'>Info Lomba Video</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Lomba'>Semua Info Lomba</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Pengumuman%20Pemenang%20Lomba'>Pengumuman Pemenang Lomba</a></li>
</ul> 

<li><a href='#'>Info Buku & Sastra</a>
<ul>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Beasiswa'>Info Beasiswa</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Buku'>Info Buku</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Komunitas'>Info Komunitas</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Info%20Sastra'>Info Sastra</a></li>
</ul>
</li> 

<li><a href='#'>Kiat Menulis Kreatif</a>
<ul>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Catatan%20Harian'>Catatan Harian</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Carpon'>Cerpen Sunda</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Cerpen%20Koran'>Cerpen Indonesia</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Puisi%20Miris'>Puisi</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Sabda%20Ali%20Mifka'>Puisi Sabda</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Sajak%20Sunda'>Puisi Sunda</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Proses%20Kreatif%20Menulis'>Proses Kreatif</a></li>
</ul>
</li> 

<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Adsense%20Blogging'>Google Adsense</a>
<ul>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Adsense%20Blogging'>Google Adsense</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/search/label/SEO%20Youtube'>SEO Youtube</a></li>
<li><a href='https://www.tokopedia.com/urbanhidroponik'>OL Shop</a></li>
 </ul>
</li>
 

<li><a href='http://absurditasmalka.blogspot.co.id/search/label/Layanan%20Jasa%20dan%20Iklan'>Layanan Jasa</a>
<ul>
<li><a href='http://absurditasmalka.blogspot.com/p/advertisment.html'>Iklan Blog</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/2015/09/jasa-transkrip-wawacara-audio-video-murah-cepat-aman.html'>Transkrip Wawancara</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/2015/09/jasa-pengetikan-murah-cepat-aman.html'>Jasa Ketik Cepat</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/2015/09/jasa-pengetikan-murah-cepat-aman.html'>Jasa Ketik Word</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/2015/09/jasa-pengetikan-murah-cepat-aman.html'>Jasa Ketik Excel</a></li>
<li><a href='http://absurditasmalka.blogspot.co.id/2015/09/jasa-layout-tata-letak-buku-murah-cepat-bandung.html'>Jasa Layout Buku</a></li>
<li><a href='https://www.tokopedia.com/urbanhidroponik/jasa-instalasi-hidroponik-landscape-garden'>Jasa Hidroponik</a></li>
</ul>
</li> 

<li><a href='http://absurditasmalka.blogspot.co.id/p/daftar-blog-sahabat-absurditas-kata.html'>Blog Sahabat</a>                 <ul>
<li><a href='http://mulyasari-karawang.blogspot.co.id/'>Desa Mulyasari</a></li>
<li><a href='http://gaharukarawang.blogspot.com/'>Gaharu Super</a></li>
<li><a href='#'>Mahardhika</a></li>
<li><a href='#'>MTs Al-Maauun</a></li>
<li><a href='https://www.satire-indonesia.com/'>Satire Indonesia</a></li>
<li><a href='http://www.stroberihidroponik.blogspot.co.id/'>Stroberi Hidroponik</a></li>
<li><a href='http://www.urbanhidroponik.blogspot.co.id/'>Urban Hidroponik</a></li>
</ul>
</li>
</li>
</li>
</ul>
</div>

Contoh drop down menu sederhana IAK

Jangan lupa ganti semua link di atas dengan link yang sobat inginkan, nggak diganti juga nggak apa-apa sih, saya mah gembira-gembira aja :D. Cara membuat drop down menu di atas diambil dari blog belajarblog2blogspot.com dengan edit, pangkas dan penyesuaian.. Sampai jumpa di kiat blogging adsense berikutnya.

Share

Like

G+

Tweet

Tweet

Selalu Update dengan SUBSCRIBE Info Absurditas Kata. Silakan Berlangganan.

Info Absurditas Kata Lainnya:

Dipublikasikan oleh Info Absurditas Kata pada Tanggal Tuesday, December 22, 2015