การสร้างเมนู Pop up เป็นที่นิยมมากสําหรับผู้สร้างเว็บเพจ เพราะมีประโยชน์ทางด้านความสวยงามและลูกเล่นที่น่าสนใจแล้ว สามารถช่วยในการประหยัดพื้นที่ในการใช้งานในหน้าเว็บเพจอีกด้วย เนื่องจากเราไม่ต้องสร้างเมนูของทุกรายการ เพียงสร้างเมนูหลักรายการเดียวส่วนเมนูย่อยจะถูกซ่อนไว้
การสร้างเมนู Pop up
สําหรับวิธีการสร้างเมนูแบบ Pop up สามารถ ทําได้ดังนี้
1. สร้างเมนูหลัก ในที่นี้สร้างเมนูหลัก ชื่อว่า เมนูหลัก
2. กําหนดลิงค์เมนูเป็น # ที่ช่อง Link ในหน้าต่าง Properties
3. คลิกหน้าต่าง Design ในหน้าต่าง dockable ทางด้านขวามือ4. คลิกแท็บ Behaviora
5. คลิกปุ่ม ซึ่งจะปรากฏเมนูคําสั่งขึ้นมา
6. คลิกเลือกเมนู Show Pop - Up Menuจากนั้นจะปรากฏหน้าต่าง Show Pop - Up Menu ขึ้นมา
7. คลิกแท็บ Contents เพื่อกําหนดรายการ เมนูย่อย
8. พิมพ์ชื่อเมนูย่อยที่ช่อง Text :
9. กําหนดลิงค์ ที่จะเชื่อมโยงจากเมนูย่อยนั้นใน ช่อง Link :
10. กําหนดลักษณะการแสดงผล หน้าเว็บเพจ ปลายทาง
11. คลิกปุ่ม Add liem เพื่อกําหนดเมนู ย่อยเพิ่ม โดยทําตามขั้นตอนที่ 8-10 หรือต้องการลบเมนูย่อย ให้คลิกปุ่ม เพื่อลบรายการนั้นออกไป
ถ้าหาต้องการสลับตําแหน่งของเมนูย่อยที่สร้างไว้ สามารถทําได้คือ
12. คลิกเลือกเมนูย่อยที่ต้องการสลับตําแหน่ง
13. คลิกปุ่ม เพื่อเลื่อนเมนูย่อยไปด้านบน หรือคลิกปุ่ม เพื่อเลื่อนลงมาด้านล่าง
กําหนดรูปแบบของเมนู
เมื่อเราสร้างเมนูย่อยเรียบร้อยแล้ว เราจะต้อง
ปรับแต่งเมนูย่อยเหล่านั้นด้วย ดังนี้
1. คลิกแท็บ Appearance เพื่อกําหนดการแสดง สถานะของสีและตัวอักษร ในขณะที่นําเมาส์มาวางและ การแสดงผลตามปกติ
2. กําหนดลักษณะการแสดงผล ว่าต้องการให้เมนูยืดลงไปทางด้านล่าง
หรือด้านข้างของเมนูหลัก เช่น ตัวเลือก Vertical Menu
คือการให้เมนูย่อยยืดลงไปด้าน
ล่าง
3. เลือกรูปแบบของตัวอักษรที่ช่อง Font :
4. กําหนดขนาดของตัวอักษรที่ช่อง Size :
5. คลิกปุ่ม เพื่อให้ตัวอักษรเป็นตัวหนา
6. คลิกปุ่ม เพื่อกําหนดให้ข้อความอยู่กึ่งกลาง
7. กําหนดการแสดงสี ในกรณีปกติที่ส่วนของ Up State :
8. กําหนดการแสดงสี เมื่อนําเมาส์มาวางบนปุ่ม เมนูย่อยที่ส่วน Over State :
9. คลิกแท็บ Advanced เพื่อกําหนดคุณสมบัติอื่น ๆ
10. กําหนดเวลาในการแสดง และซ่อนเมนูที่ช่อง Menu Delay: ซึ่งถ้ากําหนดให้มีค่าน้อยก็จะแสดงผลเร็ว
11. กําหนดเงาของเมนูที่ช่อง Shadow :
12. กําหนดไฮไลท์ที่ช่อง Highlight :
13. กําหนดความกว้างของขอบของเมนู ที่ช่อง Broder Width :
14. กําหนดสีของขอบเมนูที่ช่อง Broder Color :
15. คลิกแท็บ Position เพื่อกําหนดการแสดงผลของเมนูย่อย
16. กําหนดระยะห่างของแนวตั้ง และแนวนอน จากแกน x และแกน y
17. คลิกปุ่ม
จากนั้นกลับมาที่โปรแกรม Dreamweaver จะเห็นว่ามีสัญลักษณ์ ปรากฏขึ้นมาทางด้านหน้าของเมนูหลักที่สร้างเอาไว้แล้ว
18. กดปุ่ม <F 12 > ที่คีย์บอร์ด เพื่อดูการแสดงผลทางบราวเซอร์
19. วางเมาส์ที่เมนูหลัก ซึ่งเมนูย่อยจะปรากฏขึ้นมา
เมื่อคลิกที่เมนูย่อย ก็จะลิงค์ไปยังหน้าเว็บเพจปลายทางที่กําหนดไว้