Rumah >hujung hadapan web >tutorial js >HTML, CSS dan jQuery: Cipta kesan animasi lungsur turun menu navigasi
HTML, CSS dan jQuery: Cipta kesan animasi lungsur turun menu navigasi
- WBOYasal
- 2023-10-27 15:22:441207semak imbas
HTML, CSS dan jQuery: Cipta menu navigasi kesan animasi lungsur turun
Dalam pembangunan web, kesan halaman yang menarik boleh meningkatkan minat pengguna terhadap tapak web dan meningkatkan pengalaman pengguna. Antaranya, navigasi menu adalah salah satu elemen biasa dalam laman web Kita boleh menambah kesan animasi untuk meningkatkan kesan interaktif menu dan menjadikan laman web lebih jelas.
Dalam artikel ini, kami akan menggunakan HTML, CSS dan jQuery untuk mencipta menu navigasi dengan kesan animasi lungsur turun. Melalui langkah berikut, anda akan belajar cara menggunakan teknik ini untuk mencipta menu navigasi yang cantik.
Langkah Pertama: Struktur HTML
Pertama, kita perlu mencipta struktur HTML asas. Di dalam teg badan, tambahkan elemen nav dan tetapkan elemen ul dengan atribut kelas sebagai bekas menu kami, dan kemudian tambahkan beberapa elemen li di dalamnya sebagai pilihan menu.
<!DOCTYPE html>
<html>
<head>
<title>导航菜单下拉动画效果</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">产品</a>
<ul class="submenu">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
</ul>
</li>
<li><a href="#">联系</a></li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>Langkah 2: Gaya CSS
Sekarang, mari tambah gaya CSS untuk menetapkan penampilan dan kesan animasi menu. Mula-mula, kita tetapkan ul.menu的样式，使其具有水平排列的菜单项，并设置其子元素ul.submenu kepada keadaan tersembunyi. Kemudian, tetapkan kesan animasi lungsur turun apabila tetikus melayang dengan menambahkan pseudo-class selector:hover.
ul.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
ul.menu li {
position: relative;
padding: 10px;
background-color: #f7f7f7;
}
ul.menu li:hover ul.submenu {
display: block;
}
ul.menu li ul.submenu {
display: none;
list-style: none;
padding: 0;
position: absolute;
top: 100%;
left: 0;
background-color: #f7f7f7;
}
ul.menu li ul.submenu li {
padding: 10px;
}
ul.menu li ul.submenu li:hover {
background-color: #e1e1e1;
}Langkah 3: Interaksi jQuery
Akhir sekali, kami menggunakan jQuery untuk menetapkan kesan animasi drop-down. Dengan menggunakan kaedah .slideToggle(), apabila tetikus melayang di atas item menu, submenu yang sepadan dikembangkan atau diruntuhkan.
$(document).ready(function(){
$(".menu li").hover(function(){
$(this).find("ul.submenu").slideToggle("fast");
});
});Kod di atas menggunakan kaedah .hover() jQuery untuk melaksanakan fungsi yang sepadan apabila tetikus melayang di atas elemen .menu li. Dalam fungsi, gunakan kaedah .find() untuk mencari elemen ul.submenu yang sepadan dan gunakan kaedah .slideToggle() untuk mengembangkan atau meruntuhkan submenu.
Pada ketika ini, kami telah menyelesaikan penghasilan kesan animasi drop-down menu navigasi. Anda boleh mengubah suai gaya menu mengikut keperluan anda dan menambah lebih banyak item dan gaya submenu.
Ringkasan
Dengan menggunakan HTML, CSS dan jQuery, kami membuat menu navigasi dengan kesan animasi lungsur turun. Kesan animasi ini boleh membawa pengguna pengalaman interaktif yang lebih kaya dan meningkatkan kualiti dan daya tarikan tapak web.
Melalui contoh ini, anda boleh mempunyai pemahaman yang mendalam tentang kerjasama antara HTML, CSS dan jQuery, dan cara menggunakan teknologi ini untuk mencipta kesan halaman yang menarik. Saya harap artikel ini akan membantu anda dalam pembelajaran dan amalan pembangunan web anda.
Atas ialah kandungan terperinci HTML, CSS dan jQuery: Cipta kesan animasi lungsur turun menu navigasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!