Menu navigasi web CSS: Cipta pelbagai menu navigasi interaktif

Menu navigasi web CSS: Mencipta pelbagai menu navigasi interaktif memerlukan contoh kod khusus

Menu navigasi ialah salah satu komponen penting halaman web, yang boleh membantu pengguna menavigasi dengan pantas ke pelbagai halaman tapak web. Melalui penggunaan CSS yang fleksibel, kami boleh mencipta pelbagai menu navigasi interaktif untuk meningkatkan pengalaman pengguna dan kebolehgunaan laman web. Dalam artikel ini, saya akan memperkenalkan beberapa jenis menu navigasi biasa dan memberikan contoh kod yang sepadan untuk rujukan.

<li>Menu Navigasi Mendatar

Menu navigasi mendatar ialah jenis menu navigasi yang paling biasa. Ia biasanya dibentangkan sebagai deretan pautan tersusun mendatar yang digunakan untuk menavigasi ke halaman yang berbeza. Berikut ialah contoh kod untuk menu navigasi mendatar yang ringkas:

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

.horizontal-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal-menu li {
  display: inline-block;
}

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

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

Kod di atas menggunakan senarai <ul> dan item senarai <li> untuk mencipta menu navigasi. Dengan menetapkan display: inline-block;, item menu disusun secara mendatar. Warna latar belakang item menu berubah pada tetikus untuk memberikan maklum balas visual. <ul> 和列表项 <li> 来创建导航菜单。通过设置 display: inline-block;，使得菜单项水平排列。鼠标悬停时，菜单项的背景色会发生变化，以提供视觉反馈。

<li>垂直导航菜单

垂直导航菜单是另一种常见的导航菜单类型。它通常呈现为一列垂直排列的链接，用于导航到不同页面。以下是一个简单的垂直导航菜单的代码示例：

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

.vertical-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.vertical-menu li {
  margin-bottom: 10px;
}

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

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

以上代码同样使用了无序列表和列表项来创建导航菜单。通过设置 margin-bottom: 10px;，使得菜单项垂直排列，之间有一定的间距。鼠标悬停时，菜单项的背景色也会发生变化。

<li>下拉菜单

下拉菜单是一种常见的交互式导航菜单，它可以展示更多的菜单选项，并且在鼠标悬停时显示隐藏的选项。以下是一个简单的下拉菜单的代码示例：

<ul class="dropdown-menu">
  <li><a href="#">产品</a>
    <ul>
      <li><a href="#">产品一</a></li>
      <li><a href="#">产品二</a></li>
      <li><a href="#">产品三</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

.dropdown-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  display: inline-block;
  position: relative;
}

.dropdown-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown-menu li:hover ul {
  display: block;
}

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

.dropdown-menu li a:hover {
  background-color: #f1f1f1;
}

以上代码中，通过设置 position: relative; 和 position: absolute;，使得隐藏的下拉菜单在鼠标悬停时显示在父菜单下方。另外，通过设置 display: none; 和 display: block;

Menu Navigasi Menegak
🎜Menu navigasi menegak ialah satu lagi jenis menu navigasi yang biasa. Ia biasanya dibentangkan sebagai lajur pautan yang disusun secara menegak yang digunakan untuk menavigasi ke halaman yang berbeza. Berikut ialah contoh kod untuk menu navigasi menegak yang ringkas: 🎜rrreeerrreee🎜Kod di atas juga menggunakan senarai dan item senarai yang tidak tersusun untuk mencipta menu navigasi. Dengan menetapkan margin-bottom: 10px;, item menu disusun secara menegak dengan jarak tertentu di antaranya. Warna latar belakang item menu juga berubah pada tetikus. 🎜
🎜Menu lungsur🎜🎜🎜Menu lungsur ialah menu navigasi interaktif biasa yang boleh memaparkan lebih banyak pilihan menu dan menunjukkan pilihan tersembunyi pada tuding tetikus. Berikut ialah contoh kod menu lungsur mudah: 🎜rrreeerrreee🎜Dalam kod di atas, dengan menetapkan position: relative; dan position: absolute;, yang tersembunyi menu lungsur turun ialah Muncul di bawah menu induk pada tetikus. Selain itu, dengan menetapkan display: none; dan display: block;, menu boleh dipaparkan dan disembunyikan. 🎜🎜Dengan contoh kod di atas, kita boleh mencipta pelbagai jenis menu navigasi interaktif. Sudah tentu, ini hanyalah beberapa contoh asas dan anda boleh mengembangkan dan mengubah suainya mengikut keperluan anda untuk mencipta menu navigasi yang lebih unik yang sesuai dengan tapak web anda. Semoga berjaya mencipta menu navigasi yang cantik dan berfungsi! 🎜

Atas ialah kandungan terperinci Menu navigasi web CSS: Cipta pelbagai menu navigasi interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!