สร้างเมนูแฮมเบอร์เกอร์เลื่อนง่ายด้วย jQuery Slidebars Framework

นักออกแบบ UX ทะเลาะกันเรื่องการใช้ เมนูแฮมเบอร์เกอร์ ในการออกแบบเว็บ พวกเขา ตอบสนองวัตถุประสงค์สำหรับผู้ใช้มือถือ แต่ยัง มีการค้นพบที่ต่ำกว่า.

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

Slidebars นั้นฟรีและโอเพ่นซอร์สที่สร้างขึ้นทั้งหมด ด้านบนของไลบรารี jQuery. มันทำงานเหมือนที่คุณคาดหวังว่าคุณจะคลิกที่ไอคอนแฮมเบอร์เกอร์เพื่อเปิดเมนูเลื่อนและมัน ผลักหน้าจอ off-canvas เพื่อให้มีที่ว่าง.

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

ปลั๊กอินนี้มีการเปิดแหล่งที่มาโดยสิ้นเชิงและรหัสสามารถใช้ได้ฟรี บน GitHub ถ้าคุณต้องการที่จะกระตุ้น อย่างไรก็ตาม repo ขาดเอกสารที่ชัดเจนซึ่งทำให้การตั้งค่ายากขึ้น.

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

สนับสนุนเมนูเลื่อน จากทั้งสี่ด้านของหน้าจอ, พร้อมด้วย คุณสมบัติที่กำหนดเอง สำหรับเอฟเฟ็กต์ภาพเคลื่อนไหวตัวเลือกสีและความกว้าง / ความสูงโดยรวมของเมนู.

เมนูเลื่อนทั้งหมด ทำงานบนองค์ประกอบนอกหน้า, ดังนั้นคุณต้อง ตั้งค่าเมนู off-canvas ให้ถูกต้อง. ซึ่งรวมถึงทั้ง HTML ที่เหมาะสมและ CSS ที่เหมาะสมสำหรับการใส่สไตล์.

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

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

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