Menu Drop Down Sederhana Dengan CSS - Hallo sahabat TutorAsem, Pada Artikel yang anda baca kali ini dengan judul Menu Drop Down Sederhana Dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Trick ngeblog di blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Menu Drop Down Sederhana Dengan CSS
link : 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 :

• Menu 1
  
  • Sub Menu 1
• Menu 2
  
  • Sub Menu 1
  • Sub Menu 2
• Menu 3
  
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu 4
  
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4

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

Demikianlah Artikel Menu Drop Down Sederhana Dengan CSS

Sekianlah artikel Menu Drop Down Sederhana Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Menu Drop Down Sederhana Dengan CSS dengan alamat link https://tutorasem.blogspot.com/2014/01/menu-drop-down-sederhana-dengan-css.html

Tweet