Laksanakan menu navigasi responsif menggunakan CSS

Menggunakan CSS untuk melaksanakan menu navigasi responsif

Dengan populariti peranti mudah alih, semakin banyak tapak web perlu menyesuaikan diri dengan saiz skrin yang berbeza. untuk memberikan pengalaman pengguna yang lebih baik. Pada peranti mudah alih, disebabkan ruang skrin yang terhad, menu navigasi mendatar tradisional mungkin tidak dipaparkan sepenuhnya pada skrin kecil atau menyebabkan pengguna terus meleret skrin untuk melihat item menu yang lengkap. Oleh itu, menu navigasi responsif menjadi semakin popular.

Artikel ini akan memperkenalkan cara menggunakan CSS untuk melaksanakan menu navigasi responsif yang mudah dan memberikan contoh kod khusus.

Pertama, buat struktur menu navigasi asas dalam fail HTML. Berikut ialah contoh mudah:

<nav class="navbar">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="navbar-menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item"><a href="#">Products</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</nav>

Dalam fail CSS, kita perlu menambah beberapa gaya untuk menjadikan menu navigasi responsif.

Pertama, tambahkan penggayaan asas pada menu navigasi supaya kelihatan seperti bar navigasi mendatar:

.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.navbar-brand {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  margin-left: 10px;
}

.menu-item a {
  color: #fff;
  text-decoration: none;
}

Kemudian, kita perlu menambah penggayaan responsif untuk saiz skrin kecil .

Pada skrin kecil, kami mahu menu navigasi menjadi menu lungsur turun menegak. Kita boleh menggunakan pertanyaan media CSS untuk mencapai kesan ini.

@media (max-width: 600px) {
  .navbar-menu {
    display: none;
  }

  .menu-item {
    display: block;
    margin: 10px 0;
  }

  .menu-item a {
    display: block;
    padding: 10px;
    background-color: #333;
  }

  .navbar-toggle {
    display: block;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
  }

  .navbar-collapse {
    display: none;
    background-color: #333;
    padding: 10px;
  }

  .navbar-collapse.active {
    display: block;
  }
}

Dalam kod di atas, @media (max-width: 600px) bermaksud gaya ini digunakan apabila lebar skrin kurang daripada atau sama dengan 600px. @media (max-width: 600px) 表示当屏幕宽度小于等于 600px 时应用这些样式。

我们将隐藏原始的导航菜单 .navbar-menu，并将每个菜单项 .menu-item 显示为块级元素，并添加一些样式以使其看起来像一个下拉菜单。

另外，我们还添加了一个 .navbar-toggle 元素作为触发菜单的按钮，并创建了一个 .navbar-collapse 元素来容纳下拉菜单。通过给 .navbar-collapse 添加 .active 类，我们可以控制它的显示和隐藏。

最后，在JavaScript中添加一些交互效果。我们将使用简单的事件处理函数来切换 .navbar-collapse 的显示和隐藏。

document.querySelector('.navbar-toggle').addEventListener('click', function() {
  document.querySelector('.navbar-collapse').classList.toggle('active');
});

现在，当点击 .navbar-toggle 时，我们可以切换 .navbar-collapse

Atas ialah kandungan terperinci Laksanakan menu navigasi responsif menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!