Dropdown Menu เป็นที่นิยมอย่างมาก ในการนำมาใส่ไว้ในหน้า webpage เนื่องจาก Dropdown Menu สามารถทำให้ ผู้มาเยี่ยมชม Homepage ของเราเข้าถึงข้อมูลต่างๆ ใน website ได้อย่างรวดเร็ว ตัวอย่าง website ที่ใช้ Dropdown Menu เช่น Microsoft, Macromedia เป็นต้น หรือดูตัวอย่างที่นี่
การทำ Dropdown Menu สามารถทำได้จากโปรแกรม Dreamweaver โปรแกรมเดียว โดยคุณไม่ต้องเขียน Script ด้วย โดยใช้เครื่องมือ คือ Layer Behaviors และ Timeline
การวางแผนก่อนทำ
เริ่มแรกเราต้องมาออกแบบ หรือวาดโครงร่างหน้าตาของ webpage ของเราก่อน โดยกำหนดตำแหน่งว่าจะวาง Dropdown Menu ไว้ตรงไหน จากนั้นต้องคิดว่าจะมี Dropdown Menu กี่อัน มี Sub-Menu กี่อัน และแต่ละ Sub-Menu มี Link กี่ Link เมื่อกำหนด Main Menu และ Sub-Menu ได้แล้ว ก็มาคิดว่า Main Menu และ Sub-Menu ควรมีรูปแบบอย่างไร เป็น Text หรือ Graphic จากนั้นก็ลงมือทำกันเลย
1. ใส่ Main Menu (อาจใช้ตารางหรือเลเยอร์ช่วยในการ Control ตำแหน่งของ Dropdown Menu)
2. สร้างเลเยอร์ใต้ Main Menu ความกว้างยาวขึ้นอยู่กับ Sub-Menu
3. ใส่ตารางในเลเยอร์ เพื่อช่วยจัด Sub-Menu ให้สวยงาม
4. ใส่รูปในตาราง
5. จากนั้นใส่ Link โดยเริ่มกันที่ Main Menu ให้ Click ที่รูปที่เป็น Main Menu แล้วพิมพ์เครื่องหมาย # หรือพิมพ์ Javascript:; ในช่อง Link (Link ของ Main Menu นั้นพิเศษตรงที่เมื่อนำ mouse มาชี้เหนือ Main Menu ตัว Sub-Menu จะเปิดออกมา แต่ถ้า Click จะไม่เกิดอะไรขึ้น)
6. จากนั้นมาใส่ Link ให้ Sub-Menu (อาจจะพิมพ์เครื่องหมาย # หรือพิมพ์ Javascript:; ในช่อง Link แทนไปก่อนก็ได้ ถ้ายังไม่ได้สร้างไฟล์ที่จะ link ไป)
7. เมื่อให้ link เสร็จ ให้เปิด Layer Palette, Behaviors Palette และ Timeline Palette (Click ที่ Window แล้วเลือกชื่อ Palette เหล่านั้น)
8. ให้เลือก Layer 1 ใน Layer Palette จากนั้นมา Click ที่ Timeline Palette ตรง Frame 8 แล้วมา Click ที่ Behaviors Palette ตรงปุ่มเครื่องหมายบวกเพื่อใส่คำสั่ง Show-Hide Layers
10. ทำการซ่อน Layer 1 โดยเลือก Layer 1 ใน Layer Palette จากนั้นเลือก hidden ใน Layers Inspector9. เมื่อ Show-Hide Layers Property ปรากฏ ให้คลิ๊กเลือก Layer 1 แล้ว Click ปุ่ม Hide กด OK เมื่อทำเสร็จ ที่ Behaviors Palette จะปรากฎ Events = onFrame8 และ Actions = Show-hide Layer (ใน Timeline จะมีขีดที่ Frame 8) จากนั้นให้ Click ที่ Timeline Frame 1
 |
11. ต่อไปเราจะมาใส่ Actions ให้กับ Layers โดยมาทำงานที่ Behaviors Palette
11.1 คลิ๊กที่รูป Main Menu ก่อน แล้วมาคลิ๊กที่ ใน Behaviors Palette เพื่อเลือกคำสั่ง Show-Hide Layers ใน Show-Hide Layers Property ให้เลือก Layer 1 แล้วคลิ๊กที่ปุ่ม show กด Ok
Note: การคลิ๊กที่รูปบางครั้งอาจไม่สามารถ Block Link ได้หมด ซึ่งอาจมีปัญหา ในการใส่ Action ของ Behaviors ได้ เพื่อความชัวร์ ให้คลิ๊กที่รูปก่อนแล้ว แล้วให้คลิ๊กที่ตัว <a>ที่ Status Bar ด้านล่าง จะเป็นการ block link อย่างสมบูรณ์แบบ
11.2 ใน Behaviors ให้เปลี่ยน Events เป็น onMouseOver
11.3 ต่อไปให้คลิ๊กที่ อีก เพื่อเลือก Timeline > Stop Timeline ใน Stop Timeline เลือกที่ Timeline 1 กด OK เสร็จแล้ว ให้เปลี่ยน Events เป็น onMouseOver เช่นกัน
11.4 จากนั้นให้คลิ๊กที่ อีก แล้วเลือก Timeline > Go to Timeline Frame อันนี้ให้เลือก Frame 1 แล้ว กด OK
11.5 จากนั้นให้เปลี่ยน Events เป็น onMouseOut
11.6 ให้คลิ๊กที่ อีกครั้ง แล้วเลือก Timeline > Play Timeline ให้เลือก Timeline 1 และให้เปลี่ยน Events เป็น onMouseOut เช่นกัน
สำหรับ Main Menu เป็นอันเสร็จ
12. ต่อไปก็มาใส่ Actions ให้ Sub-Menu โดยทำงานกับ Behaviors Palette เช่นกัน
 |
หมายเหตุ Sub-Menu ถูกสร้างไว้ใน Layer ซึ่งเราใช้คำสั่งให้ซ่อน Layer ไว้ ดังนั้น ให้คลิ๊กที่ Layer Palette แล้วคลิ๊กเลือกเลเยอร์หนึ่ง layer 1 ก็จะปรากฎขึ้น ที่นี้ก็มาเริ่มใส่ Actions โดยเริ่มกันที่ Link ที่หนึ่ง
12.1 คลิ๊กที่รูป Link 1 ก่อน แล้วมาคลิ๊กที่ ใน Behaviors ให้เลือก Timeline > Stop Timeline จากนั้นเลือก Timeline 1 แล้วกด OK และให้เปลี่ยน Events เป็น onMouseOver
12.2 ต่อไปให้คลิ๊กที่ เพื่อเลือก Timeline > Go to Timeline Frame แล้วเลือก Frame 1 กด OK ในส่วนของ Events ให้เปลี่ยน Events เป็น onMouseOut
12.3 มาคลิ๊กที่ อีกครั้ง แล้วเลือก Timeline > Play Timeline ให้เลือก Timeline 1 กด OK และให้เปลี่ยน Events เป็น onMouseOut
13. ทำซ้ำตามขั้นตอนในข้อ 1- 12 กับ Main Menu อันอื่น ถ้ามีหลายอัน (โดยเปลี่ยนจาก Layer 1 เป็น Layer 2, 3, x และ Timeline1 เป็น Timeline2, 3, x)
Note: การเพิ่ม Timeline ให้ไปที่เมนู Modify > Timeline เลือก Add Timeline
14. Save แล้ว Test ใน Browser
สรุปคำสั่ง ใน Main Menu จะใส่ Actions ดังนี้ขอบคุณข้อมูจาก http://sleepydesign.tripod.com/dropmenu.html
onMouseOut : Go to Timeline Frame (Frame1)
onMouseOut : Play Timeline (Timeline1)
onMouseOver : Show-Hide Layers (Show Layer1)
onMouseOver : Stop Timeline (Timeline1)
ใน Sub-Menu แต่ละอันจะประกอบด้วย 1 Timeline โดยใส่คำสั่ง Hide Layers ใน Frame12 (หรือ Frame อื่นก็ได้ ขึ้นอยู่ว่าจะให้ Sub-Menu หายไปเร็วหรือช้า ถ้าอยากให้หายไปเร็ว ก็ควรกำหนดไว้ที่ Frame ต่ำๆ ) และใส่ Actions ต่อไปนี้ด้วย
onMouseOut : Go to Timeline Frame (Frame1)
onMouseOut : Play Timeline (Timeline1)
onMouseOver : Stop Timeline (Timeline1)
เพื่อเพิ่มสีสันและลูกเล่นให้กับ Dropdown Menu ท่านสามารถนำเอาเทคนิคการทำ Image Rollover (ขอแนะนำให้ใช้แบบ Swap Image) มาประยุกต์ใช้ตรง Sub-Menu เพื่อเปลี่ยนสีหรือรูปภาพให้ Link ต่าง ๆ ก็ได้นะ ลองดูจากตัวอย่าง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น