สร้างเมนูแฮมเบอร์เกอร์เลื่อนที่สามารถเข้าถึงได้ด้วย Offcanvas

ของฟรี ปลั๊กอิน Offcanvas เป็นหนึ่งในแหล่งข้อมูลมากมายสำหรับการเลื่อนดูการนำทาง คุณสามารถค้นหาปลั๊กอินที่คล้ายกันออนไลน์ได้ แต่ Offcanvas มีความโดดเด่นด้วยเหตุผลบางประการ.

มันคือ ห้องสมุดที่มีน้ำหนักเบาพอสมควร และในขณะที่มันทำงานบน jQuery ก็ยัง ไม่ยากที่จะตั้งค่า. สิ่งนี้เป็นจริงสำหรับทั้งรหัส JavaScript และรหัส HTML ดังนั้นคุณไม่จำเป็นต้องเปลี่ยนการนำทางเริ่มต้นของคุณเลย.

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

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

แต่ละพาเนลทำงานในลักษณะเดียวกับที่ผู้ใช้สามารถทำได้ คลิกที่ใดก็ได้บนหน้าเพื่อซ่อนเมนูเลื่อน. และคุณสามารถ ตั้งค่าคำสั่งคีย์บอร์ด ที่ทำงานได้ตามหลักเกณฑ์ ARIA เพื่อการเข้าถึงเว็บที่เหมาะสม.

ในการติดตั้ง Offcanvas คุณเพียงแค่ต้องการ สำเนาของ jQuery พร้อมกับ ไฟล์ Offcanvas CSS / JS. คุณสามารถดึงสิ่งเหล่านี้ผ่าน npm, bower หรือโดยตรงจาก GitHub.

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