Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Step by Step memahami Pembuatan Menu Dropdown

Belajar membuat Menu Dropdown Sederhana

Belajar membuat menu dropdown - Pada tutorial kali ini saya akan membagikan cara membuat menu Dropdown sederhana. Untuk uji coba saya rekomendasikan untuk mendownload Notepad++ untuk editing.

Langkah Pertama

Copy kode HTML sederhana ini untuk pembuatan Menu standar, tanpa Dropdown.

<nav id="menu">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#"> Tanpa Dropdown</a></li>		
  </ul>
</nav>
Untuk mempercantik tampilannya, tambahkan CSS ini:
#menu{
  background:#888;
  height:45px;
  margin:0 auto;
  }
#menu ul,#menu li{
  margin:0 auto;
  padding:0 0;
  list-style:none
  }
#menu ul{
  height:45px;
  width:auto;
  }
#menu li{
  float:left;
  display:inline;
  position:relative;
  font-size:14px;
  color:#fff;
  font-weight:500;
  }
#menu a{
  display:block;
  line-height:45px;
  padding:0 14px;
  text-decoration:none;
  color:#fff;
  }
#menu li a:hover {
  
  color:#fff;
  background-color:#555;
  transition: all 0.3s ease-in;
  }

Atau apabila ingin versi file HTML lengkap, silahkan copy code ini :

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

<style>
body {border: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  outline: 0;
  padding: 0;
  background:#eee;
  }
header {
  background:#1b206d;
  height:70px;
  color:white;
  text-align:center;
  top:0;
  }
header h1 {
  font-size:200%;
  font-weight:700;
  text:transform:uppercase;
  line-height:70px;
  margin:0 auto;
  }	
#menu{
  background:#888;
  height:45px;
  margin:0 auto;
  }
#menu ul,#menu li{
  margin:0 auto;
  padding:0 0;
  list-style:none
  }
#menu ul{
  height:45px;
  width:auto;
  }
#menu li{
  float:left;
  display:inline;
  position:relative;
  font-size:14px;
  color:#fff;
  font-weight:500;
  }
#menu a{
  display:block;
  line-height:45px;
  padding:0 14px;
  text-decoration:none;
  color:#fff;
  }
#menu li a:hover {
  color:#fff;
  background-color:#555;
  transition: all 0.3s ease-in;
}

</style>
</head>
<body>
<header>
  <h1>HEADER</h1>
</header>  
<nav id="menu">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#"> Tanpa Dropdown</a></li>		
  </ul>
</nav>
		
</body>
</html>

Maka hasilnya akan seperti gambar di bawah ini :

AMP HTML

Langkah ke-2 Menambah Dropdown

Perhatikan kode ini:

<li><a href="#"> Tanpa Dropdown</a></li>

Tambahkan setelahnya, kode ini :

<li><a class="sub" href="#">Dropdown</a>
  <ul class="menus">
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href='#'>Menu3</a></li>
  </ul>
 </li>

Tambahkan juga CSS (saya buat sengaja dropdown terlihat)

/* Dropdown Menu */
#menu a.sub:after{  
  content:'';            /* Kode Panah */
  display:inline-block;
  background-color:#fff;
  color:#fff;
  width:12px;
  height:12px;
  margin-left:10px;
  vertical-align:-1px;
  transition:all .3s ease;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,10L12,15L17,10H7Z`' fill='%23fff'/%3E%3C/svg%3E") center / 22px no-repeat;
}
#menu a.sub:hover:after{ 
  transform:rotate(180deg); /* Panah diputar saat disentuh mouse */
}
#menu ul.menus{ 
  height:auto;
  overflow:hidden;
  width:180px;
  background:#666;
  position:absolute;
  z-index:99;
  display:block; /* Dropdown terlihat */
  left:0;
}
#menu ul.menus li{
  display:block;
  width:100%;
}
#menu ul.menus a{
  color:#fff;
  line-height:45px;
}
#menu ul.menus a:hover{
  background:#5d99a2;
  color:#fff;
}

Sehingga hasilnya seperti pada gambar di bawah :

AMP HTML

Langkah Terakhir


Ganti display:block dengan display:none ini untuk menyembunyikan isi Dropdown, pada kode ini:
#menu ul.menus{ 
height:auto;
  overflow:hidden;
  width:180px;
  background:#666;
  position:absolute;
  z-index:99;
  display:block; /* ganti dengan display:none */
  left:0;
}

Tambahkan kode CSS ini, untuk memunculkan kembali ketika di sentuh (hover)

#menu li:hover ul.menus{
  display:block
}

Silahkan coba lihat hasil akhir, kalau mau dipelajari silahkan download Source

Sampai disini selesai membuat Menu Dropdown, tapi menu ini belum responsive. Bersambung.. ke part-2 Membuat Menu Responsive, dengan icon Burger

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

2 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. awseome thnaks for sharing
    1. you're wellcome
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.