Langkah-langkah untuk melaksanakan kesan submenu lungsur bagi bar navigasi responsif menggunakan CSS tulen

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

Dengan populariti peranti mudah alih, reka bentuk responsif telah menjadi semakin penting dan bar navigasi adalah bahagian yang sangat penting dalam laman web. Artikel ini akan memperkenalkan cara menggunakan CSS tulen untuk melaksanakan kesan submenu lungsur dalam bar navigasi responsif, supaya tapak web boleh mempunyai pengalaman pengguna yang baik dalam saiz skrin yang berbeza.

Langkah 1: Struktur HTML
Pertama, kita perlu membina struktur HTML asas. Bar navigasi biasanya dibuat menggunakan senarai tidak tertib ul dan item senarai li.

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">首页</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">产品</a>
      <ul class="sub-menu">
        <li><a href="#">产品一</a></li>
        <li><a href="#">产品二</a></li>
        <li><a href="#">产品三</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">关于我们</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">联系我们</a>
    </li>
  </ul>
</nav>

Langkah 2: Gaya CSS
Seterusnya, kita perlu menggunakan CSS untuk menambah gaya, termasuk menetapkan warna latar belakang bar navigasi, gaya fon dan menunjukkan serta menyembunyikan submenu.

.navbar {
  background-color: #333;
  height: 60px;
  padding: 0 20px;
}

.navbar-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  list-style-type: none;
  width: 200px;
  padding: 0;
  margin: 0;
}

.nav-item:hover .sub-menu {
  display: block;
}

.sub-menu li {
  padding: 10px;
}

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

Langkah 3: Reka Bentuk Responsif
Untuk menyesuaikan diri dengan saiz skrin yang berbeza, kami perlu menambahkan beberapa pertanyaan media pada gaya CSS. Di bawah ialah contoh mudah yang hanya merangkumi satu kes, jika lebih banyak gaya responsif diperlukan, anda boleh menambahkannya berdasarkan keperluan khusus anda.

@media screen and (max-width: 768px) {
  .navbar-nav {
    flex-wrap: wrap;
  }
  
  .nav-link {
    padding: 10px 0;
  }
  
  .sub-menu {
    position: static;
    display: block;
    background-color: transparent;
    width: 100%;
  }
  
  .sub-menu li {
    padding: 10px;
    border-top: 1px solid #fff;
  }
}

Ringkasan:
Melalui langkah di atas, kita boleh mencapai kesan submenu lungsur turun bar navigasi responsif yang mudah. Pada skrin besar, submenu dipaparkan melalui keadaan tuding CSS pada skrin kecil, submenu akan dipaparkan sebagai elemen peringkat blok bebas, dengan beberapa gaya tambahan ditambah untuk menyesuaikan dengan saiz skrin yang berbeza.

Perlu diingat bahawa ini hanyalah contoh asas, dan lebih banyak gaya dan fungsi mungkin diperlukan dalam projek sebenar untuk memenuhi keperluan. Tetapi melalui contoh ini, anda boleh belajar cara menggunakan CSS tulen untuk melaksanakan kesan submenu lungsur turun bar navigasi responsif, dan ia boleh dikembangkan dan dilaraskan mengikut keperluan khusus.

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