Dreamweaver CS

Spry Menu Bar

บางเว็บไซต์มีข้อมูลมาก ทำให้ต้องแบ่งข้อมูลออกเป็นหลายชั้นหลายหน้า เมนูจึงมีความซับซ้อนมาก ในบทความนี้จะแสดงวิธีการสร้างเมนูที่ซับซ้อนให้ง่ายขึ้น โดยแสดงหัวข้อหลักก่อนเมื่อเมาส์อยู่เหนือเมนูจะแสดงเมนูภายในขึ้นมา ทำให้ใช้สะดวกยิ่งขึ้น

หลายคนคงเคยเห็น navigation แบบที่เมื่อเอาเมาส์ไปวางบนนั้นแล้วจะมีรายการแสดงรายละเอียดเพิ่มเติม หรือมีเมนูเพิ่มขึ้นมา ซึ่งการเขียน navigation แบบนั้นจำเป็นต้องใช้ความรู้เรื่อง CSS แต่ตอนนี้ Dreamweaver นั้นได้เตรียมเครื่องมือสำหรับสร้าง navigation แบบง่ายๆด้วย Spry Menu bar

การใช้งาน Spry Menu Bar

1. เปิดเว็บที่ต้องการแทรก navigation ขึ้นมา จากนั้นทำการ save ให้เรียบร้อย

2. คลิกตำแหน่งที่ต้องการวาง navigation จากนั้นคลิกที่ spry menu bar ดังรูป



3. เมื่อคลิกแล้วจะมีหน้าต่างขึ้นมาดังรูป หน้าต่างนี้สำหรับเลือกว่าต้องการให้ navigation ของเราวางในแนวนอน (horizontal) หรือแนวตั้ง (vertical)



4. เมื่อคลิก ok ที่เอกสารของเราจะเป็นดังรูป ดังตัวอย่างเลือก navigation แบบ horizontal



5. เมื่อเราคลิกเมาส์ที่แถบสีฟ้าที่เขียนว่า spry menu bar : menubar1 ให้สังเกตุที่ Property inspector จะเป็นดังรูป



มีรายละเอียดดังนี้

5.1.ช่องซ้ายบน ใส่ชื่ออ้างอิงของ navigation

5.2.Turn style off สำหรับปิดการแสดงผล CSS ทำให้เราสามารถเห็น navigation ในรูปแบบของ list

5.3.ช่องสี่เหลี่ยมขนาดใหญ่ 3 ช่อง

ช่องที่ 1 สำหรับกำหนดชื่อเมนูหลักของ navigation

ช่องที่ 2 สำหรับกำหนดเมนูย่อยของ ช่องที่ 1

ช่องที่ 3 สำหรับกำหนดเมนูย่อยของ ช่องที่ 2

5.4.Text เป็นคำที่ใช้แสดงผลใน navigation

5.5.Link เป็นใช้กำหนดลิงค์สำหรับ navigation

5.6.Title เป็นคำบรรยายลิงค์ เมื่อวางเมาส์เหนือ navigation จะมีคำบรรยายนี้ขึ้นมา

5.7.Target กำหนดรูปแบบของลิงค์ เช่น _blank เปิดหน้าใหม่

เราสามารถเพิ่มหรือลบรายการของเมนูได้โดยคลิกที่เครื่องหมาย + และ - ในช่องที่เราต้องการแก้ไข

6. เราสามารถกำหนดรูปแบบที่ใช้แสดงผลของ navigation ได้โดยไปที่ CSS panel ทางขวามือ จะมีรายการแสดงดังรูป การใช้งาน CSS สามารถอ่านได้โดย คลิกที่นี่



7.เมื่อแสดงผลใน Browser จะเห็นดังรูป



สำหรับ navigation แบบ vertical ก็ทำงานแบบเดียวกัน


เลื่อนขึ้นด้านบน