Widget HTML Atas

Cara membuat menu dropdown dengan HTML DAN CSS

Hay gaes. Jumpa lagi di blog kesayangan kita ini, di postingan kali ini saya akan membagikan tutorial cara membuat menu dropdown sederhana dengan HTML dan CSS, di tutorial cara membuat menu dropdown kali ini, kita tidak membutuhkan JavaScript/jQuery.


DropDown Menu  yaitu sebuah menu yang di dalamnya berisikan kumpulan link-link yang ditampilkan menurun kebawah, apa bila kita menekan menu tersebut dan menu tersebut akan berfungsi sebagai pengarah ke halaman web lain, baik itu dari web kita sendiri maupun dari web lain.

User Experience (UX/pengalaman pengguna) dan kecepatan akses (load time) sebuah website merupakan hal yang sangat penting. Oleh karena itu mengapa kamu sebaiknya tidak membebani website Akamu dengan banyak aksesoris tambahan seperti JavaScript atau gambar-gambar dengan ukuran yang begitu besar.

Tapi bagaimana jika kamu ingin memiliki menu CSS dropdown yang sederhana? Tenang saja Dalam tutorial ini kamu akan mempelajari bagaimana cara membuat menu CSS dropdown sederhana dengan mudah tanpa javaScript / jQuery.

Oke langsung saja simak dengan baik cara cara membuat menu dropdown sederhana dengan HTML dan CSS berikut ini.

Cara Membuat menu DropDown skrip HTML

Disini Kita mulai dengan membuat wrapper (pembungkus) div dan akan memberikan class menu-wrap.

skrip HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Judul Halaman Saya</title>
  </head>
<body>
  <div class="menu-wrap">
  </div>
</body>
</html>

Didalam wrapper kita masukkan daftar link yang ingin kita tampilkan, daftar yang akan kita buat dibungkus dengan tag <ul> dan tag <li>:

<ul>
<li><a href="ganti link kamu">menu</a></li>
<li><a href="ganti link kamu">menu1</a></li>
<li><a href="ganti link kamu">submenu</a>
<ul>
<li><a href="ganti link kamu">submenu1</a></li>
<li><a href="ganti link kamu">submenu2</a></li>
</ul>
</li>
</ul>

Karena disini kita akan menggunakan eksternal CSS, maka perlu menambahkan skrip di bawah ini dalam tag head:

<link rel="stylesheet" type="text/css" href="style.css" media="all" />

Jika skrip di gabungin maka akan menjadi seperti ini:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Judul Halaman kamu</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  </head>
<body>
  <div class="menu-wrap">
<ul>
<li><a href="ganti link kamu">menu</a></li>
<li><a href="ganti link kamu">menu1</a></li>
<li><a href="ganti link kamu">submenu</a>
<ul>
<li><a href="ganti.link.kamu">submenu</a></li>
<li><a href="ganti link kamu">submenu</a></li>
</ul>
</li>
</ul>
  </div>
</body>
</html>

Setelah semuanya selesai , simpan sebagai format.HTML

Cara Membuat menu DropDown skrip CSS

skrip CSS

Apa bila kamu sudah menyelesaikan pembuatan file HTML,langkah selanjutnya dalam membuat menu dropdown yaitu kita akan melengkapinya dengan membuat file CSS. Buatlah file baru dan simpan sebagai “ file style.css”, dalam file tersebut mulai ketikkan skrip css berikut:
  1. * {margin:0; padding:0;}
  2. body {
  3. background-color:#fff;
  4. font-family:Arial, Helvetica, sans-serif;
  5. color:#FFF;
  6. }
  7. .menu-wrap {
  8. background-color:#53bd84;
  9. height:50px;
  10. line-height:50px;
  11. position:relative;
  12. width:770px;
  13. margin:auto;
  14. margin-top:80px;
  15. }

Apa bila kamu sudah menyelesaikan pembuatan file HTML,langkah selanjutnya dalam membuat menu dropdown yaitu kita akan melengkapinya dengan membuat file CSS. Buatlah file baru dan simpan sebagai “ file style.css”, dalam file tersebut mulai ketikkan skrip css berikut:
Keterangan Dalam skrip CSS
no 1 adalah untuk mereset padding dan margin default dari browser.

no 4 sampai no 6,  tentukan warna background yang kamu suka dari body dan menentukan warna sekaligus ukuran dari font sesuai yang di inginkan.


no 10 sampai no 16, untuk mengatur segala atribut dan nilai dari class menu wrap mulai dari lebar, tinggi dan posisi sesui keinginan kamu. Selanjutnya kamu tambahkan skrip CSS berikut:
  1. .menu-wrap ul {
  2. list-style:none;
  3. }
  4. .menu-wrap ul li a {
  5. float:left;
  6. width:150px;
  7. display:block;
  8. text-align:center;
  9. color:#FFF;
  10. text-decoration:none;
  11. text-transform:uppercase;
  12. }
  13. .menu-wrap ul li a:hover {
  14. background-color:#666;
  15. display:block;
  16. }
  17. .menu-wrap ul li:hover ul {
  18. display:block;
  19. }
  20. .menu-wrap ul ul {
  21. display:none;
  22. list-style:none;
  23. position:absolute;
  24. background-color:#53bd84;
  25. left:300px;
  26. top:50px;
  27. width:190px;
  28. }
  29. .menu-wrap ul ul li a {
  30. float:none;
  31. display:block;
  32. padding-left:30px;
  33. text-align:left;
  34. width:160px;
  35. }
  36. .menu-wrap ul ul li a:hover {
  37. color:#fff;
  38. }


Keterangan:
skrip no 2 digunakan untuk menghilangkan style bawaan dari tag <ul>.
Skrip no 6 sampai no 12 digunakan untuk mengatur ukuran, posisi dan merubah tulisan link ke huruf besar.
Skrip no 16 sampai no 17 digunakan untuk memberikan warna background ketika link di sorot/hover.
Pada skrip no 25 sampai no 31 digunakan agar secara default sub link tidak tampil, karena sub link akan tampil ketika link utama di sorot/hover.


Jadi skripn CSS nya akan menjadi seperti ini:
* {margin:0; padding:0;}

 

body {

 background-color:#fff;

 font-family:Arial, Helvetica, sans-serif;

 color:#FFF;

}

 

.menu-wrap {

 background-color:#53bd84; 

 height:50px; 

 line-height:50px; 

 position:relative;

 width:770px;

 margin:auto;

 margin-top:80px;

}

 

.menu-wrap ul {

 list-style:none;

}

 

.menu-wrap ul li a {

 float:left; 

 width:150px; 

 display:block; 

 text-align:center; 

 color:#FFF; 

 text-decoration:none; 

 text-transform:uppercase;

}

 

.menu-wrap ul li a:hover {

 background-color:#666; 

 display:block;

}

 

.menu-wrap ul li:hover ul {

 display:block;

}

 

.menu-wrap ul ul {

 display:none; 

 list-style:none; 

 position:absolute; 

 background-color:#53bd84;

 left:300px; 

 top:50px; 

 width:190px;

}

 

.menu-wrap ul ul li a {

 float:none; 

 display:block; 

 padding-left:30px; 

 text-align:left; 

 width:160px;

}

 

.menu-wrap ul ul li a:hover {

 color:#fff;

}



Simpan file CSS tersebut, selanjutnya buka file “File.html” yang sudah kamu buat lalu lihat hasilnya. Menu dropdown yang saya jelaskan diatas bisa digunakan untuk web atau blog, karena pada dasarnya web atau blog menggunakan HTML dan CSS dalam menampilkan data.

Ini adalah skrip HTML yang sudah di buat tampilan akan seperti ini..
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Nyoba - Membuat Menu Dropdown</title>
<link href="style.css" rel="stylesheet" />
</head> <body>
<nav> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a> <ul> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> <li><a href="#">sub menu 3</a> <ul> <li><a href="#">drop menu 1</a></li> <li><a href="#">drop menu 2</a></li> </ul> </li> </ul> </li> <li><a href="#">submenu</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> </ul> </li> <li><a href="#">dropmenu</a>     <ul> <li><a href="#">dropmenu1</a></li> <li><a href="#">dropmenu2</a></li> </ul> </li> </ul> </nav>
</body> </html>

Demikian tentang Cara membuat menu dropdown dengan HTML DAN CSS semoga dapat membatu sahabat blogmblaur semua.


No comments for "Cara membuat menu dropdown dengan HTML DAN CSS"

Iklan baca juga

Berlangganan via Email