การทำ Sticky Menu

ทุกวันนนี้เรามักจะทำเว็บที่อำนวยความสะดวกให้กับคนอ่านให้มากที่สุด หนึ่งในวิธีนั้นก็คือ การใช้ Sticky menu ก็คือการทำให้เมนูเลื่อนตามหน้าเว็บ เพื่อให้ผู้อ่านสามารถที่จะคลิกที่เมนูได้ทันที โดยเฉพาะหน้าที่มีเนื้อหายาวๆ ก็จะได้ไม่ต้องเลื่อนขึ้นไปใหม่อีกรอบ

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

myStickymenu

เป็นปลั๊กอินที่ใช้ง่ายมากๆ สำหรับบางธีมเช่น Astra ที่เรามักมาใช้ร่วมกับ Elementor ซึ่งหากออกแบบสวยๆ ก็แทบจะไม่ต้องเสียเงินซื้อธีมเพิ่มแล้ว

Astra

ปลั๊กอินนี้เวลาใช้กับธีม Astra นี่แทบไม่ต้องทำอะไรเลยครับ เพราะคลาส (CSS) ที่เขาใช้กับคลาสที่ปลั๊กอินตั้งมานั้นคือตัวเดียวกันเลย แค่ Activate ปลั๊กอินปุ๊บก็เสร็จเลยทีเดียว

เมนูเลื่อนตามหน้าเพจแล้ว

การใช้งานปลั๊กอินก็ง่ายมาก หลังจาก Activate ก็ไปที่เมนู myStickymenu > Settings

หากเราต้องการที่จะทำเมนูเลื่อนตามหน้า ก็สามารถที่จะคลิกเลือกเมนูในช่องด้านซ้ายได้เลยตรง Other CLass Or ID ก็ให้เลือกเมนูที่เราใช้งานอยู่ หรือเลือกเป็น Other Class Or ID แล้วใส่ CSS Class หรือ ID ที่เราต้องการ ในช่องด้านขวา

ในส่วนของ Settings นั้น เรายังสามารถกำหนดอย่างอื่นได้อีก เช่น

Disable at Small Screen Sizes – กำหนดให้ไม่ต้องทำงานในหน้าจอขนาดที่เล็กกว่าที่กำหนด

Fade or slide effect – เลือกเอฟเฟคว่าจะให้เป็นแบบสไลด์ลง หรือแบบเฟด

Make visible on Scroll – การให้มันซ่อนไปก่อน จนกว่าจะเลื่อนลงไปถึงตำแหน่งที่เราระบุถึงจะมีเมนูเด้งขึ้นมาและเลื่อนตามไปเรื่อยๆ โดยกำหนดเป็น pixel

Sticky Opacity – ความโปร่งใส

นอกจากนี้ยังมีฟีเจอร์อีกบางอย่างที่จะมีให้ใช้เฉพาะในตัวเสียเงินเท่านั้ แต่แค่นี้ก็นับว่าเพียงพอแล้วสำหรับการทำเมนูเลื่อนตามหน้าจอ ส่วนตัวชอบตัวนี้เพราะเราสามารถเลือกเมนูได้เลย เพราะบางคนอาจจะไม่ถนัดในการไปไล่หา CSS Class ของธีมเท่าไหร่

myStickymenu
บทสรุป
Design Quality
Customizability
Feature Availability
Easy to use
ข้อดี
ข้อเสีย
4.6
คะแนน
Advertisements