เรื่อง :: การสร้าง popup menu ด้วยการวาด layer

มีหลายท่านสอบถามมาว่าทำไม popup menu ที่ Dreamweaver MX มี option มาให้ไม่สามารถใช้งานร่วมกับ การสร้าง Template ได้ ข้อนี้ผมก็ไม่แน่ใจเท่าไหร่นักว่าทำไม หรือบางรายสอบถามมาว่า ผม(หนู)ใช้ version 4 อยู่ โปรแกรมไม่มี option ที่ชื่อว่า popup menu แบบที่ในเว็บสอนเลยทำอย่างไรดี ผมเองก็ว่าจะทำบทความเพื่อแก้ปัญหาเหล่านี้ให้นานแล้ว แต่ก็ไม่มีโอกาส วันนี้อารมณ์ดี เลยมานั่งหน้าคีย์บอร์ดเคาะบทความนี้ให้ เพื่อแก้ปัญหาตามที่เกริ่นมา ลองทำตามกันดูนะ...

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

:: วิธีการทำ ::

1. ให้เราทำการ New File หรือทำการเปิดไฟล์ที่เราต้องการทำ Popup Menu ขึ้นมาก
2. ทำการสร้าง Menu ที่จะเป็นจุดเริ่มต้นของเมนูที่เมื่อเรานำเมาท์มาวางที่เมนูนั้นแล้วจะเกิดเมนูย่อยแสดงออกมา ในตัวอย่างนี้ผมใช้เมนูซึ่งเป็นรูปภาพ

3. จากนั้นให้เราทำการวาดเลเยอร์ลงไปใกล้ ๆ กับเมนูที่เราทำการสร้างจากข้อ 2 ที่ผ่านมา และทำการตกแต่งเลเยอร์นี้ตามต้องการ เช่น ในตัวอย่าง ผมทำการแทรก Table ลงไปเป็น 1 col 2 row เพื่อเป็นเมนู และทำการใส่สีเขียวและเพิ่มไอคอนลงไปหน้าชื่อเมนู เป็นต้น

4. จากนั้นให้เรากำหนดค่าเริ่มต้นของ layer ที่เราสร้างให้เป็นแบบ hidden จาก properties (กำหนดตรง Vis) และกำหนดชื่อของ layer นี้ด้วย ในตัวอย่างผมกำหนดชื่อเลเยอร์นี้ว่า popup สังเกตดูจากรูป ด้านล่างนี้

5. เมื่อเราทำการซ่อนเลเยอร์เป็นที่เรียบร้อยแล้ว (hidden) ให้เราทำการ คลิ๊กเลือกไปที่เมนูที่เราสร้างขึ้นจากข้อ 2 แล้วจากนั้นให้ทำการเปิด Panel ที่ชื่อว่า Behaviors ขึ้นมา (Main Menu ->Window -> Behaviors) เมื่อเราทำการเปิดหน้าต่างดังกล่าวขึ้นมาแล้ว ให้เราทำการคลิ๊กไปที่เครื่องหมายบวก (+) ดังรูป แล้วให้เราทำการ เลือกไปที่เมนูที่ชื่อว่า Show-Hide Layer ดังรูป

6. จากนั้นโปรแกรมจะทำการเปิดหน้าต่างขึ้นมาให้เรากำหนดค่า ดังรูป

ที่หน้าต่าง Show-Hide Layer นี้ ในขั้นตอนแรกให้เราเลือกไปที่ชื่อ Layer ที่เราได้ทำการตั้งชื่อไว้จากข้อที่ 4 แล้วให้เลือกไปที่ปุ่ม Show ดังรูป  จากนั้นให้เราทำการคลิ๊กที่ OK ไปก่อน 1 ครั้ง
7. หลังจากนั้นให้เราทำซ้ำข้อที่ 5 อีกครั้ง คือการเลือกไปที่เมนู Show-Hide Layers อีกครั้ง จากนั้นให้เราทำซ้ำข้อที่ 6 อีกครั้ง แต่ครั้งนี้ให้เรากำหนดเป็น Hide โดยการกดเลือกไปที่ปุ่ม Hide แทน
8. เมื่อเราได้ทำการกำหนดค่าต่าง ๆ จากข้อที่ 5-7 เป็นที่เรียบร้อยแล้ว ให้เรามาดูที่ Behaviors Panel เราจะเห็น Event เกิดขึ้นมา 2 เมนู ดังรูป

ที่หน้าต่าง Behaviors นี้ให้เราสังเกตที่ Events นะครับว่า...เราต้องมี Event เป็น OnMouseOut สำหรับการกำหนด Hide ให้เลเยอร์ และต้องมี Event onMouseOver สำหรับการ Show เลเยอร์ หากใคนมี Events อื่น ๆ ที่ไม่ใช่ 2 แบบนี้ให้ทำการเปลี่ยน Event นะครับ (อ่านเรื่องการเปลี่ยน Event ได้ที่หน้า Articles นะครับ)

9. ที่นี่เราก็จะได้ popup menu ตามที่เราต้องการแล้ว แต่ยังไม่สมบูรณ์สักเท่าไหร่ ให้เราทำการเพิ่มเติมคุณสมบัติอีกดังนี้
- จากข้อ 5 ถึงข้อที่ 8 แต่คราวนี้ให้เราทำการ คลิ๊กเลือกไปที่ Layer ที่เราสร้างขึ้น แล้วทำการกำหนดค่าอื่น ๆ เหมือนที่ผ่านมาตั้งแต่ข้อ 5 - 8

10. เราก็จะได้ POPUP Menu ตามที่เราต้องการ แถมเรายังจะสามารถปรับปรุงอื่น ๆ ได้ตามที่เราต้องการเช่นเราอาจจะแทรกไอคอนลงไปในเมนูของเราก็สามารถกระทำได้เช่นเดียวกัน

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

ps. วิธีการนี้ไม่มีปัญหากับภาษาไทย แต่หากเป็นเว็บเพจที่เราทำการ New จาก Template ที่เราสร้างเก็บไว้แล้วจะไม่สามารถกระทำได้ เนื่องจากจะติดในส่วนของ Lock ที่เทมเพลทของเราได้ทำการ Lock ไว้

BACK TOP