Sticky menu

วิธีทำเมนูไม่ให้เลื่อนหายจากหน้าจอ(Sticky Menu)

Concept

  1. Add Plug-in Sticky Menu (or Anything!) on Scroll
  2. CSS ตามหา​ CSS Element
  3. Setting ชื่อของ CSS ID ใน Sticky Menu Plug-in

ขั้นที่ 1 Add Plug-in Sticky Menu (or Anything!) on Scroll

เพิ่มปลั๊กอินจากหน้าแอดมิน โดยไปที่ปลั๊กอิน > เพิ่มปลั๊กอินใหม่ > พิมพ์ “Sticky Menu” ในช่องคีย์เวิร์ด > เลือกติดตั้ง

Screen Shot 2558-08-04 at 00.07.43

ขั้นที่ 2 CSS ตามหา​ CSS Element

แต่ละ Theme อาจจะตั้งชื่อไม่เหมือนกัน โดยชื่อ Element อยู่ใน wp-content > themes > ชื่อธีม > style.css

Screen Shot 2558-08-04 at 00.29.02

 

เลื่อนหา Navigation ชื่อ Element แรก คือ navbar

Screen Shot 2558-08-03 at 23.31.39

ขั้นที่ 3 Setting ชื่อของ CSS Element ใน Sticky Menu Plug-in

เอาชื่อ Element แถบเมนูที่ได้จาก CSS ในขั้นที่ 2 มาใส่ในปลั๊กอิน Sticky Menu ไปที่ ตั้งค่า > Sticky Menu

Screen Shot 2558-08-04 at 00.28.25

 

พิมพ์ชื่อ navbar ในช่อง Sticky Element แล้วกด Save settings

 

Screen Shot 2558-08-03 at 23.49.46

 

แค่นี้ก็ล็อกแถบเมนูหรือแถบอื่นๆ ที่ต้องการ ไม่ให้เลื่อนหายไปเวลาเลื่อนจอลงได้แล้ว

Leave a Reply