Cara Membuat Tombol Menu Rata Kanan

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

by Catur Kurnia Sari November 29, 2020

Pelajari cara membuat bilah navigasi dengan tautan rata kiri dan rata kanan.

Section Artikel

1 Link Menu Rata Kanan
2 Membuat Bar Navigasi Atas
- 2.1 Langkah 1) Tambahkan HTML
- 2.2 Langkah 2) Tambahkan CSS

Link Menu Rata Kanan

Contoh:

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

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

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

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

.topnav-right {
  float: right;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>
</div>

<div style="padding-left:16px">
  <h2>Navigasi Atas dengan Link Rata Kanan</h2>
  <p>Ini content...</p>
</div>

</body>
</html>

Membuat Bar Navigasi Atas

Langkah 1) Tambahkan HTML

Contoh:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>

Langkah 2) Tambahkan CSS

Contoh:

/* Tambahkan warna background hitam ke navigasi atas */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Beri style link yang ada didalam bar navigasi */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Ubah warna link saat mengarahkan kursor */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Tambahkan warna pada link active/current */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Bagian rata kanan di dalam navigasi atas */
.topnav-right {
  float: right;
}

How To