Cara Membuat Menu CSS Dropdown

  1. Home
  2. Blog
  3. Cara Membuat Menu CSS Dropdown
Blog

Cara Membuat Menu CSS Dropdown | Warung Komputer. jika Anda ingin memiliki menu CSS dropdown yang sederhana? Kabar baiknya, Anda tidak membutuhkan tambahan JavaScript apapun untuk membuatnya, cukup dengan CSS saja. Dalam tutorial ini Anda akan mempelajari bagaimana cara membuat menu CSS dropdown sederhana dengan mudah.Cara Membuat Menu CSS Dropdown

Cara Membuat Menu CSS Dropdown

Langkah 1 – Membuat file HTML

Pertama, Anda harus membuat file HTML baru (kosong) terlebih dahulu. Dalam tutorial ini kita akan membuat sebuah file baru yang bernama menu.html. Kita akan menggunakan File Manager untuk membuatnya. Namun, hasil yang sama juga bisa Anda dapatkan dengan menggunakan aplikasi FTP client. Buat file menu.html di komputer Anda dan upload ke akun  Anda menggunakan aplikasi FTP.

Langkah 2 – Menambahkan kode menu HTML

Menu yang akan kita buat terdiri dari 1 elemen induk bernama Main Menu dan 5 sub-elemen. Dengan mengganti URL di dalam atribut href, Anda bisa menghubugkan setiap sub-menu/Child Menu ke halaman-halaman yang berbeda di website Anda. Anda mungkin akan melihat bahwa setiap elemen memiliki class yang berbeda – dropdown, mainmenubtn dan dropdown-child. Class dibutuhkan untuk menerapkan rule CSS yang berbeda.

<div class="dropdown">
  <button class="mainmenubtn">Main menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdonain.com/page1.html">Child menu 1</a>
    <a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
    <a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
    <a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
    <a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
  </div>
</div>

Langkah 3 – Membuat CSS dan Efek Dropdown

Kita akan memberikan style untuk kode HTML dengan menggunakan rule CSS berikut ini:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
 
.mainmenubtn:hover {
    background-color: red;
    }
 
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Seperti yang bisa Anda lihat, class .dropdown-child memiliki rule CSS display:none. Namun, begitu pengunjung mengarahkan kursor (hover) ke (.dropdown:hover) ke induk menu, rule CSS akan langsung berganti menjadi display:block. Ini akan memberikan efek dropdown di menu kita.

Berikut ini adalah tampilan akhir dari file menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Main menu</button>
  <div class="dropdown-child">
    <a href="http://wwww.yourdonain.com/page1.html">Child menu 1</a>
    <a href="http://wwww.yourdonain.com/page2.html">Child menu 2</a>
    <a href="http://wwww.yourdonain.com/page3.html">Child menu 3</a>
    <a href="http://wwww.yourdonain.com/page4.html">Child menu 4</a>
    <a href="http://wwww.yourdonain.com/page5.html">Child menu 5</a>
  </div>
</div>
</body>
</html>

Di contoh ini kita akan menggunakan internal stylesheet, artinya style CSS akan kita letakkan di file HTML yang sama. Anda juga bisa mencoba beberapa cara lain untuk mengubungkan file CSS ke HTML. Jangan ragu untuk mencoba berbagai variasi CSS. Anda bisa mengganti warna, ukuran, dll. Sesuaikan semuanya dengan kebutuhan Anda.

Kesimpulan

Setelah menyelesaikan tutorial ini Anda kini telah mempelajari bagaimana cara membuat menu dropdown sederhana hanya dengan menggunakan CSS. Kode yang disediakan dalam tutorial ini sangat ringan dan tidak akan memperberat website Anda sedikitpun.

Warung Komputer menyediakan layanan Jasa Pembuatan Website, SEO, Digital Marketing dan Jasa Service Laptop/Komputer yang memiliki tenaga ahli professional dan berpengalaman.

Warung Komputer | Your Trusted IT Partner
Telpon/WhatsApp : 0811-1014-930
Email : mail@warungkomputer.co.id
Website : warungkomputer.com

Artikel Terkait

blank
Cara Kirim Email dengan PHP
blank
Tutorial Menggunakan Command SSH

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Kategori Artikel

Archives

Menu