วิธีแก้ไขเมนู เลื่อนตำแหน่งเมนู เปลี่ยนการแสดงผลของเมนูภายในเว็บไซต์

วิธีเข้าใช้งาน สามารถเข้าไปที่เว็บไซต์ของเรา > Admin > ดีไซน์หน้าเว็บ (เมนูด้านซ้ายของหน้า Admin) > หน้าเว็บ (ไม่มีเนื้อหา) > เมนูบาร์ (เมนู) 


 

เมื่อคลิกไอคอนรูปแก้ไข จะแสดงหน้าต่าง "ข้อมูล" ของเมนูบาร์

ในหน้านี้เราสามารถ

  • เพิ่มลิ้งค์ (คลิกที่ + เพิ่มลิ้งค์ใหม่)
  • แก้ไขลิ้งค์ต่างๆ (คลิกที่ไอคอนแก้ไข  )
  • เปลี่ยนลำดับของเมนลิงค์ (คลิกลากที่ไอคอน  )

 

เมื่อเพิ่มลิ้งค์ใหม่ หรือคลิกที่ไอคอนแก้ไข จะแสดงหน้าต่างรายละเอียดของเมนูนั้นๆขึ้นมา

  • ข้อความ คือคำที่เราต้องการแสดงบนเมนู
  • ไอคอน คือชื่อไอคอนที่จะนำมาแสดงในเมนูนี้ โดยเราสามารถดูชื่อเมนูได้ที่ https://icofont.com/icons (ไม่ต้องมี icofont- นำหน้า) ซึ่งมีให้เลือกใช้งานกว่า 2,100 รูปแบบ
  • ลิ้งค์ปลายทาง คือลิ้งค์ของหน้าเว็บจะแสดงผลเมื่อมีการคลิก

 

เมื่อแก้ไขรายละเอียดเมนูลิ้งค์เสร็จแล้ว เราสามารถเปลี่ยนการแสดงได้ในเมนู "การแสดงผล"

ในส่วนนี้ เราสามารถปรับการแสดงผลต่างๆได้ เช่น

  • แสดงเงาด้านล่างเมนู เพื่อทำให้เมนดูลอยขึ้นจากหน้าเว็บปรกติ
  • ยึดเมนูไว้บนสุดของหน้าจอเสมอ เมื่อมีการสกอล์หน้าเว็บลงมาด้านล่าง เมนูบาร์ก็ยังคงอยู่ที่เดิม ไม่ถูกเลื่อนหายไปตามการสกอล์
  • ขยายความกว้างเต็มหน้าจอ เพื่อให้เมนูขยายเต็มหน้าจอคอมพิวเตอร์ โดยเมนูจะถึงยืดชิดซ้ายและขวาสุดของหน้าจอ
  • การเคลื่อนไหว เพิ่มลูกเล่นการเคลื่อนไหวของเมนูบาร์เมื่อมีการแสดงผลครั้งแรก สามารถดูชื่อและการเคลื่อนไหวได้ที่ https://daneden.github.io/animate.css
  • ตำแหน่งโลโก้และเมนู ใช้สำหรับการเปลี่ยนตำแหน่งขอโลโก้และเมนูให้แสดงผลในรูปแบบต่างๆเช่น ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง
  • ระยะห่างระหว่างขอบกับข้อมูล คือระยะห่างของเนื้อหาเมนูด้านใน กับขอบเมนู ใช้สำหรับการเพิ่มลดขนาดของเมนู โดยสามารถกำหนดค่าได้ทั้งหน้าจอคอมพิวเตอร์ แท็บเล็ท และมือถือ ได้อย่างอิสระ

 

เมื่อแก้ไขรายละเอียดการแสดงผลแล้ว เราสามารถแก้สีต่างๆของเมนู และรูปภาพพื้นหลังเมนูได้ที่เมนู "สีและพื้นหลัง"

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


 

ในกรณีที่เราไม่อยากใช้ระบบสำเร็จรูปที่ระบบมีให้ เราสามารถแก้โค๊ด HTML เป็นแบบที่เราต้องการได้ทั้งหมด โดยค่าเริ่มต้นจะเป็นค่าของระบบสำเร็จรูป เราสามารถลบออกและใส่เป็น HTML ที่เราต้องการจะเขียนเองได้


 

*หมายเหตุ - รายละเอียดการใช้งานทั้งหมดนี้ อาจจะมีการปรับเปลี่ยนเพิ่มเติมในภายหลัง เมื่อมีการเพิ่มคุณลักษณะใหม่ๆหรือปรับเปลี่ยนบางรายการไปใช้วิธีที่ดีกว่า