Cara Membuat Link Navigation Bar Lebar Sama

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

by Catur Kurnia Sari November 29, 2020

Pelajari cara membuat bar navigasi dengan link navigasi dengan lebar yang sama.

Section Artikel

1 Menu dengan Lebar Sama
2 Membuat Bar Navigasi Responsif
- 2.1 Langkah 1) Tambahkan HTML
- 2.2 Langkah 2) Tambahkan CSS
3 Link Navigasi Lebar Sama dengan Ikon

Menu dengan Lebar Sama

Contoh:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Four links of equal widths */
  text-align: center;
}

.navbar a:hover {
  background-color: #000;
}

.navbar a.active {
  background-color: #4CAF50;
}

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

<h2>Navbar Responsif dengan Link dan Lebar yang Sama</h2>
<p>Coba ubah ukuran jendela browser untuk melihat efek responsif.</p>

<div class="navbar">
  <a class="active" href="#">Home</a> 
  <a href="#">Search</a> 
  <a href="#">Contact</a> 
  <a href="#">Login</a>
</div>

</body>
</html>

Membuat Bar Navigasi Responsif

Langkah 1) Tambahkan HTML

Contoh:

<!-- Menu Navigasi -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

Langkah 2) Tambahkan CSS

Contoh:

/* Style menu navigasi */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

/* Link navigasi */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Empat link dengan lebar sama. Jika Anda memiliki dua link, gunakan 50%, dan 33,33% untuk tiga link, dll. */
  text-align: center; /* Jika Anda ingin teks berada di tengah */
}

/* Tambahkan warna background saat mengarahkan mouse */
.navbar a:hover {
  background-color: #000;
}

/* Beri Style link current/active */
.navbar a.active {
  background-color: #4CAF50;
}

/* Tambahkan responsif - pada layar kurang dari 500px, buat link navigasi muncul di atas satu sama lain, bukan di samping satu sama lain */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Jika Anda ingin teks rata kiri pada layar kecil */
  }
}

Link Navigasi Lebar Sama dengan Ikon

Contoh:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Four links of equal widths */
  text-align: center;
}

.navbar a:hover {
  background-color: #000;
}

.navbar a.active {
  background-color: #4CAF50;
}

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

<h2>Navbar Responsif dengan link dengan Lebar yang Sama</h2>
<p>Coba ubah ukuran jendela browser untuk melihat efek responsif.</p>

<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
  <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> 
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 
  <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
</div>

</body>
</html>

How To