Satu contoh menerangkan cara melaksanakan menu sekunder menggunakan CSS tulen

Apabila tapak web menjadi lebih kompleks, bar navigasi menjadi lebih penting. Menu kedua ialah reka bentuk bar navigasi biasa yang boleh memberikan pengguna lebih banyak pilihan dan meningkatkan kebolehgunaan dan kebolehsuaian tapak web. Oleh itu, dalam proses membina laman web, adalah penting untuk melaksanakan menu sekunder yang ringkas dan mudah digunakan. Dalam artikel ini, kita akan belajar cara melaksanakan menu sekunder menggunakan CSS.

1. Reka bentuk struktur HTML

Pertama sekali, kita perlu menyediakan struktur bar navigasi dalam HTML, yang sangat penting untuk pelaksanaan CSS.

Struktur HTML bar navigasi ringkas adalah seperti berikut:

<nav>
  <ul>
    <li><a>Home</a></li>
    <li>
      <a>Services ▼</a>
      <ul>
        <li><a>Web Design</a></li>
        <li><a>Web Development</a></li>
        <li><a>SEO</a></li>
      </ul>
    </li>
    <li><a>About Us</a></li>
    <li><a>Contact Us</a></li>
  </ul>
</nav>

Struktur ini mengandungi elemen nav dan elemen ul. Elemen nav membalut bar navigasi lengkap, manakala elemen ul mengandungi setiap pautan individu dalam bar navigasi, serta pautan yang mengandungi menu kedua.

Perhatikan bahawa elemen li kedua mengandungi elemen ul, yang merupakan bekas menu kedua. Kami akan menambah gaya pada bekas ini dalam langkah seterusnya.

2. Reka bentuk gaya CSS

Seterusnya, kita perlu menetapkan gaya CSS untuk bar navigasi ini untuk melaksanakan menu kedua. Dalam kod di bawah, kami akan mengalih keluar gaya lalai dahulu dan menetapkan gaya berikut untuk semua pautan:

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

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

Blok kod ini mengandungi bahagian berikut:

• Kami Didahulukan , gaya lalai telah dialih keluar dan gaya asas semua pautan telah ditetapkan.
• Seterusnya, kami menetapkan li untuk semua position: relative; elemen kepada kedudukan relatif kepada anak-anaknya. Ini bermakna kita boleh meletakkannya melalui elemen kanak-kanak.
• Setiap menu kedua terkandung oleh elemen ul yang berasingan Kami menetapkan beberapa gaya asas untuk elemen ul ini, seperti kedudukan dan tidak kelihatan.
• Akhir sekali, kami menambah kesan tuding tetikus. Apabila tetikus melayang di atas elemen li, kami akan menukar keterlihatan elemen anaknya kepada kelihatan. Apabila tetikus melayang di atas menu kedua, kami menukar keterlihatan dirinya dan elemen anaknya kepada kelihatan. Iaitu, apabila tetikus melayang di atas bar navigasi, semua menu sekunder akan dipaparkan dalam keadaan yang dipaparkan.

3. Contoh Kod Penuh

Akhirnya, kod HTML dan CSS lengkap kami akan kelihatan seperti ini:

<nav>
  <ul>
    <li><a>Home</a></li>
    <li>
      <a>Services ▼</a>
      <ul>
        <li><a>Web Design</a></li>
        <li><a>Web Development</a></li>
        <li><a>SEO</a></li>
      </ul>
    </li>
    <li><a>About Us</a></li>
    <li><a>Contact Us</a></li>
  </ul>
</nav>

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

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

4. Kesimpulan

Dalam artikel ini, kami mempelajari cara melaksanakan menu sekunder menggunakan CSS. Kami menerangkan struktur HTML dan kod CSS dan menyediakan contoh lengkap untuk membantu pembaca memahami teknik ini dengan lebih baik. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Satu contoh menerangkan cara melaksanakan menu sekunder menggunakan CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!