Tutorial CSS Membuat Menu Dropdown Sederhana untuk website kamu

Bagikan :

Tweet

Microtrafh - Halow! tanpa perlu basa basi kali ini saya akan menjelaskan cara membuat menubar dropdown dengan menggunakan css dan html.

 Kali ini saya menjelaskan membuat menubar simple ini dia step by step nya :

pertama buat dua buah file yaitu index.html dan style.css

setelah kamu membuat kedua file tersebut kemudian kamu buka file index.html. Didalamnya kamu buat

<link type="text/css" href="style.css" rel="stylesheet"></link>
<div>
 <ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a>
   <ul>
    <li><a href="#">Menu 2.1</a></li>
    <li><a href="#">Menu 2.2</a></li>
    <li><a href="#">Menu 2.3</a>
     <ul>
      <li><a href="#">Menu 2.3.1</a></li>
      <li><a href="#">Menu 2.3.2</a></li>
     </ul>
    </li>
   </ul>
 </li>
 <li><a href="#">Menu 3</a></li>
 <li><a href="#">Menu 4</a></li>
 </ul>
</div> 

untuk link mungkin sudah pada tahu, yaitu untuk menggunakan external file css.
membuat ul untuk membuat list lalu menu-menu didalamnya menggunakan li. jika ingin membut sub menu dari menu tinggal membuat ul didalam li menu di ul yang pertama. dan begitu seterusnya.

setelah list selesai dibuat lalu buka style.css dan tambahkan code ini:

div ul ul {
display: none;
}

fungsinya untuk menghilangkan sub menu dari menu.

Selanjutnya tambahkan code ini dibawah code yang sudah dimasukan diatas.

div ul li:hover > ul {
display: block;
}

pada code ini bertujuan jika mouse mengarah(hover) pada menu(li) maka submenu(ul) didalamnya akan dimunculkan kembali dalam bentuk standar (block)

Selanjutnya masukan kode ini

div ul {
background: #ccc; //warna background dari menu
padding: 0;
list-style: none; // menghilangkan poin di list
position: relative;
display: inline-table; //mengganti display ke inline-table
}

disini kita mengubah struktur list dan memasukan warna background serta menghilangkan poin di list.

Selanjutnya sisipkan code ini

div ul:after {
content: "";
clear: both;
display: block;
}

div ul li {
float: left;// agar menu tidak menurun melainkan saling berdempetan
}

div ul li:hover a {
color: #fff; //warna text menu saat mouse diarahkan
}

div ul li a {
display: block;
padding: 5px 10px; renggan antara atas bawah dan samping text menu
color: #000; //warna text menu 
text-decoration: none;
}

disini menu sudah mendatar tapi pada dropdownnya masih berantakan

selanjutnya sisipakan code ini

div ul ul {
background: #ccc; //warna sub menu 1
border-radius: 0px;
padding: 0;
position: absolute;
}

div ul ul li {
float: none; //mengubah agar li tidak mendatar lagi jadi menurun
border-top: 1px solid #000;
border-bottom: 1px solid #000;
position: relative;
}

div ul ul li a {
padding: 5px 10px;
color: #fff;
}

div ul ul li a:hover {
background: #000;
}

div ul ul ul {
position: absolute; left: 100%; top:0; //posisi sub sub menu disamping sub menu
} 

Dan ini script keseluruhan CSS nya

div ul ul {
display: none;
}

div ul li:hover > ul {
display: block;
}

div ul {
background: #ccc; //warna background dari menu
padding: 0;
list-style: none; // menghilangkan poin di list
position: relative; 
display: inline-table; //mengganti display ke inline-table
}

div ul:after {
content: ""; clear: both; display: block;
}

div ul li {
float: left;
}

div ul li:hover a {
color: #fff;
}

div ul li a {
display: block; 
padding: 5px 10px;
color: #000; 
text-decoration: none;
}

div ul ul {
background: #ccc; 
border-radius: 0px; 
padding: 0;
position: absolute;
}

div ul ul li {
float: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
position: relative;
}

div ul ul li a {
padding: 5px 10px;
color: #fff;
}
div ul ul li a:hover {
background: #000;
}

div ul ul ul {
position: absolute; left: 100%; top:0;
} 

Begitulah membuat kerangka menu dropdown anda bisa memodifikasinya sehingga bisa sesuai dengan selera anda.

share,+1,like jika bermanfaat terimakasih

Tag : css, design, GUI, html, informasi, Tips, tutorial