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

Kami akan menyembunyikan menu navigasi asal .navbar-menu dan memaparkan setiap item menu .menu-item sebagai elemen peringkat blok, Dan tambah sedikit penggayaan untuk menjadikannya kelihatan seperti menu lungsur.

Selain itu, kami juga menambahkan elemen .navbar-toggle sebagai butang yang mencetuskan menu dan mencipta elemen .navbar-collapse untuk Menampung menu lungsur. Dengan menambahkan kelas .active pada .navbar-collapse, kami boleh mengawal paparan dan penyembunyiannya. #🎜🎜##🎜🎜#Akhir sekali, tambah beberapa kesan interaktif dalam JavaScript. Kami akan menggunakan pengendali acara mudah untuk menogol .navbar-collapse antara menunjukkan dan menyembunyikan. #🎜🎜#rrreee#🎜🎜#Sekarang, apabila mengklik .navbar-toggle, kami boleh menogol paparan dan menyembunyikan .navbar-collapse. #🎜🎜##🎜🎜#Di atas ialah langkah asas dan kod contoh untuk melaksanakan menu navigasi responsif menggunakan CSS. Anda boleh menggunakan kod sampel ini pada tapak web anda sendiri dan melaraskan serta memanjangkannya mengikut keperluan. Harap artikel ini membantu anda! #🎜🎜#

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