How To

Cara Membuat Menu Navigasi Mengecil saar di Scroll

Pelajari cara mengubah ukuran bar navigasi saat di scroll dengan CSS dan JavaScript.

Contoh:

<!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;
}

#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

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

#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

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

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

#navbar-right {
  float: right;
}

@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px ;
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}
</style>
</head>
<body>

<div id="navbar">
  <a href="#default" id="logo">CompanyLogo</a>
  <div id="navbar-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

<div style="margin-top:210px;padding:15px 15px 2500px;font-size:30px">
  <p><b>Contoh ini menunjukkan cara menciutkan bar navigasi saat pengguna mulai scroll halaman.</b></p>
  <p>Scroll ke bawah frame ini untuk melihat efeknya!</p>
  <p>Scroll ke atas untuk menghilangkan efeknya.</p>
  <p><b>Catatan:</b> Kami juga telah membuat navbar responsif, ubah ukuran jendela browser untuk melihat efeknya.</p>
  <p>Lorem ipsum dolor dummy text to enable scrolling, sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<script>
// Saat pengguna menggulir ke bawah 80px dari bagian atas dokumen, ubah ukuran padding bar navigasi dan ukuran font logo
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}
</script>

</body>
</html>

Cara Mengecilkan Navbar di Scroll

Langkah 1) Tambahkan HTML

Buat bilah navigasi.

Contoh:

<div id="navbar">
  <a href="#default" id="logo">CompanyLogo</a>
  <div id="navbar-right">
    <a class="active" href="#home">Home</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

Langkah 2) Tambahkan CSS

Memberi style bar navigasi.

Contoh:

/* Buat navbar sticky/fixed */#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px; /* Padding besar yang akan menyusut saat di-scroll (menggunakan JS) */  transition: 0.4s; /* Menambahkan efek transisi saat padding dikurangi */  position: fixed; /* navbar Sticky/fixed */  width: 100%;
  top: 0; 
  z-index: 99;
}

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

/* Style logo */#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

/* Link di atas mouse */#navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Style link active/current */#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

/* Tampilkan beberapa link ke kanan */#navbar-right {
  float: right;
}

/* Tambahkan respons - pada layar dengan lebar kurang dari 580px, tampilkan bar navigasi secara vertikal, bukan horizontal */@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px ; /* Gunakan  untuk memastikan bahwa JavaScript tidak menimpa padding di layar kecil */  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}

Langkah 3) Tambahkan JavaScript

Contoh:

// Saat pengguna scroll ke bawah 80px dari bagian atas dokumen, ubah ukuran padding bar navigasi dan ukuran font logo
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "30px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  } else {
    document.getElementById("navbar").style.padding = "80px 10px";
    document.getElementById("logo").style.fontSize = "35px";
  }
}

Catur Kurnia Sari

Share
Tags: How To