Mencipta Menu Navigasi Slaid Dalam dengan HTML, CSS dan JavaScript

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

1. property: Ini menentukan sifat CSS yang anda mahu animasikan. Anda boleh menganimasikan hampir semua sifat CSS, seperti lebar, tinggi, warna latar belakang, kelegapan, dll. Anda juga boleh menggunakan kata kunci semua untuk menganimasikan semua sifat yang boleh dialihkan.
2. tempoh: Ini mentakrifkan tempoh peralihan yang perlu diambil. Ia dinyatakan dalam saat (cth., 1s untuk 1 saat) atau milisaat (cth., 500ms untuk 500 milisaat).
3. fungsi pemasaan: Ini menerangkan cara nilai perantaraan peralihan dikira. Nilai biasa termasuk:

• linear: Peralihan adalah genap dari awal hingga akhir.
• kemudahan: Peralihan bermula perlahan, kemudian dipercepatkan, dan kemudian perlahan semula (nilai lalai).
• kemudahan masuk: Peralihan bermula perlahan-lahan.
• ease-out: Peralihan berakhir dengan perlahan.
• kemudahan masuk-keluar: Peralihan bermula dan berakhir dengan perlahan.
• Anda juga boleh menentukan fungsi pemasaan tersuai menggunakan fungsi cubic-bezier.

1. kelewatan: Ini menentukan tempoh menunggu sebelum memulakan peralihan. Seperti tempoh, ia ditentukan dalam saat atau milisaat. Nilai lalai ialah 0s (tiada kelewatan).

Pertama, mari kita mulakan dengan struktur HTML. Ini akan menentukan elemen yang diperlukan untuk menu slaid masuk kami.(Baca Lagi)
Keluaran:

       
   Toggle Menu  
 Home About Services Contact Close 
   

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:

1. toggleMenu(): Fungsi ini menogol kelas aktif pada menu, menyebabkan ia meluncur masuk dan keluar dari pandangan.
2. closeMenu(): Fungsi ini mengalih keluar kelas aktif daripada menu, memastikan ia meluncur keluar daripada paparan apabila pautan tutup diklik.

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!