สร้างเมนูแฮมเบอร์เกอร์เลื่อนที่สามารถเข้าถึงได้ด้วย Offcanvas
ของฟรี ปลั๊กอิน Offcanvas เป็นหนึ่งในแหล่งข้อมูลมากมายสำหรับการเลื่อนดูการนำทาง คุณสามารถค้นหาปลั๊กอินที่คล้ายกันออนไลน์ได้ แต่ Offcanvas มีความโดดเด่นด้วยเหตุผลบางประการ.
มันคือ ห้องสมุดที่มีน้ำหนักเบาพอสมควร และในขณะที่มันทำงานบน jQuery ก็ยัง ไม่ยากที่จะตั้งค่า. สิ่งนี้เป็นจริงสำหรับทั้งรหัส JavaScript และรหัส HTML ดังนั้นคุณไม่จำเป็นต้องเปลี่ยนการนำทางเริ่มต้นของคุณเลย.
ปลั๊กอิน Offcanvas ช่วยให้คุณ กำหนดบางพื้นที่ที่เมนูควรปรากฏขึ้น. โดยปกติแล้วนี่คือด้านซ้ายหรือขวาของหน้าจอ แต่คุณสามารถเลือกด้านบนหรือด้านล่างของหน้าจอ.
สิ่งนี้ทำให้ Offcanvas ยอดเยี่ยมสำหรับ มากกว่า ไม่ใช่แค่เลื่อนเมนูแฮมเบอร์เกอร์ มันสามารถใช้สำหรับ แถบการแจ้งเตือนเลื่อน หรือแม้กระทั่ง เลือกใช้ช่องเพื่อจับภาพอีเมล.
แต่ละพาเนลทำงานในลักษณะเดียวกับที่ผู้ใช้สามารถทำได้ คลิกที่ใดก็ได้บนหน้าเพื่อซ่อนเมนูเลื่อน. และคุณสามารถ ตั้งค่าคำสั่งคีย์บอร์ด ที่ทำงานได้ตามหลักเกณฑ์ ARIA เพื่อการเข้าถึงเว็บที่เหมาะสม.
ในการติดตั้ง Offcanvas คุณเพียงแค่ต้องการ สำเนาของ jQuery พร้อมกับ ไฟล์ Offcanvas CSS / JS. คุณสามารถดึงสิ่งเหล่านี้ผ่าน npm, bower หรือโดยตรงจาก GitHub.
นอกจากนี้ในหน้า GitHub คุณก็จะ ดูรหัสตัวอย่างเล็กน้อย คุณสามารถทำใหม่เพื่อให้เหมาะกับเว็บไซต์ของคุณ สิ่งที่คุณต้องการสำหรับการนำทางแบบเลื่อนคือ องค์ประกอบที่มีเมนูของคุณ (หรือสิ่งที่คุณต้องการเลื่อนลงบนหน้า).
นี่คือ เรียกใช้ผ่านลิงค์สมอ ชี้ไปที่ ID ของเมนูเลื่อนของคุณ นี่เป็นตัวอย่างข้อมูลจาก Offcanvas GitHub ที่แสดงตัวอย่างสั้น ๆ :
... เมนู ...
หากคุณสามารถ ทำใหม่ HTML เล็กน้อย ในหน้าของคุณคุณไม่ควรมีปัญหาในการตั้งค่าทั้งหมดนี้.
offcanvas ()
ฟังก์ชั่นยังรองรับตัวเลือกสำหรับ เปลี่ยนความเร็วของภาพเคลื่อนไหวคลาสเริ่มต้น, และ ฟังก์ชั่นการโทรกลับ ที่สามารถเรียกใช้หลังจากเมนูเปิดหรือปิด.
หากต้องการเรียนรู้เพิ่มเติมและดูการสาธิตสดให้ตรวจสอบหน้าปลั๊กอินหลัก Offcanvas เป็นตัวเลือกที่ยอดเยี่ยมสำหรับ การนำทางที่ขับเคลื่อนด้วย jQuery ถ้าคุณชอบเมนูแฮมเบอร์เกอร์.