Cara menggunakan JavaScript untuk melaksanakan fungsi bar navigasi awam

JavaScript ialah bahasa skrip yang digunakan secara meluas dalam pembangunan bahagian hadapan web Fungsinya yang berkuasa dan fleksibiliti membawa kemungkinan tanpa had kepada pembangun. Antaranya, bar navigasi awam ialah elemen reka bentuk web biasa yang boleh meningkatkan pengalaman pengguna dan memudahkan pengguna menavigasi antara halaman yang berbeza. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan reka bentuk bar navigasi awam.

1. Idea Reka Bentuk

Untuk melaksanakan bar navigasi awam, kita perlu mengambil kira faktor berikut:

1. Bar navigasi harus mengandungi satu set pautan yang membimbing pengguna untuk menavigasi antara halaman yang berbeza. Pada masa yang sama, gaya bar navigasi harus konsisten dengan reka bentuk keseluruhan tapak web untuk memastikan pengalaman pengguna.

2. Kedudukan bar navigasi. Bar navigasi hendaklah diletakkan di tempat pengguna boleh mencarinya dengan mudah, seperti di bahagian atas atau bawah halaman.

3. Reka bentuk bar navigasi yang responsif. Memandangkan tapak web moden merangkumi pelbagai peranti dan saiz skrin, bar navigasi harus direka bentuk untuk responsif untuk memastikan ia memaparkan dan menavigasi dengan betul pada semua peranti.

2. Kaedah pelaksanaan

Untuk merealisasikan reka bentuk bar navigasi awam, kita boleh menggunakan kaedah berikut:

1 Gunakan HTML dan CSS untuk mereka bentuk gaya dan susun atur bar navigasi. Kami boleh membuat pautan dan menu navigasi menggunakan HTML dan menggayakannya menggunakan CSS dan meletakkan bar navigasi di bahagian atas atau bawah halaman.

Sebagai contoh, kita boleh membuat senarai dalam HTML dengan semua pautan navigasi dan menggayakannya menggunakan CSS seperti ini:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

nav {
  background-color: #333;
  position: fixed;
  z-index: 1;
  width: 100%;
  top: 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

Kod ini akan mencipta bar navigasi kelabu di kepala halaman dengan jarak 20px antara setiap pautan navigasi dan melabelkan setiap pautan dengan teks putih.

2. Gunakan JavaScript untuk menjadikan bar navigasi responsif. Apabila saiz skrin berubah, reka letak dan gaya bar navigasi harus disesuaikan dengan pelbagai peranti. Untuk melakukan ini, kami boleh menggunakan JavaScript untuk menggayakan bar navigasi secara dinamik.

Sebagai contoh, kita boleh menggunakan kod berikut untuk mendapatkan lebar skrin dan mengira semula lebar menu navigasi apabila saiz skrin berubah:

var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

window.addEventListener("resize", function() {
  screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  setMenuWidth();
});

function setMenuWidth() {
  var menu = document.querySelector("nav ul");
  var menuWidth = menu.offsetWidth;
  
  if (screenWidth < menuWidth) {
    menu.style.maxWidth = `${screenWidth}px`;
  } else {
    menu.style.maxWidth = "none";
  }
}

setMenuWidth();

Kod ini akan memulakan navigasi apabila halaman dimuatkan Lebar menu dan secara dinamik mengira lebar menu navigasi apabila saiz tetingkap berubah dan mengehadkannya kepada lebar skrin.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan JavaScript untuk melaksanakan reka bentuk bar navigasi awam. Dengan menggunakan HTML dan CSS untuk menggayakan dan susun atur bar navigasi, dan menggunakan JavaScript untuk menjadikan bar navigasi responsif, kami boleh mencipta pengalaman navigasi berkualiti tinggi yang berfungsi merentas pelbagai peranti dan saiz skrin, meningkatkan kemudahan pengguna boleh menavigasi antara halaman seks dan keselesaan.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk melaksanakan fungsi bar navigasi awam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!