Dalam reka bentuk web moden, menu navigasi merupakan komponen penting yang sangat meningkatkan pengalaman pengguna. Satu reka bentuk yang bergaya dan mesra pengguna ialah menu navigasi slaid masuk. Dalam blog ini, kita akan berjalan melalui penciptaan menu navigasi slaid masuk menggunakan HTML, CSS dan JavaScript. Tutorial ini sesuai untuk pembangun web yang ingin meningkatkan tapak web mereka dengan sistem navigasi yang anggun dan berfungsi.
Properti peralihan dalam css
Sifat peralihan dalam CSS digunakan untuk mencipta animasi yang lancar apabila sifat CSS berubah dari satu keadaan ke keadaan yang lain. Ia membolehkan anda menentukan sifat mana yang harus dianimasikan, tempoh animasi, fungsi pemasaan (bagaimana animasi berlangsung), dan kelewatan sebelum animasi bermula. Berikut ialah pecahan terperinci sifat peralihan dan cara ia digunakan:
Sintaks
transition: property duration timing-function delay;
Komponen
Pertama, mari kita mulakan dengan struktur HTML. Ini akan menentukan elemen yang diperlukan untuk menu slaid masuk kami.(Baca Lagi)
Keluaran:
Slide-in Navigation Menu
Seterusnya, mari tambah CSS untuk menggayakan menu dan mengawal tingkah laku gelongsornya. Buat fail bernama styles.css dan tambah gaya berikut:
.menu { position: fixed; top: 0; left: -250px; /* Initially off-screen */ height: 100%; width: 250px; /* Adjust as needed */ background-color: #ee3646; transition: left 0.3s ease; /* Only transition the left property */ z-index: 1000; /* Ensure it's above other content */ } .menu.active { left: 0; /* Slide the menu into view */ } /* Example styling for menu items */ .menu-item { padding: 10px; color: #fff; text-decoration: none; display: block; }
Sekarang, mari tambah JavaScript untuk mengendalikan tingkah laku gelongsor menu. Buat fail bernama script.js dan tambah kod berikut:
function toggleMenu() { const menu = document.getElementById('menu'); menu.classList.toggle('active'); } function closeMenu() { const menu = document.getElementById('menu'); menu.classList.remove('active'); }
Inilah yang JavaScript lakukan:
Menyatukan Semuanya
Untuk melihat menu navigasi slaid masuk dalam tindakan, pastikan ketiga-tiga fail (index.html, styles.css, script.js) berada dalam direktori yang sama dan buka index.html dalam penyemak imbas web. Mengklik butang "Togol Menu" seharusnya meluncur dengan lancar menu ke paparan dari kiri. Mengklik pautan "Tutup" dalam menu akan meluncurkannya kembali keluar dari paparan.
Kesimpulan
Mencipta menu navigasi slaid masuk dengan HTML, CSS dan JavaScript ialah proses mudah yang boleh meningkatkan pengalaman pengguna di tapak web anda dengan ketara. Dengan bereksperimen dengan gaya, animasi dan fungsi yang berbeza, anda boleh mencipta navigasi yang unik dan mesra pengguna untuk keperluan tapak web anda.
Baca artikel penuh- Menguasai Seni Harta Terjemahan CSS
Atas ialah kandungan terperinci Mencipta Menu Navigasi Slaid Dalam dengan HTML, CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!