เพื่อนที่เคยใช้ QQ เพื่อแชทต่างก็ชื่นชอบฟังก์ชันการซ่อนหน้าต่างอัตโนมัติ ซึ่งสามารถทำให้หน้าต่างดูใหม่ สะอาดตา และมีชีวิตชีวา เพื่อนของฉันต้องการเพิ่มเนื้อหาที่คล้ายกันลงในหน้าเว็บของตน และหลังจากการสำรวจร่วมกัน พวกเขาก็ค้นพบสิ่งนี้ สามารถสร้างเอฟเฟกต์ได้ด้วย Dreamweaer มาดูการผลิตแถบเมนูที่ใช้งานอยู่กัน
ขั้นตอนที่ 1: ทำให้เมนูปรากฏขึ้น
สร้างไฟล์ใหม่ใน Dreamweaer วาดเลเยอร์ แทรกตารางในเลเยอร์ (ดังแสดงในรูปที่ 1) แก้ไขตาราง จากนั้นเพิ่มรายการเมนูและสร้างไฮเปอร์ลิงก์ไปยังแต่ละรายการ ขีดเส้นใต้ของไฮเปอร์ลิงก์ คุณสามารถแก้ไขสไตล์ CSS ของไฮเปอร์ลิงก์ได้ ในแผงสไตล์ CSS ให้ตั้งค่า "การตกแต่ง" ของทั้ง "ลิงก์" และ "โฮเวอร์" เป็น "ไม่มี" ผ่านตัวเลือก CSS สี" ถูกตั้งค่าเป็นสีแดง และสุดท้ายสไตล์ที่ตั้งไว้จะถูกนำไปใช้กับแต่ละแถบเมนู (คุณสามารถกดปุ่ม "F12" เพื่อดูตัวอย่างเอฟเฟกต์)
รูปที่ 1
ขั้นตอนที่ 2: ออกแบบเอฟเฟกต์ไดนามิกของเมนู
1. เลือกเลเยอร์ กดปุ่มซ้ายค้างไว้เมื่อเมาส์เปลี่ยนเป็นรูปร่าง "กากบาท" แล้วลากเลเยอร์ไปที่มุมขวาบนของหน้า (เพื่อให้แถบเมนูทั้งหมดปรากฏจนสุด แต่ขอบด้านบนเป็นเพียง ใกล้กับขอบด้านบนของหน้า) และเปิดเวลาในแผงเมนูหน้าต่าง Line เลือกเลเยอร์แล้วลากไปที่ไทม์ไลน์ Dreamweaer จะสร้างวัตถุแอนิเมชั่นที่มีความยาว 15 เฟรมโดยอัตโนมัติ วัตถุภาพเคลื่อนไหวเป็นเฟรมที่ 30 และตั้งค่าความยาวเป็น 30 เฟรม จากนั้นคลิกขวาที่เฟรมที่ 15 เลือกตัวเลือก "เพิ่มคีย์เฟรม" ในเมนูทางลัดป๊อปอัปเพื่อแทรกคีย์เฟรม แล้วลากเลเยอร์ไปยังตำแหน่งที่เหมาะสม (รูปที่ 2)
รูปที่ 2 คลิกขวาอีกครั้งที่เฟรม 15 ในหน้าต่างไทม์ไลน์ เลือก "เพิ่มการดำเนินการ" ในเมนูทางลัดป๊อปอัป เพิ่มลักษณะการทำงานแบบโต้ตอบให้กับเฟรม จากนั้น Dreamweaer จะเปิดแผงลักษณะการทำงานโดยอัตโนมัติ คลิกปุ่ม "+" ในแผงพฤติกรรม เลือก "ไทม์ไลน์/หยุดไทม์ไลน์" จากเมนูป๊อปอัป เปิดกล่องโต้ตอบ "หยุดไทม์ไลน์" เลือก "ไทม์ไลน์1" แล้วคลิกปุ่ม "ตกลง" เพื่อปิดกล่องโต้ตอบ . เหตุการณ์พฤติกรรมโต้ตอบคือ "onFrame15" และการดำเนินการคือ "หยุดไทม์ไลน์" ดังนั้นเมื่อไทม์ไลน์ถึงเฟรมที่ 15 ภาพเคลื่อนไหวจะหยุดเล่น ซึ่งจะทำให้ทราบถึงฟังก์ชันการตีกลับของแถบเมนู
2. ใช้วิธีการเดียวกันเพื่อเพิ่มพฤติกรรมแบบโต้ตอบ "หยุดไทม์ไลน์" ที่เฟรมที่ 30 ของไทม์ไลน์ ซึ่งจะทำให้ทราบถึงฟังก์ชันป๊อปอัปของเมนู หลังจากเพิ่มพฤติกรรมโต้ตอบทั้งสองนี้แล้ว สี่เหลี่ยมสีน้ำเงินจะปรากฏบนเฟรมที่เกี่ยวข้องในหน้าต่างไทม์ไลน์ ซึ่งแสดงถึงพฤติกรรมโต้ตอบ เลือกช่องทำเครื่องหมาย "เล่นอัตโนมัติและวนซ้ำ" เพื่อให้ภาพเคลื่อนไหววนซ้ำโดยอัตโนมัติ (รูปที่ 3)
รูปที่ 3
3. ตอนนี้คุณต้องตั้งค่าลักษณะการทำงานเพื่อให้ไทม์ไลน์สามารถเล่นต่อได้หลังจากที่หยุดแล้ว แนวคิดของฉันคือ: ในสถานะปกติ แถบเมนูจะปรากฏขึ้นแต่จะคงไว้เพียงคำว่า "Campus Grand View" ด้านล่าง และป๊อปอัปและการดีดกลับของแถบเมนูจะถูกควบคุมโดยว่าเมาส์จะผ่าน "Campus Grand" หรือไม่ ดู" บนแถบเมนู . คุณสามารถดำเนินการต่อดังนี้: เลือกคำว่า "Campus Grand View" ในแถบเมนู (ตรวจสอบให้แน่ใจว่าที่อยู่ไฮเปอร์ลิงก์ของคำนี้คือ "#" นั่นคือลิงก์ว่าง) คลิกปุ่ม "+" ในแผงลักษณะการทำงาน และในป๊อปอัป เลือก "ไทม์ไลน์/ไทม์ไลน์การเล่น" จากเมนู เลือก "ไทม์ไลน์1" ในกล่องโต้ตอบที่ปรากฏขึ้นและคลิกปุ่มตกลง ในขณะนี้ ลักษณะการทำงานจะถูกเพิ่มลงในแผงลักษณะการทำงาน และ เลือกเหตุการณ์ "onMouseOver" ในรายการแบบเลื่อนลง "เหตุการณ์" ซึ่งระบุว่าภาพเคลื่อนไหวจะเล่นเมื่อวางเมาส์เหนือคำ (รูปที่ 4)
รูปที่ 4 ณ จุดนี้ แถบเมนูที่ใช้งานอยู่จะเสร็จสมบูรณ์ คุณสามารถกดปุ่ม "F12" เพื่อดูตัวอย่างเอฟเฟกต์ได้
แต่แถบเมนูนี้มีข้อบกพร่องประการหนึ่ง: จะต้องหายไปเมื่อเมาส์ผ่านพื้นที่เฉพาะด้านล่างแถบเมนู (ในกรณีนี้คือคำว่า "Campus Grand View") หากคุณต้องการให้แถบเมนูปรากฏขึ้น เพียงคลิก เลื่อนเมาส์ออกจากแถบเมนูเพื่อทำให้เมนูหายไป คุณอาจจำเป็นต้องใช้ Fireworks หรือ Flash หากคุณมีวิธีการที่ดี โปรดเขียนถึงเราเพื่อหารือเกี่ยวกับเรื่องนี้
