Langkah-langkah untuk melaksanakan kesan menu lungsur turun bar navigasi responsif menggunakan CSS tulen

Langkah untuk melaksanakan kesan menu lungsur bar navigasi responsif menggunakan CSS tulen

Kini, dengan populariti peranti mudah alih, reka bentuk responsif telah menjadi faktor penting dalam reka bentuk web. Dalam reka bentuk bar navigasi halaman web, untuk memberikan pengalaman pengguna yang lebih baik, biasanya perlu menggunakan menu lungsur turun untuk membentangkan lebih banyak pilihan navigasi. Artikel ini akan memperkenalkan cara menggunakan CSS tulen untuk melaksanakan kesan menu lungsur turun bar navigasi responsif, dengan contoh kod khusus.

<li>Buat struktur HTML
Pertama, kita perlu mencipta struktur HTML asas, termasuk bekas bar navigasi dan menu navigasi. Dalam menu navigasi, kami menggunakan <ul></ul> dan <li> untuk mencipta item menu, manakala menu lungsur menggunakan
bersarang dalam <li>. <ul></ul>和<li>来创建菜单项，而下拉的菜单则使用一个<ul></ul>嵌套在一个<li>中。

<nav class="navbar">
  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

<li>设置基本样式
接下来，我们需要为导航栏和菜单项设置一些基本的样式。我们可以使用flexbox来将菜单项水平排列，并使菜单项之间产生间隔。

.navbar {
  background-color: #f8f8f8;
  padding: 10px;
}

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

.nav-item {
  padding: 10px;
}

.with-dropdown {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  padding: 10px;
}

.dropdown-item {
  padding: 10px;
}

<li>定义点击下拉菜单的行为
通过CSS伪类:hover

.with-dropdown:hover .dropdown {
  display: block;
}

Salin selepas log masuk
Tetapkan gaya asas
Seterusnya, kita perlu menetapkan beberapa gaya asas untuk bar navigasi dan item menu. Kita boleh menggunakan flexbox untuk menyusun item menu secara mendatar dan mencipta jurang antara item menu. <li>


var dropdowns = document.querySelectorAll('.with-dropdown');
dropdowns.forEach(function (dropdown) {
  dropdown.addEventListener('click', function () {
    this.classList.toggle('active');
    var dropdownMenu = this.querySelector('.dropdown');
    dropdownMenu.classList.toggle('open');
  });
});

Salin selepas log masuk
Tentukan tingkah laku mengklik menu lungsur
Melalui kelas pseudo CSS :hover kita boleh mencapai kesan memaparkan menu lungsur apabila tetikus melayang di atas item menu. Pada peranti mudah alih, kami boleh menggunakan JavaScript untuk menambah acara klik untuk menukar paparan dan menyembunyikan menu lungsur.

@media screen and (max-width: 768px) {
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-item {
    display: none;
    padding: 10px;
  }

  .navbar.open .nav-item {
    display: block;
  }

  .navbar-button {
    display: block;
    background-color: #f8f8f8;
    border: none;
    padding: 10px;
    cursor: pointer;
  }
}

Salin selepas log masuk

<nav class="navbar">
  <button class="navbar-button">菜单</button>

  <ul class="nav-menu">
    <li class="nav-item">首页</li>
    <li class="nav-item with-dropdown">
      产品
      <ul class="dropdown">
        <li class="dropdown-item">产品1</li>
        <li class="dropdown-item">产品2</li>
        <li class="dropdown-item">产品3</li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

Salin selepas log masuk
🎜🎜Reka bentuk responsif🎜Untuk menyesuaikan diri dengan pelbagai saiz skrin, kita perlu melaraskan susun atur bar navigasi di bawah lebar port pandangan yang berbeza. Berikut ialah contoh gaya untuk peranti mudah alih dengan lebar port pandangan kurang daripada 768px, menyembunyikan item menu dan menggunakan butang untuk membuka atau menutup menu. 🎜🎜rrreeerrreee🎜Melalui langkah di atas, kami berjaya melaksanakan kesan menu lungsur turun bar navigasi responsif CSS tulen. Apabila lebar skrin kecil, item menu disembunyikan secara automatik dan butang boleh digunakan untuk membuka atau menutup menu. Apabila anda menuding pada item menu dengan menu lungsur, menu lungsur turun secara automatik muncul. Pelaksanaan ini mudah dan cekap, tidak bergantung pada JavaScript, dan sesuai untuk pelbagai projek web. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Langkah-langkah untuk melaksanakan kesan menu lungsur turun bar navigasi responsif menggunakan CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!