Mencipta Bar Navigasi Responsif dengan HTML, CSS dan JavaScript

Dalam landskap pembangunan web hari ini, mewujudkan bar navigasi yang responsif dan mesra pengguna adalah penting. Artikel ini menerangkan proses mereka bentuk bar navigasi responsif menggunakan HTML, CSS dan JavaScript.

Ikhtisar
Kod yang disediakan menunjukkan cara membina bar navigasi yang menyesuaikan diri dengan saiz skrin yang berbeza. Bar navigasi termasuk navigasi atas standard untuk skrin yang lebih besar dan menu navigasi sisi yang meluncur masuk dari kiri untuk skrin yang lebih kecil. Pendekatan ini memastikan pengalaman pengguna yang lancar merentas pelbagai peranti.

Struktur HTML
HTML menyediakan struktur asas untuk halaman web. Ia termasuk:

Elemen yang mengandungi tajuk tapak web dan butang togol untuk navigasi sisi.
Dua elemen: satu untuk navigasi pengepala dan satu lagi untuk navigasi sisi.
Bahagian untuk kandungan utama halaman.
Butang togol (☰) digunakan untuk membuka dan menutup menu navigasi sisi pada skrin yang lebih kecil.

<header>
    <h1>My Website</h1>
    <button id="toggle-btn">☰</button>
    <nav id="header-nav">
        <!-- Navigation menu will be inserted here -->
    </nav>
</header>
<nav id="side-nav">
    <!-- Navigation menu will be inserted here -->
</nav>
<main>
    <h2>Welcome to My Website</h2>
    <p>This is the content of the page.</p>
</main>

Penggayaan CSS
Gaya CSS mentakrifkan penampilan dan tingkah laku elemen navigasi:

• Gaya Umum: Badan dan pengepala mempunyai penggayaan asas untuk fon, jarak dan reka letak. Tingkah laku tatal: licin; hartanah memastikan kesan tatal yang lancar.
• Navigasi Sisi: Pada mulanya diletakkan di luar skrin dengan kiri: -250px, ia meluncur ke paparan dengan kesan peralihan apabila kelas aktif digunakan. Lebar ditetapkan kepada 250px dan ia meliputi ketinggian penuh port pandangan.
• Reka Bentuk Responsif: Pertanyaan media melaraskan paparan elemen navigasi berdasarkan saiz skrin. Untuk skrin yang lebih sempit daripada 768px, navigasi pengepala disembunyikan dan butang togol ditunjukkan. Sebaliknya, navigasi sisi disembunyikan pada skrin yang lebih besar.

nav#side-nav {
  background: #191d2b;
  width: 250px;
  height: 100vh;
  position: relative;
  top: 0;
  left: -250px;
  transform: translateX(0);
  transition: all .4s ease-out;
  z-index: 10;
}

nav#side-nav.active {
  left: 0;
}

@media (max-width: 768px) {
  header nav#header-nav {
    display: none;
  }

  header #toggle-btn {
    display: block;
  }
}

@media (min-width: 769px) {
  nav#side-nav {
    display: none;
  }
}

Fungsi JavaScript
JavaScript digunakan untuk memasukkan menu navigasi secara dinamik ke dalam kedua-dua bahagian pengepala dan navigasi sisi. Skrip juga mengurus kefungsian butang togol, membolehkan pengguna menunjukkan atau menyembunyikan menu navigasi sisi.

const navMenu = `
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
`;

document.getElementById('header-nav').innerHTML = navMenu;
document.getElementById('side-nav').innerHTML = navMenu;

document.getElementById('toggle-btn').onclick = function() {
    let sideNav = document.getElementById('side-nav');
    sideNav.classList.toggle('active');
};

Demo Langsung
Anda boleh melihat demo langsung bar navigasi responsif sedang beraksi di sini: Lihat Demo Langsung.

Repositori GitHub
Untuk mendapatkan kod sumber yang lengkap, termasuk fail HTML, CSS dan JavaScript, lawati repositori GitHub: Bar Navigasi Responsif.

Kesimpulan
Pendekatan untuk mencipta bar navigasi responsif ini menyediakan penyelesaian yang mantap untuk reka bentuk web moden. Dengan memanfaatkan HTML untuk struktur, CSS untuk penggayaan dan JavaScript untuk interaktiviti, pembangun boleh memastikan pengalaman navigasi yang lancar dan adaptif untuk pengguna pada mana-mana peranti. Kod ini boleh menjadi asas untuk sistem navigasi yang lebih kompleks, menyesuaikan diri dengan keperluan pelbagai projek.

Atas ialah kandungan terperinci Mencipta Bar Navigasi Responsif dengan HTML, CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!