คุณเคยเรียกดูเว็บไซต์และพบว่าเมนูการนำทางจะปรากฏที่ด้านบนเสมอหรือไม่?

โดยหลักการแล้วเมนูการนำทางจะแสดงในลักษณะที่หายไปเมื่อเลื่อนหน้า เมนูการนำทางที่มองเห็นได้จะลอยอยู่เสมอและไม่ว่าผู้ใช้จะเลื่อนลงอย่างไร

ในบทช่วยสอนนี้เราจะแสดงวิธีสร้างเมนูลอยบนบล็อก WordPress ของคุณอย่างง่ายดาย

หากคุณยังไม่ได้สร้างเว็บไซต์หรือบล็อกบน WordPress เราขอเชิญคุณปรึกษาวิธีติดตั้งบล็อก WordPress ใน 7 ขั้นตอน วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ

ถ้าเสร็จแล้วเรามาดูสิ่งที่เรากังวลในวันนี้

วิธี 1: วิธีเพิ่มเมนูแบบลอยบน WordPress โดยใช้ปลั๊กอิน

วิธีนี้ง่ายกว่าและเร็วกว่า หากคุณยังไม่ได้ตั้งค่าเมนูนำทางคุณสามารถทำได้ เรียนรู้วิธีการทำ.

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน " เมนูเหนียว (หรืออะไร!) เราเลื่อน " หากคุณไม่ทราบวิธีติดตั้งปลั๊กอินคุณ สามารถอ่านบทช่วยสอนของเรา.

หลังจากเปิดใช้งานคุณต้องไปที่ " การตั้งค่า»เมนูเหนียว เพื่อกำหนดค่าการตั้งค่าของปลั๊กอินนี้

ขั้นแรกคุณต้องป้อนรหัส CSS สำหรับเมนูการนำทางที่คุณต้องการลอย

คุณจะต้องใช้เครื่องมือ "ตรวจสอบ" ของเบราว์เซอร์เพื่อค้นหา CSS ที่ใช้

ไปที่เว็บไซต์ของคุณและเลื่อนเมาส์ไปที่เมนูนำทาง หลังจากนั้นคุณต้องคลิกขวาและเลือก "ตรวจสอบ"

ดำเนินการต่อไปโดยการค้นหา วิธีการกำหนดธีม WordPress ด้วยดินสอสีเหลือง

การดำเนินการนี้จะแบ่ง (ตามค่าเริ่มต้น) หน้าจอเบราว์เซอร์ของคุณและคุณจะสามารถดูซอร์สโค้ดของเมนูนำทางของคุณ คุณต้องค้นหาบรรทัดที่คล้ายกับสิ่งนี้:

ในตัวอย่างนี้ CSS ID ของเมนูนำทางของเราคือ " การใช้งานเว็บไซต์ '

ไปข้างหน้าและป้อนรหัส CSS ของเมนูในการตั้งค่าปลั๊กอินดังต่อไปนี้“ # site-navigation”

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

หลังจากนั้นคุณต้องคลิกที่ช่องถัดจากตัวเลือก: "Check Bar Admin" สิ่งนี้ช่วยให้ปลั๊กอินสามารถเพิ่มพื้นที่บางส่วนสำหรับแถบเครื่องมือ WordPress ซึ่งเพิ่มสำหรับผู้ใช้ที่ล็อกอิน

ตัวเลือกถัดไปในหน้าการตั้งค่าช่วยให้คุณสามารถซ่อนเมนูการนำทางได้หากผู้ใช้เยี่ยมชมเว็บไซต์ของคุณโดยใช้หน้าจอขนาดเล็กเช่นอุปกรณ์เคลื่อนที่

คุณสามารถทดสอบว่าเมนูนี้แสดงบนอุปกรณ์มือถือและแท็บเล็ตอย่างไร หากคุณไม่ชอบคุณสามารถเพิ่ม 780px ในตัวเลือกนี้

ค้นพบด้วย วิธีการสร้างเมนูที่ตอบสนองสำหรับ WordPress มือถือ

อย่าลืมคลิกที่ " บันทึกการตั้งค่า เพื่อบันทึกการเปลี่ยนแปลงของคุณ

ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูเมนูการนำทางลอยของคุณในการดำเนินการ

วิธีที่ 2: วิธีเพิ่มเมนูนำทางด้วยตนเอง

วิธีนี้ต้องการการเพิ่มโค้ด CSS ที่กำหนดเองลงใน your ธีม WordPress.

ก่อนอื่นต้องไปที่ " ลักษณะที่ปรากฏ> ปรับแต่ง เพื่อเปิดใช้งาน WordPress Customizer

คลิกที่ CSS เพิ่มเติม ในบานหน้าต่างด้านซ้ายแล้วเพิ่มรหัส CSS นี้

# นำทางเว็บไซต์ {พื้นหลัง: # fff; ความสูง: 60px; ดัชนี z: 170; margin: 0 อัตโนมัติ; ขอบล่าง: 1px #dadada ของแข็ง ความกว้าง: 100%; ตำแหน่ง: ถาวร ด้านบน: 0; ซ้าย: 0; ขวา: 0; text-align: ศูนย์; }

แทนที่ " # Site Navigation โดยตัวระบุของเมนูนำทางของคุณและคลิกที่ปุ่ม« Enregistrer '

ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูเมนูการนำทางลอยของคุณในการดำเนินการ

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

สามารถปรับเปลี่ยนได้อย่างง่ายดายโดยเพิ่มระยะขอบบนพื้นที่ส่วนหัวของคุณโดยใช้รหัสต่อไปนี้:

.site การสร้างตราสินค้า {ขอบด้านบน: 60px; }

จบบทช่วยสอนของเราตอนนี้คุณจะสามารถสร้างหรือเพิ่มเมนูลอยบนเว็บไซต์ของคุณได้

หากคุณกำลังมองหาอื่นๆ ปลั๊กอิน WordPress ที่จะช่วยให้คุณจัดการเมนูต่างๆ ได้ดังนี้ ปลั๊กอิน WordPress พรีเมี่ยมที่ทุ่มเทให้กับงานนี้ 

1 เมนูฮีโร่

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

ในแง่ของคุณสมบัติมันมีเหนือสิ่งอื่นใด: ทำงานได้อย่างสมบูรณ์แบบบนพีซีแท็บเล็ตและสมาร์ทโฟนเนื้อหาที่ปรับแต่งได้ง่าย CSS ที่กำหนดเองเพื่อเพิ่มสไตล์เมนูของคุณเองตัวออกแบบเมนูขนาดใหญ่เบราว์เซอร์ที่รองรับ , Opera, IE9 และอีกมากมาย

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

2 เมนูเนียน

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

แต่ละระดับเมนูสามารถปรับแต่งได้ด้วยสีพื้นหลังรูปภาพวิดีโอแบบอักษรที่กำหนดเองและอื่น ๆ ปลั๊กอินนี้ตอบสนองได้อย่างสมบูรณ์และมีภาพเคลื่อนไหวมากกว่า 45 รายการสำหรับรายการเมนู

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 เมนู Fly 8Degree

8Degree Fly Menu คือ WordPress ปลั๊กอิน ระดับพรีเมียมที่ให้คุณเพิ่มเมนูแคนวาสลงในเว็บไซต์ของคุณได้ เพื่อให้ดูเน้นข้อมูลของคุณในวิธีที่ง่าย ใช้คุณสมบัติเมนูเริ่มต้นของ WordPress เพื่อสร้างเมนู

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

แหล่งข้อมูลอื่น ๆ ที่แนะนำ

หากคุณต้องการเพิ่มเติมในการสร้างหรือปรับแต่งเมนูของบล็อกหรือเว็บไซต์ของคุณเราขอแนะนำให้คุณดูลิงก์ด้านล่าง

• วิธีการเพิ่มสไตล์ให้กับเมนูนำทางของคุณ
•  วิธีการเพิ่มแอตทริบิวต์ชื่อในเมนู WordPress
• ปลั๊กอิน WordPress 8 เพื่อสร้าง megamenu ในบล็อกของคุณ

สรุป

ที่นี่! สำหรับบทช่วยสอนนี้ฉันหวังว่าจะช่วยให้คุณสามารถเพิ่มเมนูลอยในบล็อก WordPress ของคุณได้ เราขอเชิญคุณเข้าร่วม แบ่งปันบทความนี้กับเพื่อนของคุณบนเครือข่ายสังคมของคุณ.

หากคุณมีข้อเสนอแนะหรือข้อสังเกตใด ๆ พวกเขาจะได้รับการต้อนรับ และถ้าคุณยังใหม่กับ WordPress ปรึกษาเรื่องนี้ ทรัพยากร.

...