0 Cara Membuat Menu Dropdown menggunakan HTML & CSS - Cukup Abadi

Cara Membuat Menu Dropdown menggunakan HTML & CSS

Menu navigasi dropdown adalah salah satu pelajaran utama di situs web yang pada dasarnya membantu meningkatkan keindahan dan kualitas situs web. Jika Anda ingin mempelajari desain web atau membangun situs web, mempelajari cara membuat bilah menu sangat penting bagi Anda. Pada artikel ini, saya akan memandu Anda sepenuhnya tentang bagaimana Anda dapat membuat menu drop-down hanya menggunakan HTML sederhana, bahasa pemrograman CSS. Jika Anda ingin menambahkan menu ini ke website atau blog Anda, Anda bisa melakukannya dengan baik. Di bawah ini adalah semua petunjuk dan detail tentang cara menambahkan. Anda dapat mempelajari cara membuatnya dengan mengikuti metode ini dan menambahkannya ke proyek Anda sendiri. Harap Anda menyukai bilah menu navigasi ini.

Beberapa informasi khusus tentang bilah menu tarik-turun ini
Bilah menu ini saya buat hanya dengan menggunakan kode pemrograman HTML dan CSS sederhana.

Saat mencoba membuatnya, saya mencoba menulis kode sesederhana mungkin. Sehingga programmer dari semua level bisa mengerti dan belajar.

Dalam artikel ini, saya telah menunjukkan kepada Anda cara membuat menu dan submenu di bawah menu itu.

Saya menggunakan gambar yang indah di latar belakang bilah menu ini. Anda dapat menghilangkan gambar ini jika Anda ingin menggunakannya di situs web atau blog Anda.

Menu tarik-turun telah menambahkan efek hover, artinya menu akan berubah warna saat Anda menggerakkan mouse di atasnya.

Biasanya menu dihitamkan dan submenu dihitamkan. Saat Anda mengarahkan mouse ke atasnya, menu dan submenu akan berubah warna dan menjadi hijau. Yang bisa dilihat dengan sangat baik dan jelas pada background hitam putih.

Poin penting dari bilah menu ini adalah saya telah menggunakan logo di setiap menu. Saya telah menggunakan ikon untuk hal-hal yang ditunjukkan oleh menu. Hasilnya, menunya lebih indah dan jernih.

Secara keseluruhan, ini adalah menu bar yang bagus yang tidak diragukan lagi akan membantu Anda untuk meningkatkan pengetahuan pemrograman Anda dan meningkatkan kualitas dan keindahan situs web Anda.

Di bawah ini adalah kode yang diperlukan untuk membuat menu ini. Anda dapat mengunduh semua kode yang diperlukan dengan mengklik tombol unduh di bawah. Anda juga dapat melihat demo langsung di bilah menu tarik-turun ini dengan mengklik tombol demo di bawah. Semoga Anda menyukainya dan mau belajar bagaimana saya membuatnya.

Anda dapat mempelajari cara membuat menu di web ini dari video di bawah. Dalam video tersebut, saya telah sepenuhnya memandu dan menunjukkan cara membuatnya sangat mudah dan selangkah demi selangkah.

Semoga dari video lain kalian sudah belajar cara membuatnya. Di bawah ini saya telah memberikan kode yang diperlukan, Anda dapat mengunduhnya.

Cara Membuat Menu Bar Dropdown Ini
Untuk membuat menu bar ini, Anda harus membuat file HTML dan CSS terlebih dahulu. Anda perlu membuka Notepad atau editor teks lainnya di komputer Anda untuk membuat file HTML. Kemudian salin dan tempel struktur di bawah ini ke editor itu. Kemudian Anda dapat menambahkan titik HTML dengan mengganti nama pilihan Anda dan menyimpannya.

Sekarang Anda membuat file CSS. Dengan cara yang sama, Anda membuka Notepad dan menyimpannya tanpa mengetik apa pun. Saat menyimpan, ganti nama sesuai keinginan Anda dan tambahkan titik CSS ke dalamnya dan simpan. Pastikan untuk melampirkan file CSS Anda ke file HTML Anda dengan kode berikut.

TAMBAHKAN Kode HTML ( Tambahkan Kode )
Kode berikut adalah kode HTML yang paling sering digunakan untuk membuat menu dropdown ini. Salin kode HTML dari bawah dan tempelkan di struktur atas tempat kode HTML iklan ditulis. Jika Anda ingin menambahkan ke website atau blog Anda. Untuk itu, Anda menempelkan kode-kode ini di tag tubuh proyek Anda

<nav>
        <a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>
        <ul class="menu">
          <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
            <ul class="sub-menu">
                        <!--<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>-->
              <li><a href="#">Sub-Menu 1</a></li>
              <li><a href="#">Sub-Menu 2</a></li>
              <li><a href="#">Sub-Menu 3</a></li>
              <li><a href="#">Sub-Menu 4</a></li>
              <li><a href="#">Sub-Menu 5</a></li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>
          <li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
            <ul class="sub-menu">
                        <!--<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>-->
              <li><a href="#">Sub-Menu 1</a></li>
              <li><a href="#">Sub-Menu 2</a>
                <ul>
                  <li><a href="#">Sub Sub-Menu 1</a></li>
                  <li><a href="#">Sub Sub-Menu 2</a></li>
                  <li><a href="#">Sub Sub-Menu 3</a></li>
                  <li><a href="#">Sub Sub-Menu 4</a></li>
                  <li><a href="#">Sub Sub-Menu 5</a></li>
                </ul>
              </li>
              <li><a href="#">Sub-Menu 3</a>
                <ul>
                            <!--<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>-->
                  <li><a href="#">Sub Sub-Menu 1</a></li>
                  <li><a href="#">Sub Sub-Menu 2</a></li>
                  <li><a href="#">Sub Sub-Menu 3</a></li>
                  <li><a href="#">Sub Sub-Menu 4</a></li>
                  <li><a href="#">Sub Sub-Menu 5</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
          <li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
            <ul class="sub-menu">
              <li><a href="#">Sub-Menu 1</a></li>
              <li><a href="#">Sub-Menu 2</a>
                <ul>
                            <!--<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>-->
                  <li><a href="#">Sub Sub-Menu 1</a></li>
                  <li><a href="#">Sub Sub-Menu 2</a></li>
                  <li><a href="#">Sub Sub-Menu 3</a></li>
                  <li><a href="#">Sub Sub-Menu 4</a></li>
                  <li><a href="#">Sub Sub-Menu 5</a></li>
                </ul>
              </li>
              <li><a href="#">Sub-Menu 3</a>
                <ul>
                            <!--<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>-->
                  <li><a href="#">Sub Sub-Menu 1</a></li>
                  <li><a href="#">Sub Sub-Menu 2</a></li>
                  <li><a href="#">Sub Sub-Menu 3</a></li>
                  <li><a href="#">Sub Sub-Menu 4</a></li>
                  <li><a href="#">Sub Sub-Menu 5</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <!--<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li><li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>-->
          <li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
          <li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
          <li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
        </ul>
      </nav>
       

TAMBAHKAN Kode CSS ( Tambahkan Kode )
Kode di bawah ini adalah kode CSS yang telah digunakan untuk membuat gaya atau desain bilah menu dropdown ini. Anda menyalin kode untuk menambahkannya ke proyek Anda. Lalu buka file CSS yang Anda buat dan tempelkan dan simpan file CSS. Pastikan untuk melampirkan file CSS ke file HTML Anda. Jika Anda ingin menambahkannya ke proyek Anda yang lain, salin kode di bawah ini dan tempelkan ke dalam tag gaya di tag kepala proyek itu.

*{
margin: 0;
padding: 0;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
html{-webkit-font-smoothing:antialiased;}
a{
color: #ba0707;
text-decoration: none;
}
a:hover{
    color: #ba0707;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
body{
background: #e5e5e5;
color: #374147;
font: 14px "open sans","helvetica";
background-image: url("img.jpg");
background-size: cover;
height: 470px;
 
background-repeat: no-repeat;

}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
nav {
  display: block;
  background: #374147;
}

.menu {
  display: block;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li:first-child {
  margin-left: 0;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu li a {
  font-weight: 600;
  text-decoration: none;
  padding: 20px 15px;
  display: block;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,
.menu li:hover > a {
  color: #fff;
  background: #20df49;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 170px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu ul:after {
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  background: #fff;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu ul li a:hover,
.menu ul li:hover > a {
  background: #38d829;
  color: #fff;
}

.menu li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menu li > ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.responsive-menu {
  display: none;
  width: 100%;
  padding: 20px 15px;
  background: #374147;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.responsive-menu:hover {
  background: #374147;
  color: #fff;
  text-decoration: none;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
a.homer {
  background: #9ca3da;
}

Mudah-mudahan, Anda telah menambahkan dua metode di atas dengan baik yaitu kode HTML dan CSS ke proyek Anda. Jika Anda menggunakan kedua metode itu, Anda bisa membuatnya cantik.

Semoga dari artikel di atas, Anda telah mempelajari sepenuhnya cara saya membuat bilah menu pada dropdown ini. Jika Anda memiliki masalah saat membuat proyek ini atau Anda memiliki pertanyaan tentang proyek ini, Anda dapat berkomentar.

Exit mobile version