HTML, CSS dan jQuery: Buat menu menegak animasi

HTML, CSS dan jQuery: Buat menu menegak dengan animasi

Dalam reka bentuk web moden, kesan dinamik telah menjadi salah satu faktor penting untuk menarik perhatian pengguna. Dalam menu navigasi halaman web, kesan animasi boleh memberikan pengguna pengalaman visual dan kebolehkendalian yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta menu menegak animasi, dan menyediakan contoh kod khusus.

1. Bahagian HTML

Pertama, kita perlu menggunakan HTML untuk membina struktur menu. Tambahkan elemen div dalam teg badan untuk membalut keseluruhan menu. Kemudian, tambahkan senarai tidak tertib (ul) dalam elemen div itu sebagai bekas untuk item menu. Setiap item menu memerlukan elemen pautan (a) untuk melompat ke halaman yang sepadan. Berikut ialah contoh kod HTML yang mudah:

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

2. Bahagian CSS

Seterusnya, kita perlu menggunakan CSS untuk menggayakan menu. Mula-mula, tambahkan gaya asas pada item menu, seperti warna latar belakang, warna teks dan jidar. Kemudian, gunakan pemilih CSS untuk menggayakan item menu apabila anda menuding di atasnya untuk mencapai kesan tuding. Akhir sekali, tambahkan kesan animasi pada menu untuk meningkatkan pengalaman pengguna.

Berikut ialah contoh kod CSS ringkas:

.vertical-menu {
  width: 200px;
  background-color: #f1f1f1;
}

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

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

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

.vertical-menu li a.active {
  background-color: #4CAF50;
  color: #fff;
}

.vertical-menu li a.active:hover {
  background-color: #45a049;
}

3. bahagian jQuery

Akhir sekali, kami menggunakan jQuery untuk menghidupkan menu. Kita boleh menggunakan kaedah .slideToggle() untuk mengembangkan atau meruntuhkan submenu apabila item menu diklik. Selain itu, kami juga boleh menggunakan kaedah .addClass() dan .removeClass() untuk menambah atau mengalih keluar kelas .active untuk item menu yang dipilih pada masa ini untuk menukar gayanya.

Berikut ialah contoh kod jQuery yang mudah:

$(document).ready(function() {
  $(".vertical-menu li").click(function() {
    $(this).children("ul").slideToggle("slow");
    $(this).children("a").toggleClass("active");
  });
});

Kini, kami telah selesai membuat menu menegak dengan animasi. Apabila pengguna mengklik pada item menu, submenu bernyawa untuk mengembangkan atau runtuh, dan item menu yang dipilih pada masa ini menukar warna latar belakang. Anda boleh terus mengoptimumkan dan melaraskan kod mengikut keperluan anda untuk mencapai kesan yang lebih diperibadikan.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta menu menegak dengan animasi. Dengan membina struktur menu dengan HTML, menambah gaya dengan CSS, dan melaksanakan kesan animasi dengan jQuery, kami boleh menambah lebih interaktiviti dan menarik kepada menu navigasi halaman web. Saya harap artikel ini dapat memberikan sedikit bantuan kepada amalan anda menggunakan kesan animasi dalam reka bentuk web.

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Buat menu menegak animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!