Membuat Drop Down Menu Sederhana di Website

DropDowns

Dropdown biasanya yang sering kita temui dengan Bantuan Javascript. Namun disini saya akan paparkan bagaimana cara yang paling mudah hanya untuk membuat menu dropdown tanpa kode javascript yang diembed maupun inline, cukup dengan kode CSS yang dibubuhi sedikit trik.

Dropdown menu berfungsi saat kita membutuhkan sub menu untuk menu utama. Pada posting kali ini saya akan mencoba membuat menu dropdown sederhana dengan menggunakan css (Cascading Style Sheet). Disini saya akan Membuat dua buah file yaitu style.css yang berfungsi untuk mengatur tampilan dari code html dan yang kedua adalah dropdown.html yang akan tampil di dalam browser internet. Kedua file ini harus diletakkan dalam folder yang sama.

Berikut adalah kode membuat Dropdown :

ul#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;

 opacity:.9
text-align:center;
}


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

 text-decoration:none;
width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 color:#fff;

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
background:#666;
 padding:5px;
 display:block
}

 background:#333
}

ul#menu li {

 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
position:relative
}

ul#menu li ul.sub-menu {
 position: absolute;


display:none

ul#menu li:hover ul.sub-menu {
}


}

 display:block

<ul id="menu">

 <li><a href="#">Menu 1</a></li>

 <li><a href="#">Menu 2</a>

  <ul class="sub-menu">

   <li><a href="#">Sub Menu 1</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>
</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>
</ul>
 </li>

 <li><a href="#">Menu 5</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>


<!-- tanda # ganti dengan alamat URL yang sobat inginkan -->

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Membuat Drop Down Menu Sederhana di Website
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://tips-triks-ilmu-komputer.blogspot.com/2014/10/membuat-drop-down-menu-sederhana-di.html. Terima kasih sudah singgah membaca artikel ini.
Anda Ingin Kursus Mastering Komputer ?
KLIK DISINI