Dropdown Menu dalam HTML ~ Pemrograman dan Teknologi

Untuk membuat dropdown yang terlihat saat mouse dilewatkan pada navbar, sebenarnya kita cukup hanya menggunakan HTML dan CSS. Dropdown biasanya dibuat dengan tag <ul> yang diubah tampilannya dengan CSS. Jika kita ingin agar dropdown muncul dan hilang saat navigation bar atau halaman diklik, kita akan membutuhkan Java script.

Ayo kita mulai membuat listnya dengan tag <ul>!!!

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" class="styleku.css">
</HEAD>
<BODY>
    <ul class="menu">
        <li>
            <a href="#">Menu 1</a>
            <ul>
                <a href="#">Submenu 1</a>
                <a href="#">Submenu 2</a>
                <a href="#">Submenu 3</a>
            </ul>
        </li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    <ul>
    <div class="isi">
        <p>Letakkan isi halaman di sini</p>
    </div>
</BODY> 
</HTML>

Sekarang tambahkan <Style> untuk mengubahnya menjadi navigation bar. Berikan ul nilai "position:relative" dan li dengan nilai "display:inline-block".

.menu{
    margin:0px;
    padding:0px;
    background:black;
    position:relative;
}
.menu li{
    display:inline-block;
    position:relative;
    margin-right:4px;
    list-style:none;
    float:left;
}
       
.menu li a{
    color:yellow;
    text-decoration:none;
}
       
.menu li a:hover{
    background:red;
}
       
.menu li ul{
    padding:2px;
    background:black;
    position:absolute;
    display:none;
}
       
.menu li:hover ul{
    display:block;
}

Karena dropdownlist di atas cukup sederhana, kalian masih harus mengubah ukuran, warna, latar belakan dll; yang bisa kalian edit lewat CSS-nya. Kalian bisa menambahkan item yang kalian mau ke list-nya.

Responsive Dropdown List
Di atas, kita sudah mendapatkan dropdown list yang hanya menggunakan CSS. Selanjutnya, kita akan membuat dropdown yang menggunakan javascript. Kali ini kita akan menggunakan button dan tag <div>. Dalam versi tampilan mobile-nya, dropdown menu akan ditampilkan dengan button saat ada event onclick.

Untuk membuat dropdown menu, yang pertama harus kita lakukan adalah membuat file HTML-nya. Namanya bebas, yang penting isinya menggunakan list seperti di bawah ini.

<HTML>
<HEAD>
    <title>Belajar HTML</title>
    <link rel="stylesheet" href="styleku.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</HEAD>
<BODY>
<nav class="topnav" id="navbarku">
<div>
<ul>
  <li  class="active"><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li>
    <a href="#">Daftar isi</a>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
  </li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
</a>
</div>
</nav> 
<script src="scriptku.js"></script>
 </BODY>
</HTML>

Selanjutnya, ketik CSS-nya dan simpan dengan nama file "styleku.css".

.topnav div{
  background-color: #333;
  overflow: hidden;
  height:49px;
}

.topnav ul{
    position:absolute;
    margin:0px;
    padding:0px;
    height:auto;
}

.topnav div > ul > li {
  list-style:none;
  float: left;
  display: block;
  height:100%;
  margin:0px;
  text-align: center;
  padding: 14px 16px;
}

.topnav ul li a{
  color: gold;
  text-decoration: none;
  font-size: 17px;
  user-select:none;
}

.topnav ul li ul {
  display: none;
  margin-top:14px;
  margin-left:-16px;
  min-width:100px;
  background-color:orange;
}

.topnav ul li:hover  ul {
  display: block;
}

.topnav ul li ul li{
  display: block;
  text-align: left;
  float:none;
  color:brown;
}

.topnav div > ul > li:hover {
  background-color:brown;
  color:gold;
}

.topnav ul li ul li:hover {
  background-color: #2233BB;
}

.topnav .active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;

}

@media screen and (max-width: 640px) {
    .topnav div > ul{
        position : absolute;
        top:58px;
        background-color: #333;
        display:none;
        top:50px;
        width:100%;
        height:auto;
        float: none;
    }
    
    .topnav div > ul li{
        position : relative;
        float:none;
        text-align:left;
    }
    
    .topnav div > ul > li{
        background-color:transparent;
    }
    
    .topnav.responsive {
      position: relative;
    }
    
    .topnav.responsive div > ul{
        display: block;
    }

    .topnav a.icon {
        float: right;
        display: block;
        text-align: center;
        padding: 14px 16px;
    }
    
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .topnav ul li ul {
        position:relative;
        display: block;
        margin:0px;
        background-color:orange;
        width:100%;
    }
    
    .topnav ul li ul li{
        padding-left:40px;
    }
  
}

Simpan file CSS di atas dengan nama sesuai yang saya sebutkan. Kemudian, ketik javascript-nya dan simpan dalam file "scriptku.js".

function myFunction() {
    var x = document.getElementById("navbarku");
    if (!x.classList.contains("responsive")) {
        x.classList.add( "responsive");
    } else {
        x.classList.remove( "responsive");
    }
}

Jika kalian mengecilkan ukuran browsernya, maka tampilannya akan berubah.

Supaya terlihat lebih menarik dan kreatif, coba saja ubah tampilan button dengan hover dan semacamnya. Otak-atik CSS-nya untuk mengubah warna latar belakan maupun hurufnya.