Langkah untuk melaksanakan kesan tab lungsur turun bar navigasi responsif menggunakan CSS tulen

Langkah untuk melaksanakan kesan tab lungsur turun bar navigasi responsif menggunakan CSS tulen

Bar navigasi ialah elemen biasa dalam reka bentuk web, dan menggunakan reka bentuk responsif boleh menjadikan bar navigasi dipaparkan dengan baik pada saiz skrin yang berbeza dan operasi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan CSS tulen untuk melaksanakan bar navigasi responsif dengan kesan tab lungsur.

Langkah 1: Sediakan struktur HTML
Pertama, kita perlu menyediakan struktur HTML asas. Bar navigasi biasanya dibalut menggunakan senarai tidak tertib (<ul></ul>)，每个导航项使用列表项(<li>). Tab lungsur turun memerlukan penambahan senarai tidak tersusun bersarang di dalam item senarai.

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="dropdown">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Langkah 2: Tetapkan gaya asas
Untuk mencapai kesan responsif, kita perlu menggunakan pertanyaan media CSS untuk menetapkan mod paparan bar navigasi di bawah saiz skrin yang berbeza. Pada masa yang sama, anda juga perlu menetapkan gaya asas bar navigasi dan tab lungsur.

.navbar {
  background-color: #333;
  height: 50px;
}

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

.nav-list li {
  position: relative;
}

.nav-list li a {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  line-height: 50px;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  width: 100%;
}

.dropdown li {
  width: 100%;
}

.dropdown li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

Langkah 3: Tetapkan gaya responsif
Dalam pertanyaan media, kami boleh menetapkan mod paparan bar navigasi mengikut saiz skrin yang berbeza. Apabila lebar skrin kecil, kita boleh menggunakan bar skrol mendatar untuk memaparkan pilihan navigasi. Apabila lebar skrin lebih besar, kita boleh menggunakan tab lungsur untuk dipaparkan.

@media screen and (max-width: 768px) {
  .nav-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-list li {
    white-space: nowrap;
  }
  
  .nav-list li a {
    display: inline-block;
  }
  
  .dropdown {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .nav-list li:hover .dropdown {
    display: block;
  }
}

Melalui tiga langkah di atas, kami boleh melaksanakan bar navigasi responsif dengan kesan tab lungsur. Pada skrin yang lebih kecil, pilihan navigasi akan menatal secara mendatar, manakala pada skrin yang lebih besar, tab lungsur akan muncul dengan menuding pada item navigasi.

Reka bentuk bar navigasi sedemikian bukan sahaja berkuasa, tetapi juga mempunyai pengalaman pengguna yang baik, membolehkan pengguna menyemak imbas dan mengendalikan halaman web dengan mudah pada peranti yang berbeza. Melalui penggunaan fleksibel pertanyaan media CSS, kami boleh mencapai kesan dinamik lebih banyak elemen dalam reka bentuk responsif.

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