Hari ini, atas permintaan teman-teman, saya akan menulis tutorial sederhana tentang efek menu geser di situs web saya; di departemen perangkat lunak Universitas Niujiang, ada efek pada geseran lapisan. Tampaknya iklan di Itnow juga gunakan efek ini. Saat tidak digunakan Tersembunyi, saat Anda mengeklik lapisan tombol, lapisan tersebut akan meluncur keluar secara perlahan, sehingga menghemat ruang halaman yang terbatas dan menghasilkan efek visual yang patut ditiru, yang terasa cukup bagus. Anda dapat mengklik di sini untuk melihat efek ini.
Mari kita mulai berbisnis dan berhenti bicara omong kosong. Persiapannya adalah sebagai berikut:
1. Buat dokumen kosong baru di dw (atau buka halaman yang ingin Anda tambahkan efek).
2. Atur gaya css Anda sendiri.
3． Sisipkan tabel sepanjang 500 piksel pada halaman (catatan di sini: tujuan menyisipkan tabel adalah untuk menjaga posisi relatif lapisan kontrol tidak berubah pada resolusi yang berbeda. Jika halaman Anda belum membuat pengaturan yang relevan sebelumnya, maka Anda mungkin harus melakukan ini Luangkan waktu untuk mengatur struktur halaman Anda).
4. Tempatkan kursor pada tabel, klik menu [Sisipkan - Lapisan] untuk menyisipkan layer dengan panjang 500 dan tinggi 20, dan beri nama layer1.
5. Kemudian letakkan kursor di layer layer1, klik menu [Insert - Layer] dan masukkan layer layer2 dengan panjang 500 dan tinggi 130; atur margin kiri dan margin atas properti layer2 ke 0, dan tentukan itu Warna latar belakang yang Anda suka.
6． Kemudian ulangi cara pada langkah ke 5 dan masukkan layer layer 3. Layer ini tidak ada gunanya secara khusus. Pada akhirnya, milik saya menjadi seperti ini:
TIPS: Tujuan melakukan ini di sini adalah untuk menambahkan penyekat di depan layer yang ingin Anda geser. Hanya ketika Anda mengkliknya, layer tersebut akan meluncur perlahan keluar dari bawah layer Anda.
Sekarang kita resmi memasuki proses produksi dari menu geser yang akan kita buat hari ini.
Sekarang mari kita ulangi langkah 5 di atas lagi, masukkan layer lain layer4, atur properti layer menjadi lebar 500 dan tinggi 150, yang merupakan jumlah persis dari tinggi layer2 dan layer3, dan sesuaikan layer layer4 dengan dua layer gambar lainnya di bawahnya . Seperti yang ditunjukkan pada gambar:
Lalu kita klik mata di depan layer 2 untuk menutupnya, sehingga kita bisa melihat layer 4 di bawahnya.
Saat ini, kita klik ALT + F9 untuk membuka panel timeline. DW telah menambahkan timeline default Timeline1 untuk kita. Kemudian, kita pilih layer yang ingin kita geser, layer4, klik kanan padanya, dan pilih [Add to Timeline ] Saat ini, kita dapat melihat layer4 yang baru kita buat di panel timeline, yang menunjukkan bahwa kita telah berhasil menambahkannya! 
Kemudian kita klik pada frame ke-15 pada timeline dan sesuaikan margin atas di panel properti layer 4 menjadi 150. Pada titik ini, lapisan geser sudah siap. Anda dapat menyeret kotak merah pada timeline secara perlahan dari 1 hingga 15, dan Anda dapat melihat lapisan Anda meluncur perlahan dari bawah lapisan2 dan lapisan3 keluar! 
Oke, sekarang kita hanya perlu mengatur tindakan untuk lapisan geser lapisan4 ini untuk mengaktifkannya, dan selesai :) Sebelum ini, saya telah menyisipkan tabel pada lapisan3 yang saya tambahkan dan mengatur tombol dua untuk lapisan4.
Kami pertama kali menyiapkan tindakan untuk mengaktifkan lapisan geser. Pilih Perluas tombol ini, buka panel Perilaku, dan klik
Pilih [Timeline - Playback Timeline] pada menu yang keluar. DW akan muncul formulir, pilih timeline1 pada menu drop-down di atas.
Kemudian konfirmasikan bahwa acara tersebut sedang diklik di panel perilaku
Oke, di sini Anda dapat mempratinjaunya. Saat Anda mengklik tombol perluas, lapisan Anda akan meluncur perlahan dari atas ke bawah!
Bagaimana, Anda bisa melihatnya :) Mari tambahkan tindakan penutupan sederhana ke layer, yaitu layer akan disembunyikan setelah mengklik tombol tutup. Pilih tombol Tutup, buka panel Perilaku, dan klik Pilih [Show Hidden Layers] di menu yang muncul, pilih layer 4 di formulir pop-up, lalu klik tombol Sembunyikan di bawah untuk mengaturnya menjadi tersembunyi, seperti yang ditunjukkan pada gambar: 
Oke, saya pratinjau lagi dan menemukan bahwa setelah memperluasnya, saya mengklik untuk menutup lapisan dan menghilang :) Namun, sepertinya ada masalah. Ketika saya mengklik untuk memperluas lagi, sepertinya tidak ada yang terjadi memiliki tindakan yang belum ditetapkan.
Ulangi langkah 5 tadi, pilih tombol perluas, tambahkan tindakan [Garis Waktu - Buka Bingkai Garis Waktu], pilih garis waktu1 dari menu tarik-turun di formulir pop-up, dan tambahkan 1 ke nomor bingkai.
Nah, pratinjau ini menemukan bahwa masalah ini telah terpecahkan. Namun tampaknya kami masih mengabaikan masalah. Setelah mengklik untuk menutup, lapisan disetel ke tersembunyi, lalu mengklik untuk memperluas tidak merespons. Cukup gunakan metode lama dan tambahkan tindakan ke tombol perluas untuk menyelesaikan masalah!
Ulangi langkah 5 dan pilih [Tampilkan Lapisan Tersembunyi]. Bertentangan dengan langkah 6 tadi, kali ini kita pilih tampilkan. Setelah konfirmasi, pastikan waktu ketika lapisan tersembunyi ditampilkan di panel perilaku adalah saat diklik. Panel perilaku tombol yang diperluas saat ini adalah seperti yang ditunjukkan di bawah ini:
Oke, pratinjau lagi, semuanya baik-baik saja!
Pada titik ini, efeknya sudah selesai. Tentu saja, setiap orang dapat menciptakan efek yang lebih baik sendiri, tetapi tetap sama Selama kita menguasai penggunaan garis waktu dan perilaku tindakan, semua efek hanyalah masalah pengoperasiannya: )