สร้างเมนูแบบ Pop up


การสร้างเมนู 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. วางเมาส์ที่เมนูหลัก ซึ่งเมนูย่อยจะปรากฏขึ้นมา

เมื่อคลิกที่เมนูย่อย ก็จะลิงค์ไปยังหน้าเว็บเพจปลายทางที่กําหนดไว้

 

คำสำคัญ (Tags): #dreamweaver
หมายเลขบันทึก: 94352เขียนเมื่อ 4 พฤษภาคม 2007 18:22 น. ()แก้ไขเมื่อ 24 มิถุนายน 2012 00:31 น. ()สัญญาอนุญาต: สงวนสิทธิ์ทุกประการจำนวนที่อ่านจำนวนที่อ่าน:


ความเห็น (7)

ขอบคุณมากจริงๆครับ หามานาน วันนี้เข้าใจเลย ขอบคุณมากครับผม ^^ ขอให้รวยๆ อิอิ

ผมลองทำตามแล้ว รันบนโลคอลโฮสแล้วใช้ได้ แต่ไปวางบนเน็น็ตแล้วใช้ไม่ได้ ขอร้องนะบอกผมที

เรา ลิ้งข้อมูลที่มันอยู่ในโฟเดอร์อีกที แต่พอคลิกแล้วมันดันสร้างโฟเดอร์ซ้ำให้อะ

จะแก้ยังไงดี

ขอบคุณสำหรับความรู้ดีดี ขอให้มีคนอย่างพี่ ประเทศเราเจริญแน่ครับ ขอบคุณครับ

ขอบคุณค่า วิธีง่ายดี

ผมทดลองทำดู สามารถลิงค์ได้ แต่ตัวชี้ไม่เป็นรูปมือทำอย่างไรครับ

หวัดดีคร้าฟฟฟ...

ลุงรุนมาเยี่ยมคร้าฟฟฟ

อ้า!... เยี่ยมมากกกกก... ได้ความรู้เยอะเลย...

ขอขอบคุณมากๆ คร้าฟฟฟ

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท