Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara membuat DropDown menu lengkap dan jelas

vbphotoshop.blogspot.com
Cara membuat menu DropDown beserta penjelasan. Halo sobat, kali ini saya akan membagikan tutorial HTML dan CSS. yaitu cara membuat Drop Down menu beserta penjelasan. Kawan - kawan pasti sudah pada bisa membuat menu drop down kalo cuma copy paste script seperti tutorial yang sempat saya  buat sebelumnya. Tapi kali ini saya akan membagikan tutorial tersebut beserta penjelasannya, dan insya allah sejelas mungkin. Oke kawan...

Pertama yang harus di siapkan adalah text editor.

Artikel terkait : Text editor palingb bagus

1. Buka text editor milik sobat, disini saya menggunakan text editor Sublime. Kemudian buat sebuah document baru.

2. Masukan script berikut.

<html>
<head>
 <title>Coba DropDown</title>
 <style type="text/css">

 </style>
</head>
<body>


</body>
</html>

Script diatas merupakan cangkang untuk membuat file html, "Coba dropDown" merupakan judul...
3. Buat sebuah list menggunakan ul dan li,, masukan script berikut diantara <body> dan </body>

<ul class="utama">
 <li><a href="#">Menu1</a></li>
 <li><a href="#">Menu2</a></li>
 <li><a href="#">Menu3</a></li>
 <li><a href="#">Menu4</a></li>
</ul>

Sehingga hasilnya menjadi seperti berikut

<html>
<head>
 <title>Coba DropDown</title>
 <style type="text/css">

 </style>
</head>
<body>
 
<ul class="utama">
 <li><a href="#">Menu1</a></li>
 <li><a href="#">Menu2</a></li>
 <li><a href="#">Menu3</a></li>
 <li><a href="#">Menu4</a></li>
</ul>

</body>
</html>

kemudian masukan lagi list kedalam salahsatu lint li diatas.. Bingung?? Lihat script dibawah ini saja..

 <li><a href="#">Menu1</a></li>
 <li><a href="#">Menu2</a>

  <ul class="sub">
   <li><a href="#">subMenu1</a></li>
   <li><a href="#">subMenu2</a></li>
   <li><a href="#">subMenu3</a></li>
  </ul>

 </li>

Disini saya memasukan sub menu kedalam menu2, oh iah.. Untuk class="sub" itu merupakan class css yang nanti akan kita buat.
sekarang simpan dengan nama sembarang.html. kemudian jalankan pada browser!! hasilnya akan menjadi seperti berikut.
  • Menu1
  • Menu2
    • subMenu1
    • subMenu2
    • subMenu3
  • Menu3
  • Menu4
Yang muncul di browser sobat tidak akan sama dengan yang ada di artikel ini.
4. Oke sob, kali ini kita akan menyembunyikan dulu sub menunya dengan menggunakan css. Msukan script berikut diantara <style> dan </style>.

 ul.sub{
  display: none;
 }

5. Sekarang kita akan membuat menu utama menjadi sejajar kesamping serta menghilangkan bulatan yang ada di sampingnya. Masukan script css berikut masih diantara <style> dan </style>

 ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
 }
 ul.utama li{

  display: inline-block;
 }

Sekarang menu utamanya sudah menjadi sejajar kesamping. Sekarang bagaimana cara supaya submenu muncul saat menu utama di hover mouse ???
6. Pertanyaan yang bagus. Supaya sub menu muncul saat menu utama di hover, masukan script berikut di bawah script diatas..

 ul.utama li:hover ul.sub{
  display: block;
  position: absolute;
 }
 ul.sub li{
  display: block;
 }

Ingat !!!.. Masih diantara <style> dan </style>. saat menu utama (ul.utama) di hover, maka sub menu (ul.sub) akan muncul (display: block).
ul.utama dan ul.sub merupakan ul yang diberi class, yaitu class utama dan class sub

Keseluruhan script diatas akan menjadi seperti berikut.

<html>
<head>
 <title>Coba DropDown</title>
 <style type="text/css">
 ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
 }
 ul.sub{
  display: none;
 }
 ul.utama li{
  display: inline-block;
 }
 ul.utama li:hover ul.sub{
  display: block;
  position: absolute;
 }
 ul.sub li{
  display: block;
 }
 </style>
</head>
<body>
 
<ul class="utama">
 <li><a href="#">Menu1</a></li>
 <li><a href="#">Menu2</a>

  <ul class="sub">
   <li><a href="#">subMenu1</a></li>
   <li><a href="#">subMenu2</a></li>
   <li><a href="#">subMenu3</a></li>
  </ul>

 </li>
 <li><a href="#">Menu3</a></li>
 <li><a href="#">Menu4</a></li>
</ul>

</body>
</html>


Kemudian simpan dan jalankan di browser kesayangan sobat.

Udah gitu ajah??? Ko tampilannya standard banget???

Oke kawan, kita akan buat stylenya supaya lebih enak dipandang.. Ganti semua script yang ada di antara <style> dan </style> dengan semua script berikut.

        ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
 }

 ul.utama li{
  display: inline-block;
  width: 100px;
  height: 30px;
  background: #666;
  text-align: center;
 }
 ul li:hover{
  background: #333;
 }

 ul.utama a{
   color: #fff;
   text-decoration: none;
   line-height: 30px;
 }
 ul.sub{
  display: none;
 }
 ul.utama li:hover ul.sub{
  display: block;
  position: absolute;
 }
 ul.sub li{
  display: block;
  margin-top: 1px;
 }


Dan sekarang tampilannya sudah sedikit lebih baik dan tidak buruk. untuk melihat hasilnya, klik tombol demo dibawah.

Demo

Untuk belajar css dan html, silahkan download ebooknya Disini.

Sekian tutorial dari saya untuk kali ini. Semoga bermanfaat, terimakasih....

Sumber kutipan : Heri Lesmana

Sumber Gambar

7 komentar untuk "Cara membuat DropDown menu lengkap dan jelas"

  1. Terima kasih banyak atas tutorialnya. Sungguh sangat membantu dan saya sejauh ini berhasil membuat drop down yang saya inginkan. Namun ada sedikit masalah. Sub-sub menu yang sudah jadi tersebut tidak kebuka atau tidak bisa diklik ketika saya tambahkan link. Saya kira ada masalah dengan penulisan linknya. Mohon pencerehannya. Terima kasih...

    BalasHapus