How To

Cara Membuat Mega Menu

Belajar cara membuat mega menu (menu dropdown lebar penuh di bar navigasi).

Menu Mega

Contoh:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Buat tiga kolom yang sama yang mengapung di samping satu sama lain*/.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Bersihkan float setelah kolom */.row:after {
  content: "";
  display: table;
  clear: both;
}

/* layout responsif - membuat ketiga kolom bertumpuk, bukan bersebelahan */@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div> 
</div>

<div style="padding:16px">
  <h3>Menu Mega Responsif (Dropdown lebar penuh di bar navigasi)</h3>
  <p>Arahkan kursor ke link "Dropdown" untuk melihat menu mega.</p>
  <p>Ubah ukuran jendela browser untuk melihat efek responsif.</p>
</div>

</body>
</html>

Membuat Menu Mega

Buat menu dropdown yang muncul saat pengguna menggerakkan mouse ke atas elemen di dalam bar navigasi.

Langkah 1) Tambahkan HTML

Contoh:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Penjelasan Contoh:

Gunakan elemen apa pun untuk membuka menu tarik-turun, mis. a <button>, elemen <a> atau <p> .

Gunakan elemen kontainer (seperti <div class = “dropdown-content”>) untuk membuat menu dropdown dan menambahkan grid (kolom) dan menambahkan link dropdown di dalam grid.

Gabungkan elemen <div class = “dropdown”> di sekitar tombol dan elemen container (<div class = “dropdown-content”> untuk memposisikan menu dropdown dengan benar menggunakan CSS.

Langkah 2) Tambahkan CSS

Contoh:

/* Konatiner Navbar */.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links didalam navbar */.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Kontainer dropdown */.dropdown {
  float: left;
  overflow: hidden;
}

/* Tombol Dropdown */.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Penting untuk perataan vertikal pada ponsel */  margin: 0; /* Penting untuk perataan vertikal pada ponsel */}

/* Tambahkan warna background merah ke link navbar saat mengarahkan kursor */.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Konten dropdown (disembunyikan secara default) */.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Mega Menu header, jika diperlukan*/.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

/* Tampilkan menu dropdown saat mengarahkan kursor */.dropdown:hover .dropdown-content {
  display: block;
}

/* Buat tiga kolom yang sama yang mengapung di samping satu sama lain */.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

/* Style link di dalam kolom */.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Tambahkan warna background saat mengarahkan kursor */.column a:hover {
  background-color: #ddd;
}

/* Bersihkan float setelah kolom */.row:after {
  content: "";
  display: table;
  clear: both;
}

Penjelasan Contoh:

Kami telah memberi style pada bar navigasi dan link navbar dengan warna background, padding, dan lain-lain.

Kami telah memberi style pada tombol dropdown dengan warna background, padding, dan lain-lain.

Kelas .dropdown menggunakan position: relative, yang diperlukan ketika kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position: absolute).

Kelas .dropdown-content menyimpan menu dropdown yang sebenarnya. Itu tersembunyi secara default, dan akan ditampilkan saat hover (lihat di bawah). Itu diposisikan agar terlihat tepat di bawah tombol dropdown, dan lebarnya diatur ke 100% untuk menutupi seluruh layar.

Alih-alih menggunakan border, kami telah menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti “kartu”. Kami juga menggunakan z-index untuk menempatkan dropdown di depan elemen lainnya.

Selektor :hover digunakan untuk menampilkan menu dropdown saat pengguna menggerakkan mouse ke atas tombol dropdown.

Kelas .column digunakan untuk membuat tiga kolom yang mengapung di samping satu sama lain di dalam menu dropdown (untuk menunjukkan kategori yang berbeda).

Menu Mega Responsif

Contoh:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Bersihkan float setelah kolom */.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Tata letak responsif - membuat tiga kolom bertumpuk satu sama lain, bukan bersebelahan */@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>   
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div> 
</div>

<div style="padding:16px">
  <h3>Responsive Mega Menu (Full-width dropdown in navbar)</h3>
  <p>Hover over the "Dropdown" link to see the mega menu.</p>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

</body>
</html>


Catur Kurnia Sari

Share
Tags: How To