สร้าง Popup Menu ด้วย Spry Menu Bar (CS Only) [Article ID : 89]

Spry เป็น Framework ของ Adobe ที่ช่วยการพัฒนาเว็บไซต์ในส่วนของ Client Side ให้เป็นไปอย่างง่ายดาย ซึ่ง Adobe จับใส่มาให้เราใช้งานกับโปรแกรม Dreamweaver ในตะกูล CS สำหรับในบทความนี้จะมาแนะนำ Spry ที่มีมากับตัวโปรแกรม ซึ่งเป็นเรื่องเกี่ยวกับการสร้างเมนูเว็บ คือ การสร้าง Popup Menu ด้วย Spry Menu ใครนึกภาพคำว่า Popup Menu ไม่ออก ลองดูจากตัวอย่างด้านล่างนี้ โดยชี้เมาท์ไปที่เมนู Sevices

• ตัวอย่างเมนู
• Home
• Services
  • Training
  • Clip on Demand

ก่อนอื่นให้ทำการเปิดไฟล์เว็บเพจที่เราต้องการสร้าง Popup Menu ขึ้นมา หรือจะทำการ New File ขึ้นมาใหม่เพื่อทำการทดลองก็ได้ จากนั้นปฏิบัติตามขั้นตอนต่าง ๆ ดังนี้

1. จากนั้นที่หน้าต่าง Insert เลือกที่กลุ่ม Spry แล้วเลือกที่ Spry Menu Bar ดังรูป (Insert Panel -> Spry -> Spry Menu Bar ) 2. เมื่อเลือกแล้ว โปรแกรมจะแสดง Dialog ขึ้นมาให้เราเลือกว่าต้องการสร้าง Popup Menu ในแบบแนวนอน (Horizontal) หรือแนวตั้ง (Vertical) ดังรูป *ในที่นี้เลือกที่ Horizontal
3. จากนั้นโปรแกรมจะสร้างตัวอย่าง Menu กับหน้าเว็บเพจ เพื่อให้สามารถทำการแก้ไขเพิ่มเติมเมนูได้ตามต้องการ ดังรูป

การแก้ไขเมนู

4. เมื่อโปรแกรมสร้างตัวอย่างเมนูให้เราแล้ว หากต้องการแก้ไข ให้ไปที่ Properties ดังรูป หากไม่ปรากฏลักษณะดังรูปให้เราทำการ Click เลือกไปที่แถบสีฟ้า ๆ ของเมนูก่อน 1 ครั้ง 5. การแก้ไขทำได้โดย เลือกไปที่ List ในช่อง Item ที่เราต้องการ จากนั้น หากต้องการเปลี่ยนชื่อ หรือแก้ไขข้อความที่ปรากฏบนเมนู ให้ทำการพิมพ์ข้อความใหม่ที่ต้องการในช่อง Text ดังรูป เมื่อพิมพ์ได้ตามที่ต้องการแล้วสังเกตุที่เว็บเพจ ข้อความที่เมนูจะเปลี่ยนแปลงตามที่เราต้องการ 7. หากต้องการสร้างจุดเชื่อมโยงหรือ Link สามารถทำได้ที่ช่อง Link ดังรูป

การเพิ่ม-ลบเมนู

8. หากต้องการเพิ่มหรือลบเมนู เราสามารถทำได้โดยการคลิ๊กเลือกไปที่เครื่องหมายบวก-ลบ (+, -) ของ List Item 9. เมื่อเพิ่มแล้วจะได้รายการใหม่ดังตัวอย่าง หากต้องการเปลี่ยนแปลงแก้ไขใด ๆ ให้ทำได้ตามต้องการเหมือนดังขั้นตอนที่ 5-7 ที่กล่าวมา

การเปลี่ยนแปลงแก้ไขสีสันของเมนู

10. การเปลี่ยนแปลงแก้ไขสีสันของเมนู ไม่ว่าจะเป็นสีของพื้นหลังของเมนู หรือสีของตัวอักษรข้อความ เราสามารถเปลี่ยนได้จาก CSS Panel ดังรูป ซึ่งรูปแบบของเมนู หรือ CSS ที่โปรแกรมสร้างขึ้นมาใช้กับ Spry Menu Bar นั้น จะถูกเก็บไว้ในไฟล์ที่ชื่อ SpryMenuBarHorizontal.css (หากสร้างแบบแนวนอน)

11. วิธีการแก้ไขก็ให้เราทำการเลือกไปที่ชื่อ Class ของสไตร์ที่เราต้องการแก้ไข ดังรูปเป็น CSS ที่ใช้ในการกำหนดสีพื้นหลังและสีของตัวอักษร เมื่อเมาท์มาวางเหนือเมนู *การแก้ไขค่าของ CSS ก็ดังเช่นกับที่เราแก้ไข CSS ที่เราเคยใช้งานกันมาแล้ว