Home » Trick ngeblog di blogger » Menu Drop Down Sederhana Dengan CSS

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


Artikel Terkait Trick ngeblog di blogger

Label: