Our Story.
Share anything about our laboratorium

Cara membuat menu Dropdown

Cara membuat menu Dropdown

Dalam membuat blog pribadi. Praktikan dapat menjadikan website www.laboreldi.id sebagai acuan dalam pembuatannya.

Pada blog pribadi praktikan akan membuat menu praktikum seperti ini :


Terdapat menu dropdown seperti gambar diatas. ketika kursor diarahkan ke menu practikum maka akan muncul menu lain dibawahnya. untuk kasus ini praktikan akan membuat blog sesuai dengan ketentuan yang dapat dilihat pada link disini.

Pemasangan menu dropdown seperti gambar diatas, bisa didapatkan dari bawaan template blog dengan menu bawaan atau dengan membuat menu tambahan seperti diatas dengan menambahkan sedikit script pada blognya. untuk membuat seperti diatas, praktikan dapat mengikuti langkah berikut:

1. Pertama buka menu TEMPLATE

2. Kemudian klik tombol EDIT HTML seperti gambar dibawah

3. Lalu carilah kode ]]></b:skin> (dalam proses pencarian dapat menggunakan ctrl+f bagian kotak edit html). copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin> tadi
#RickyMenu {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

} 
#Rickybox {
    width: 875px;
    float: left;
    margin: 0;
    padding: 0;
}

#punch { 
    margin: 0;
    padding: 0;
}
#punch ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
    color: warna2;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
    background: warna2;
    color: warna1;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
    background: warna1;
    width: 150px;
    color: warna2;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
    background: warna2;
    color: warna1;
    padding: 7px 10px;
}
#punch li {
    float: left;
    padding: 0;
}
#punch li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#punch li ul a {
    width: 140px;
}
#punch li ul ul {
    margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
    left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
    left: auto;
}
#punch li:hover, #punch li.sfhover {
    position: static;
}
  • Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan sebagai contoh bisa mengikuti kode di bawah ini:
Menu Hitam
warna1 = #555555
warna2 = #FFFFFF


Menu Biru 
warna1 = #66bbdd
warna2 = #004661


Menu Hijau 
warna1 = #38761d
warna2 = #FFFFFF

Menu Abu-abu 
warna1 = #d4d4d4
warna2 = #555555


Menu Kuning 
warna1 = #ffd966
warna2 = #d4812a
  • Jika sudah mengganti semua kode warna di atas silahkan klik SIMPAN TEMPLATE..

MEMASANG KODE HTML DROP DOWN MENU DI TATA LETAK BLOG

    • Sekarang masuk ke menu TATA LETAK atau LAYOUT
    • Klik  ADD A GADGET atau TAMBAH GADGET
    • Pilih HTML/JAVASCRIPT. Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia
    <div id="RickyMenu">
           <div id="Rickybox">
          <ul id="punch">
            <li><a href="#">Home</a></li>
            <li>
              <a href="#">Sample Page</a>
              <ul>
                <li>
                  <a href="#">Sub Page #1</a>
                  <ul>
                    <li><a href="#">Sub Sub Page #1</a></li>
                    <li><a href="#">Sub Sub Page #2</a></li>
                    <li><a href="#">Sub Sub Page #3</a></li>
                  </ul>
                </li>
                <li><a href="#">Sub Page #2</a></li>
                <li><a href="#">Sub Page #3</a></li>
                <li><a href="#">Sub Page #4</a></li>
                <li><a href="#">Sub Page #5</a></li>
              </ul>
            </li>
            <li><a href="#">Sample Post</a></li>
            <li><a href="#">Blog Page</a></li>
          </ul>
        </div>
      </div>
    • Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan
    • Klik SIMPAN
    • Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.
    catatan:
    untuk yang menggunakan template standar bawaan blogger. gadget HTML yang memuat script diatas dapat diletakkan diatas kolom postingan pada bagian tata letak. seperti ini:

    4. Jika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat sebuah horizontal drop down menu di tempat yang anda inginkan. Hasilnya akan tampak seperti ini tampilan website labor eldi atau seperti gambar dibawah ini

    5. Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:
    • Silahkan cari pada bagian akhir ada kode seperti ini:
    <li><a href="#">Blog Page</a></li>
          </ul>
    • Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:
    <li><a href="#">Blog Page</a></li>
    <li><a href="LINK BARU">TEKS BARU</a></li>
          </ul>
    • Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini
    <li><a href="#">Blog Page</a></li>
    <li><a href="LINK BARU 1">TEKS BARU 1</a></li>
    <li><a href="LINK BARU 2">TEKS BARU 2</a></li>
    <li><a href="LINK BARU n">TEKS BARU n</a></li>
    </ul>

    • Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut
    <li><a href="#">Blog Page</a></li>
    <li><a href="LINK BARU 1">TEKS BARU 1</a></li>
    <li><a href="LINK BARU 2">TEKS BARU 2</a> 
            <li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>
            <li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>
    </li>
    <li><a href="LINK BARU n">TEKS BARU n</a></li>  
          </ul>
    labor eldi labor eldi Author

    About



    Welcome to the website of Industrial Electronics Laboratory. The Laboratory is located in the Department of Electrical Engineering, Faculty of Engineering, Andalas University

    Find Us

    Pageview

    Followers

    Instrumentation Electronics Laboratory
    Copyright ©
    | Presented by InfokomJaya