สร้างเมนูการนำทางที่ตอบสนองอย่างชาญฉลาดด้วยปลั๊กอิน jQuery นี้
ทุกเว็บไซต์ที่ทันสมัยต้องการ เค้าโครงตอบสนอง และ การนำทางที่ใช้งานได้. นั่นคือที่ได้รับ.
แต่เมนูแฮมเบอร์เกอร์สามารถไปไกลและพวกเขาเท่านั้น เปลี่ยนการใช้งานอย่างรุนแรง สำหรับขนาดหน้าจอที่แตกต่างกัน วิธีที่ดีกว่าในการจัดการนี้คือโดย ซ่อนลิงก์ที่มีความก้าวหน้า ด้วยปลั๊กอินเช่น OkayNav.
ปลั๊กอิน jQuery ฟรี เพิ่มคุณสมบัติเมนูที่ง่ายมาก ไปที่หน้าใดก็ได้และมันซ่อนรายการการนำทางอย่างต่ำ, ขึ้นอยู่กับวิวพอร์ตที่แตกต่างกัน วิธีนี้ผู้ใช้สมาร์ทโฟนจะมีเมนูแฮมเบอร์เกอร์เดียว แต่ผู้ใช้แท็บเล็ตสามารถเห็นลิงก์ได้เช่นกัน.
โดยค่าเริ่มต้นมันอาศัย ธาตุ และ รายการที่ไม่มีการเรียงลำดับความยาว. จนถึงตอนนี้ฉันไม่คิดว่าปลั๊กอินนี้รองรับการเลื่อนลงหลายระดับ แต่ถ้าคุณรู้จัก jQuery นิดหน่อยคุณสามารถเพิ่มได้ด้วยตัวเอง.
OkayNav ง่ายมากและมัน สำหรับเว็บไซต์ที่ง่ายขึ้น ที่มีลิงค์การนำทางเพียงหยิบมือเดียว ลิงก์เหล่านี้ ซ่อนอย่างช้า ๆ ด้านหลังเมนูปิดหน้าจอ เมื่อพวกเขาเข้าชมวิวพอร์ตและ ลิงก์เพิ่มเติมซ่อนอยู่เสมอ เบราว์เซอร์ที่เล็กลงจะได้รับ.
คุณจะต้อง ตัดรายการที่ไม่ได้เรียงของคุณ ในองค์ประกอบการนำทางและระบุ ID เฉพาะ จากนั้นคุณสามารถ กำหนดเป้าหมาย nav ทั้งหมด กับ okayNav () ฟังก์ชั่นเช่นนี้:
var navigation = $ ('# nav-main'). okayNav (); โปรดทราบว่านี่เป็นเพียง ติดตั้งง่ายที่สุด ไม่มีคุณสมบัติที่กำหนดเองใด ๆ คุณสามารถทำงานกับ กว่าตัวเลือกที่กำหนดเองโหล สร้างขึ้นในไลบรารีนี้เพื่อควบคุมรูปแบบไอคอนภาพเคลื่อนไหวของเมนูการรองรับการเลื่อนและฟังก์ชั่นการโทรกลับ.
และคุณยังสามารถเรียกเมนูไปที่ เปิด / ปิดตามต้องการ โดยส่งค่าเฉพาะไปยังฟังก์ชัน นี่เป็นตัวอย่างง่ายๆของ เปิดการนำทาง:
navigation.okayNav ( 'openInvisibleNav');
รหัสทั้งหมดเหล่านี้ได้รับการบันทึกไว้อย่างดีใน GitHub repo ซึ่งรวมถึงการดาวน์โหลดสคริปต์ หากคุณต้องการเส้นทาง CDN คุณสามารถใช้เส้นทาง ลิงก์ RawGit เพื่อเพิ่มสคริปต์นี้โดยตรงจาก GitHub.
OkayNav คือ เหมาะสำหรับไซต์ขนาดเล็ก ที่ได้รับประโยชน์จากเทคนิคการนำทางแบบก้าวหน้า แต่ถ้าคุณยังไม่แน่ใจว่ามันทำงานยังไงลองดูตัวอย่างใน CodePen นี้เพื่อแสดงว่าปลั๊กอินตัวเล็กนี้สามารถทำอะไรได้บ้าง.
