Reka bentuk bar navigasi web CSS: membuat pelbagai gaya bar navigasi

Reka bentuk bar navigasi web CSS: Untuk mencipta pelbagai gaya bar navigasi, contoh kod khusus diperlukan

Bar navigasi ialah salah satu komponen terpenting dalam reka bentuk web. Ia bukan sahaja memudahkan pengguna melayari halaman laman web yang berbeza , tetapi juga Memberi panduan yang jelas tentang struktur tapak web. Apabila mereka bentuk bar navigasi, masalah yang sering kita hadapi ialah cara mencipta bar navigasi yang cantik dan berfungsi. Artikel ini akan memperkenalkan beberapa kaedah reka bentuk bar navigasi CSS biasa dan memberikan contoh kod yang sepadan untuk membantu pembaca memahami dan menerapkannya dengan lebih baik.

1. Bar navigasi asas
   Bar navigasi asas ialah reka bentuk yang paling biasa, biasanya menggunakan senarai tidak tertib (ul) untuk mewakili item menu bar navigasi. Kita boleh menggunakan CSS untuk menetapkan gaya bar navigasi, seperti warna latar belakang, saiz fon, jidar, dsb.

Contoh kod HTML:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Contoh kod CSS:

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline;
}

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

nav a:hover {
  background-color: #666;
}

2. Bar navigasi responsif
Dengan populariti peranti mudah alih, semakin ramai pengguna melayari web melalui telefon mudah alih atau tablet. Oleh itu, kami perlu mereka bentuk gaya responsif untuk bar navigasi untuk mempersembahkan pengalaman pengguna terbaik pada peranti yang berbeza.

Reka bentuk bar navigasi responsif yang biasa ialah menu lungsur turun mudah alih. Apabila lebar skrin kurang daripada ambang tertentu, item menu bar navigasi akan dipaparkan dalam bentuk butang Selepas pengguna mengklik butang, item menu akan dipaparkan dalam bentuk senarai juntai bawah .

Contoh kod HTML:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  <button class="menu-btn">&#9776;</button>
</nav>

Contoh kod CSS:

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

nav li {
  display: inline;
}

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

nav a:hover {
  background-color: #666;
}

.menu-btn {
  display: none;
}

@media only screen and (max-width: 768px) {
  nav ul {
    display: none;
  }
  
  .menu-btn {
    display: block;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
  }
  
  .menu-btn:hover {
    background-color: #666;
  }
  
  .menu-btn:focus {
    outline: none;
  }
  
  .menu-dropdown {
    display: none;
    background-color: #333;
    padding: 10px;
  }
  
  .show {
    display: block;
  }
}

3 Bar navigasi lungsur
Bar navigasi lungsur boleh mengatur dan memaparkan subhalaman tapak web dengan lebih baik, memberikan lebih banyak pilihan navigasi. Kita boleh menggunakan CSS pseudo-class:hover untuk mencapai kesan drop-down.

Contoh kod HTML:

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a>
      <ul class="submenu">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">团队介绍</a></li>
      </ul>
    </li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Contoh kod CSS:

nav {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

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

nav a:hover {
  background-color: #666;
}

.submenu {
  display: none;
  background-color: #666;
  position: absolute;
  top: 100%;
  left: 0;
}

nav li:hover .submenu {
  display: block;
}

Artikel ini memperkenalkan kaedah reka bentuk bar navigasi asas, bar navigasi responsif dan bar navigasi lungsur, serta memberikan contoh kod yang sepadan. Pembaca boleh mengubah suai dan menyesuaikan kod sampel ini agar sesuai dengan keperluan tapak web mereka sendiri. Melalui reka bentuk CSS yang munasabah, kami boleh mencipta pelbagai gaya bar navigasi untuk memberikan pengguna pengalaman menyemak imbas tapak web yang lebih baik. Sudah tentu, ini hanyalah puncak gunung ais apabila ia datang untuk mereka bentuk bar navigasi Terdapat lebih banyak teknik dan butiran reka bentuk yang menunggu untuk kami terokai dan gunakan. Semoga artikel ini bermanfaat kepada pembaca!

Atas ialah kandungan terperinci Reka bentuk bar navigasi web CSS: membuat pelbagai gaya bar navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!