Reka bentuk menu bar navigasi CSS: reka bentuk berbilang gaya menu bar navigasi

Reka bentuk menu bar navigasi CSS: Mereka bentuk berbilang gaya menu bar navigasi memerlukan contoh kod khusus

Bar navigasi ialah komponen penting tapak web Bahagian antara muka, melalui gaya dan susun atur yang berbeza, boleh memberikan pengguna navigasi yang ringkas dan intuitif. Artikel ini akan memperkenalkan dan menyediakan pelbagai gaya reka bentuk menu bar navigasi CSS, dan memberikan contoh kod yang sepadan.

1. Menu bar navigasi menegak:
   Menu bar navigasi menegak biasanya dipaparkan di sebelah atau bahagian atas halaman web, menempati lebar yang lebih besar dan boleh menampung lebih banyak pilihan navigasi. Kod untuk melaksanakan menu bar navigasi menegak adalah seperti berikut:

kod HTML:

<div class="vertical-menu">
  <a href="#">菜单项 1</a>
  <a href="#">菜单项 2</a>
  <a href="#">菜单项 3</a>
  <a href="#">菜单项 4</a>
</div>

Kod CSS:

Menu bar navigasi mendatar biasanya dipaparkan di bahagian atas atau bawah halaman web, menempati lebar satu baris, dan boleh menavigasi ke pelbagai halaman dengan pantas. Kod untuk melaksanakan menu bar navigasi mendatar adalah seperti berikut:
2. 
   
kod HTML:

.vertical-menu {
  width: 200px;
}

.vertical-menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
}

.vertical-menu a:hover {
  background-color: #ccc;
}

Kod CSS:

Menu lungsur ialah gaya menu bar navigasi biasa, yang boleh memberikan lebih banyak pilihan navigasi dengan menyembunyikan sekumpulan item menu yang berkaitan dalam kotak lungsur. Kod untuk melaksanakan menu lungsur adalah seperti berikut:

3. Kod HTML:
   

   <div class="horizontal-menu">
     <a href="#">菜单项 1</a>
     <a href="#">菜单项 2</a>
     <a href="#">菜单项 3</a>
     <a href="#">菜单项 4</a>
   </div>

   Salin selepas log masuk
Kod CSS:

.horizontal-menu {
  display: flex;
}

.horizontal-menu a {
  flex: 1;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #000;
}

.horizontal-menu a:hover {
  background-color: #ccc;
}

Through contoh kod di atas, kami mencapai Peningkatan kesan gaya menu bar navigasi menegak, menu bar navigasi mendatar dan menu lungsur. Anda boleh terus mengoptimumkan dan melaraskan gaya mengikut keperluan anda sendiri, seperti mengubah suai warna latar belakang, gaya fon, susun atur pilihan navigasi, dsb.

Ringkasan:

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