Bagaimana untuk melaksanakan navigasi menu dalam css

CSS ialah bahasa reka bentuk yang berkuasa yang boleh digunakan untuk mencantikkan gaya dan reka letak elemen halaman web. Antaranya, melaksanakan navigasi menu adalah aplikasi biasa CSS. Dalam artikel ini, kami akan memperincikan cara melaksanakan navigasi menu menggunakan CSS.

1. Struktur asas HTML

Sebelum kita mula menulis gaya CSS, kita perlu memahami struktur asas HTML. Dalam contoh ini, kita perlu mencipta navigasi menu dan menentukan struktur asasnya. Berikut ialah kod HTML asas:

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

Dalam struktur HTML ini, kami menggunakan tag <nav> untuk mentakrifkan navigasi menu. Teg <ul> digunakan untuk membuat senarai tidak tersusun dan item senarai menggunakan teg <li>. Setiap item senarai mengandungi pautan, menggunakan teg <a>. Sekarang kita telah menentukan struktur asas navigasi menu, kita akan mula menulis gaya CSS

2. Gaya asas

Sebelum memulakan reka bentuk gaya, anda boleh menambah beberapa pada keseluruhan menu. gaya asas adalah seperti berikut:

nav {
  background-color: #333;
  font-size: 18px;
  border-radius: 5px;
}

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

li {
  display: inline-block;
  margin: 0 10px;
}

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

Dalam gaya asas ini, kami menetapkan warna latar belakang, saiz fon, sudut bulat jidar dan gaya lain navigasi menu. Untuk senarai tidak tersusun, kami menetapkan gaya paparannya kepada Tiada, tetapkan kedua-dua jidar dalam dan luar kepada 0, dan setiap item senarai ialah elemen peringkat blok sebaris dengan jidar tertentu. Gaya untuk gaya pautan termasuk menetapkan warna teks kepada putih, tidak menetapkan garis bawah, pelapik, dsb.

3. Alih tetikus dan gaya pemilihan

Seterusnya, kami boleh menambah kesan gaya untuk alih tetikus dan pemilihan. Sebagai contoh, apabila tetikus bergerak ke atas pautan, kami mahu warna latar belakang pautan berubah untuk menunjukkan kepada pengguna bahawa pautan itu sedang aktif. Kesan ini boleh dicapai dengan kod berikut:

a:hover {
  background-color: #555;
}

a:active {
  background-color: #777;
}

Apabila tetikus melayang di atas pautan, warna latar belakang pautan akan bertukar kepada kelabu gelap apabila pengguna mengklik pautan, warna latar belakang akan; seterusnya menjadi kelabu muda untuk menyerlahkan keadaan aktif pautan.

4. Menu lungsur turun

Untuk item menu utama dengan submenu, kami mungkin perlu melaksanakan kesan menu lungsur supaya pengguna boleh mengakses item submenu dengan lebih mudah. Menu lungsur turun boleh dilaksanakan menggunakan kelas pseudo CSS dan sifatnya. Menu lungsur turun boleh ditambah pada item menu utama dengan kod berikut:

li:hover ul {
  display: block;
}

ul ul {
  display: none;
  position: absolute;
  top: 40px;
  background-color: #555;
}

ul ul li {
  display: block;
  width: 200px;
}

ul ul li a {
  padding: 8px;
}

Dalam kod ini, kami telah menggunakan kelas pseudo li:hover untuk mengesan sama ada tetikus melayang di atas menu utama item. Jika ya, paparkan menu lungsur turun dalam elemen anak di bawah. Untuk menu lungsur, kerana ia sebenarnya berada di bawah item menu utama, kita perlu meletakkannya secara mutlak dan meletakkannya di bawah item menu utama. Warna teks dan warna latar belakang menu lungsur turun juga mungkin sedikit berbeza supaya pengguna dapat membezakan dengan jelas antara item menu utama dan item submenu.

5. Reka bentuk responsif

Apabila mereka bentuk tapak web, kita harus mengambil kira perbezaan antara peranti yang berbeza. Oleh itu, untuk memastikan navigasi menu dipaparkan dengan betul pada peranti mudah alih, kami perlu menambah beberapa gaya reka bentuk responsif. Sebagai contoh, kita mungkin perlu menyembunyikan menu lungsur pada peranti mudah alih dan menambah gaya khusus pada peranti skrin sentuh. Ini boleh dicapai dengan kod berikut:

@media screen and (max-width: 768px) {
  ul {
    display: none;
    position: absolute;
    top: 60px;
    width: 100%;
    background-color: #333;
  }

  li {
    display: block;
    margin: 0;
  }

  li:hover ul {
    display: none;
  }

  a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #fff;
  }
}

Dalam kod ini, kami telah menambah @media pertanyaan media untuk mengesan saiz skrin peranti. Sesetengah gaya berubah jika lebar skrin kurang daripada atau sama dengan 768 piksel. Sebagai contoh, kami akan melumpuhkan menu lungsur dan menyusun item menu di atas satu sama lain sambil menambah sempadan bawah untuk membezakan setiap item menu. Selain itu, kami mengalihkan keseluruhan menu ke bahagian atas halaman menggunakan kedudukan mutlak untuk memastikan menu lebih mudah digunakan pada peranti skrin sentuh.

Di atas ialah reka bentuk gaya yang diperlukan untuk melaksanakan navigasi menu. Hanya salin kod gaya CSS ini dan tambahkannya pada halaman web anda. Sudah tentu, dalam pembangunan sebenar, beberapa perubahan perlu dibuat berdasarkan keperluan khusus tapak web, tetapi ia menyediakan titik permulaan yang baik untuk menambah navigasi menu yang cantik ke tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan navigasi menu dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!