27 January 2014

Menu Drop Down Sederhana Dengan CSS

Cara ini adalah yang paling mudah untuk membuat menu dropdown tanpa kode javascript, kita membuat menu dropdown ini cukup dengan kode CSS, tentunya dengan sedikit ngetrik.

Sekalipun kita tidak mengaktifkan javascript pada browser, dropdown ini sudah pasti tetap berjalan karena yang kita gunakan hanyalah kode CSS dan HTML, dengan cara sederhana ini kapasitasnya akan lebih kecil dan pengaksesannya lebih cepat dibanding menggunakan javascript.


Berikut kode untuk membuat menu Dropdown dengan kode CSS sederhana;

ul#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9;
}

ul#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px;
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#252585;
 background:#CCCCFF;
 padding:5px;
 display:block;
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#A4A4FC;
}

ul#menu li {
 position:relative;
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px;
 display:none;
}

ul#menu li:hover ul.sub-menu {
 display:block;
}

Jika kita ingin menambahkan kode css di atas pada blogger copy dan pastekan di atas kode ]]></b:skin>

Berikut ini adalah untuk link navigasinya, kodenya seperti dibawah ini;

<ul id="menu">
 <li><a href="#">Menu 1</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>

Ganti karakter '#' dengan alamat url yang kita kehendaki, dan untuk mengaplikasikan pada blogger, pilih menu Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript;


Pilih gadget HTML/JavaScript;


Masukkan kode diatas dan klik tombol simpan, kemudian lihat blog, maka hasilnya akan seperti dibawah ini,


Demo :


Monggo silakan dicoba di blog masing-masing, apabila sampeyan tertarik




Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.
Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.

5 comments:

  1. Maaf Master, ini bisa kepake di blog wordpress yah ?

    ReplyDelete
    Replies
    1. kode CSS diatas adalah menu umum dan bisa dipakai pada semua jenis website atau blog.

      Delete
  2. bisa ga ditarik kang? biar penuh kiri kanan

    ReplyDelete
  3. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Master Komputer, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsukses.com, Bimbingan Belajar, Les Private

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus