Cara Membuat Menu Responsive Header

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

Menu Responsive Header

Ubah desain header berdasarkan pada ukuran layar. Ubah ukuran jendela browser untuk melihat efeknya.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

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

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}
</style>
</head>
<body>

<div class="header">
  <a href="#default" class="logo">LOGO Avengers</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Kontak</a>
    <a href="#about">Tentang Kami</a>
  </div>
</div>

<div style="padding-left:20px">
  <h1>Responsive Header</h1>
  <p> Ubah ukuran jendela browser untuk melihat efeknya. </p>
   <p> Beberapa konten .. </p>
</div>

</body>
</html>

Buat Responsive Header

Langkah 1) Tambahkan HTML:
Contoh

<div class="header">
  <a href="#default" class="logo">LOGO Avengers</a>
  <div class="header-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Kontak</a>
    <a href="#about">Tentang Kami</a>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Style header dengan background abu-abu dan beberapa padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style link pada header  */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style pada link logo (perhatikan bahwa kita akan  menetapkan nilai yang sama dari line-height dan font-size untuk mencegah header link meningkat ketika font berubah menjadi lebih besar */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Ubah warna latar belakang saat mengarahkan mouse */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style pada link aktif / saat ini */
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Tambahkan kueri media untuk responsive - saat layar lebarnya 500px atau kurang, susun tautan di atas satu sama lain */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}