การสร้างเมนูแบบเลื่อน

วันนี้ตามคำร้องขอของเพื่อน ฉันจะเขียนบทช่วยสอนง่ายๆ เกี่ยวกับเอฟเฟกต์ของเมนูแบบเลื่อนบนเว็บไซต์ของฉัน ในแผนกซอฟต์แวร์ของมหาวิทยาลัย Niujiang ดูเหมือนว่าจะมีผลกระทบต่อการเลื่อนเลเยอร์ด้วย ใช้เอฟเฟ็กต์นี้ เมื่อไม่ได้ใช้งาน ซ่อนไว้ เมื่อคุณคลิกปุ่มเลเยอร์ มันจะค่อยๆ เลื่อนออก ซึ่งช่วยประหยัดพื้นที่หน้ากระดาษที่จำกัดและให้เอฟเฟกต์ภาพที่น่าอิจฉาซึ่งให้ความรู้สึกค่อนข้างดี คุณสามารถคลิก ที่นี่ เพื่อดูเอฟเฟกต์นี้




มาทำธุรกิจและหยุดพูดเรื่องไร้สาระกันเถอะ การเตรียมการมีดังนี้:

1. สร้างเอกสารเปล่าใหม่ใน dw (หรือเปิดหน้าที่คุณต้องการเพิ่มเอฟเฟกต์)

2. กำหนดสไตล์ CSS ของคุณเอง

3. แทรกตารางยาว 500pix บนเพจ (หมายเหตุที่นี่: จุดประสงค์ของการแทรกตารางคือเพื่อรักษาตำแหน่งสัมพัทธ์ของเลเยอร์ควบคุมไม่เปลี่ยนแปลงตามความละเอียดที่แตกต่างกัน หากเพจของคุณไม่เคยทำการตั้งค่าที่เกี่ยวข้องมาก่อน คุณอาจต้องดำเนินการนี้ ใช้เวลาจัดระเบียบโครงสร้างเพจของคุณ)

4. วางเคอร์เซอร์ในตาราง คลิกเมนู [แทรก - เลเยอร์] เพื่อแทรกเลเยอร์ที่มีความยาว 500 และความสูง 20 และตั้งชื่อเลเยอร์นั้นว่า layer1

5. จากนั้นวางเคอร์เซอร์ไปที่เลเยอร์ layer1 คลิกเมนู [Insert - Layer] แล้วแทรกเลเยอร์ layer2 ที่มีความยาว 500 และความสูง 130 ตั้งค่าระยะขอบด้านซ้ายและระยะขอบด้านบนของคุณสมบัติของเลเยอร์2 เป็น 0 แล้วระบุ เป็นสีพื้นหลังที่คุณชอบ

6. จากนั้นทำซ้ำวิธีการในขั้นตอนที่ 5 และแทรกเลเยอร์ที่ 3 เลเยอร์นี้ไม่ได้มีประโยชน์อะไรเป็นพิเศษ ในบทช่วยสอนของฉัน ฉันแค่ต้องการวางปุ่มสองสามปุ่ม ในที่สุดฉันก็กลายเป็นแบบนี้:



เคล็ดลับ: จุดประสงค์ของการทำเช่นนี้คือการเพิ่มแผ่นกั้นด้านหน้าเลเยอร์ที่คุณต้องการเลื่อน เฉพาะเมื่อคุณคลิกเท่านั้น เลเยอร์จะค่อยๆ เลื่อนออกจากใต้เลเยอร์ของคุณ

ตอนนี้เรากำลังเข้าสู่กระบวนการผลิตเมนูเลื่อนที่เราจะสร้างในวันนี้อย่างเป็นทางการ



ตอนนี้ให้เราทำซ้ำขั้นตอนที่ 5 ด้านบนอีกครั้ง แทรกเลเยอร์อีกเลเยอร์ 4 ตั้งค่าคุณสมบัติของเลเยอร์เป็นความกว้าง 500 และความสูง 150 ซึ่งเป็นผลรวมของความสูงของเลเยอร์ 2 และเลเยอร์ 3 พอดี และปรับเลเยอร์เลเยอร์ 4 เป็นอีกสองรูปภาพด้านล่าง . ดังแสดงในภาพ:



จากนั้นเราคลิกที่ดวงตาด้านหน้าเลเยอร์ 2 เพื่อปิด เพื่อที่เราจะได้เห็นเลเยอร์ 4 ด้านล่าง



ในขณะนี้ เราคลิก ALT + F9 เพื่อเปิดแผงไทม์ไลน์ DW ได้เพิ่มไทม์ไลน์เริ่มต้นสำหรับเรา จากนั้น เราเลือกเลเยอร์ที่เราต้องการเลื่อน เลเยอร์ 4 คลิกขวาที่เลเยอร์นั้น และเลือก [เพิ่มลงในไทม์ไลน์ ] ในเวลานี้ เราจะเห็นเลเยอร์ layer4 ที่เราเพิ่งสร้างขึ้นในแผงไทม์ไลน์ ซึ่งแสดงว่าเราได้เพิ่มมันสำเร็จแล้ว!





จากนั้นเราคลิกที่เฟรมที่ 15 บนไทม์ไลน์และปรับระยะขอบด้านบนในแผงคุณสมบัติของเลเยอร์ 4 เป็น 150 ณ จุดนี้ เลเยอร์แบบเลื่อนก็พร้อมแล้ว คุณสามารถลากสี่เหลี่ยมสีแดงบนไทม์ไลน์ช้าๆ จาก 1 ถึง 15 และคุณจะเห็นเลเยอร์ของคุณค่อยๆ เลื่อนจากใต้เลเยอร์ 2 และเลเยอร์ 3 ออกมา





โอเค ตอนนี้เราเพียงต้องตั้งค่าการดำเนินการสำหรับเลเยอร์แบบเลื่อนนี้ layer4 เพื่อเปิดใช้งาน แค่นี้ก็จบแล้ว :) ก่อนหน้านี้ ฉันได้แทรกตารางบนเลเยอร์ 3 ที่ฉันเพิ่มและตั้งค่าไว้สองปุ่มสำหรับปุ่มเลเยอร์ 4

ก่อนอื่นเราตั้งค่าการดำเนินการเพื่อเปิดใช้งานเลเยอร์การเลื่อน เลือกขยายปุ่มนี้ ไปที่แผงพฤติกรรม แล้วคลิก เลือก [ไทม์ไลน์ - ไทม์ไลน์การเล่น] ในเมนูที่ออกมา DW จะแสดงแบบฟอร์มขึ้นมา เลือกไทม์ไลน์1 ในเมนูแบบเลื่อนลงด้านบน



จากนั้นยืนยันว่าเหตุการณ์เป็น onclick ในแผงพฤติกรรม



เอาล่ะ คุณสามารถดูตัวอย่างได้ที่นี่ เมื่อคุณคลิกปุ่มขยาย เลเยอร์ของคุณจะค่อยๆ เลื่อนจากบนลงล่าง!



คุณสามารถดูได้ :) มาเพิ่มการดำเนินการปิดแบบง่ายๆ ให้กับเลเยอร์ นั่นคือเลเยอร์จะถูกซ่อนหลังจากคลิกปุ่มปิด เลือกปุ่มปิด ไปที่แผงพฤติกรรม แล้วคลิก เลือก [แสดงเลเยอร์ที่ซ่อน] ในเมนูที่ปรากฏขึ้น เลือกเลเยอร์ 4 ในรูปแบบป๊อปอัป จากนั้นคลิกปุ่มซ่อนด้านล่างเพื่อตั้งค่าให้ซ่อนไว้ ดังแสดงในรูป:





โอเค ดูตัวอย่างอีกครั้งก็พบว่าหลังจากขยายแล้วคลิกปิดเลเยอร์ก็หายไป :) แต่พอคลิกขยายอีกครั้งก็ดูไม่มีอะไรเกิดขึ้น นั่นเป็นเพราะเรายังอยู่ มีการกระทำที่ยังไม่ได้กำหนดไว้

ทำซ้ำขั้นตอนที่ 5 ตอนนี้ เลือกปุ่มขยาย เพิ่มการกระทำ [ไทม์ไลน์ - ไปที่กรอบไทม์ไลน์] เลือกไทม์ไลน์1 จากเมนูแบบเลื่อนลงในแบบฟอร์มป๊อปอัป และเพิ่ม 1 ให้กับหมายเลขเฟรม



ตัวอย่างนี้พบว่าปัญหานี้ได้รับการแก้ไขแล้ว แต่ดูเหมือนว่าเรายังคงมองข้ามปัญหาไป หลังจากคลิกเพื่อปิด เลเยอร์ก็ถูกตั้งค่าเป็นซ่อนไว้ จากนั้นการคลิกเพื่อขยายก็ไม่ตอบสนอง เพียงใช้วิธีเก่าและเพิ่มการดำเนินการลงในปุ่มขยายเพื่อแก้ไขปัญหา!



ทำซ้ำขั้นตอนที่ 5 และเลือก [แสดงเลเยอร์ที่ซ่อน] ตรงกันข้ามกับขั้นตอนที่ 6 คราวนี้เราเลือกแสดง หลังจากยืนยัน ตรวจสอบให้แน่ใจว่าเวลาที่เลเยอร์ที่ซ่อนอยู่แสดงอยู่ในแผงลักษณะการทำงาน แผงการทำงานของปุ่มขยายในขณะนี้มีดังต่อไปนี้:



ตกลง ดูตัวอย่างอีกครั้ง ทุกอย่างเรียบร้อยดี!

ณ จุดนี้เอฟเฟกต์เสร็จสมบูรณ์แล้ว แน่นอนว่าทุกคนสามารถสร้างเอฟเฟกต์ที่ดีกว่าได้ด้วยตัวเอง แต่ยังคงเหมือนเดิม ตราบใดที่เราเชี่ยวชาญในการใช้ไทม์ไลน์และพฤติกรรมการกระทำ เอฟเฟกต์ทั้งหมดเป็นเพียงเรื่องของการดำเนินการ: )