Membuat Menu Dropdown Pada Website Dengan HTML Dan CSS

Posted by Admin on

Friday, March 9, 2018

Dalam suatu aplikasi menu yang merupakan navigasi utama dari web tersebut manjadi hal yang sangat penting untuk diperhatikan. Membuat menu yang efektif dan efisien tentu membutuhkan cara tersendiri agar pengguna dapat menelusuri aplikasi yang dirancang dengan lebih baik lagi. Dalam tutorial kali ini kita akan membuat suatu menu utama yang memiliki fitur dropdown dimana fitur tersebut dapat memaksimalkan lebar layar yang terbatas agar navigasi dari aplikasi web tersebut menjadi lebih optimal.

Bagaimana caranya? banyak tutorial yang tersebar di internet untuk membuat menu dropdown ini. Pada dasarnya yang perlu dipahami adalah bagaimana struktur hirarki dari navigasi tersebut sehingga kita dapat mengatur tampilannya dengan menggunakan css. Pada dasarnya menu dengan konsep dropdown menggunakan tag html dengan nama UL dan LI yang masing-masing sebenarnya digunakan untuk menciptakan sebuah list baik berdasarkan simbol maupun berdasarkan angka.

Struktur tag UL dan LI yang hirarki mempermudah kita dalam membuat menu dropdwon. Dimana kita dapat membuatnya menjadi lebih sistematis dengan konsep yang lebih mudah dimengerti. Mari kita coba membuat susunan menunya terlebih dahulu.

<div class="menu">
<ul id="navigasi">
 <li><a href="index.php">Home</a></li>
 <li><a href="index.php">About</a></li>
 <li><a href="#">News</a>
  <ul>
   <li><a href="index.php">International</a></li>
   <li><a href="index.php">National</a></li>
  </ul>
 </li>
</ul>
</div>

Dimana akan menghasilkan output sebagai berikut:

Struktur hirarki tersebut menunjukan bahwa dibawah menu News terdapat dua menu lainnya yaitu international dan national kita juga dapat memodifikasinya dengan menambahkan atau mengurangi link tersebut. Dengan struktur hirarki inilah kita dapat mengubah tampilannya menggunakan CSS sehingga terciptalah suatu menu yang berbasis dropdown untuk menu dibawahnya. Mari kita lengkapi kode beikut:

Langkah-langkah:
1. Buat File index.php
2. Buat File style.css dan gabungkan kedalam file index sebelumnya menggunakan tag LINK
3. Run

Sourcecode: index.php

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Menu Dropdown Pada Website</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Membuat Menu Dropdown Pada Website</h1>
<hr>

<div class="menu">
<ul id="navigasi">
 <li><a href="index.php">Home</a></li>
 <li><a href="index.php">About</a></li>
 <li><a href="#">News</a>
  <ul>
   <li><a href="index.php">International</a></li>
   <li><a href="index.php">National</a></li>
  </ul>
 </li>
</ul>
</div>

<div class="content">
#sampleContent
</div>

<div class="footer">
Copyright &copy; 2018 - <a href="www.belajarwebpedia.com">www.belajarwebpedia.com</a>
</div>

</body>
</html>

Hasil index.php tanpa style.css

Apakah sudah dapat gambaranya? jika ya maka kita lanjutkan dengan melakukan coding untuk file style.css

Sourcecode: style.css

body {
 font-family: verdana;
 font-size: 0.85em;
}

.menu {
 display: block;
 background-color:#00A6BB;
 height:46px;
}

.content {
 clear: both;
 padding:5px 0;
 min-height: 200px;

}

.footer {
 clear: both;
 margin-top:10px;
 background-color: #eee;
 padding:10px 8px;
}

#navigasi {
 position:relative;
 line-height:30px;
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
}

#navigasi a {
 display:block;
 padding:8px 16px;
 background-color:#00A6BB;
 color:#fff;
 text-decoration:none;
}

#navigasi a:hover {
 background-color:#00BCD4;
 color:#fff;
}

#navigasi li {
 position:relative;
 float:left;
}

#navigasi ul {
 position:absolute;
 display:none;
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
}

#navigasi li ul a{
 width:12em;
 height:auto;
 float:left;
}

#navigasi li:hover ul{
 display:block;
}

#navigasi li:hover ul ul{
 display:none;
}

Bagaimana cukup mudah bukan? berikut adalah hasil akhir dari menu dropdown yang telah kita coding tadi

Untuk melihat demo secara live dapat melalui link dibawah ini. Selamat mencoba ya dan jangan lupa share jika membantu ^^

Demo