10 CSS & JavaScript Code Snippets สำหรับสร้าง Responsive Navigations

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

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

1. เลย์เอาต์เต็มหน้าตอบสนอง โดย Johnny Mango

ตัวอย่างที่ตอบสนองนี้แสดงให้เห็นว่าคุณสามารถใช้ขั้นตอนการสร้างต้นแบบของเว็บไซต์ได้ไกลแค่ไหน คุณจะสังเกตเห็นว่าการนำทางมีคุณลักษณะที่น่าสนใจเมื่อคุณวางเมาส์เหนือและโฟกัสอัตโนมัติที่ลิงก์ เอฟเฟกต์นี้สามารถเปลี่ยนแปลงได้บนเว็บไซต์ "ใช้งานจริง" โดยใช้การนำทางเดียวกัน แต่ตัวอย่างนี้จะเป็นประโยชน์ในการแสดง UI/UX ของเพจ

ดูการสาธิตการนำทางที่ตอบสนองต่อปากกาด้วย Kube โดย Johnny Mango

2. Navbar แบบเลื่อนลง โดย Tania Rascia

หากคุณต้องการรายการดรอปดาวน์ที่ยาวกว่าในการนำทาง เมนูนี้อาจทำงานได้ดีกว่า เป็นทางเลือกที่ดีสำหรับการนำทางขั้นพื้นฐานที่มีรายการเมนูเพียงไม่กี่รายการเท่านั้น ในกรณีนี้ คุณจะพบรายการลิงก์ง่ายๆ ที่มีรายการดรอปดาวน์ขนาดเล็กมาก ลิงก์เมนูย่อยจะปรากฏเฉพาะในเหตุการณ์การคลิกซึ่งจัดการโดย jQuery คุณสามารถเปลี่ยนเป็น CSS เท่านั้น แต่ทริกเกอร์การคลิกจะหาย

ถึงกระนั้น สำหรับการออกแบบที่สะอาดตาเช่นนี้ ฉันแปลกใจที่ข้อมูลโค้ดนี้มีประโยชน์หลายอย่างสำหรับนักพัฒนา

ดูแถบการนำทางแบบเลื่อนลงที่ตอบสนองต่อปากกาโดย Tania Rascia

3. เลย์เอาต์หน้าเดียว โดย Jan Czizikow

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

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

ดูการนำทางที่ตอบสนองอย่างเต็มรูปแบบของ Pen ด้วยภาพเคลื่อนไหว CSS และ jQuery โดย Jan Czizikow

4. เมนูแบบเลื่อนลงสีแดง โดย Stephanie Walter

นักพัฒนา Stephanie Walter ได้สร้างโปรเจ็กต์ที่น่าตื่นเต้นสำหรับเว็บ ตัวอย่างนี้เป็นเพียงตัวอย่างหนึ่งที่มีการนำทางที่ตอบสนองและสีแดงสด

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

ดูการนำทางแบบตอบสนองด้วยปากกาหลายระดับโดย Stephanie Walter

5. การออกแบบ CSS บริสุทธิ์ โดย Ahmad Hjazy

นี่คือการออกแบบที่ไม่เหมือนใครโดยใช้ CSS บริสุทธิ์สำหรับการนำทาง เป็นเมนูแนวตั้งที่มีลิงก์การนำทางที่เลียนแบบตารางธาตุ

เอฟเฟกต์โฮเวอร์ล่าช้าเล็กน้อย แต่น่าสนใจอย่างไม่ต้องสงสัย ไม่ต้องพูดถึงรูปแบบการตอบสนองที่ใช้งานได้น่าประหลาดใจ บางทีส่วนที่น่าประทับใจที่สุดคือวิธีที่ตัวอย่างทั้งหมดนี้ ใช้ CSS เพียงอย่างเดียว

ดูเมนูการนำทางที่ตอบสนองต่อ Pen CSS โดย Ahmad Hjazy

6. Responsive Sticky Header โดย Marc Libunao

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

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

ดูการนำทางส่วนหัวที่ตอบสนองต่อปากกาโดย MarcLibunao

7. ตอบสนองและสัมผัสได้ โดย Dragoeco

เว็บไซต์ที่ดีทั้งหมดควรเป็นมิตรกับการสัมผัสโดยค่าเริ่มต้น และนั่นคือสิ่งที่ทำให้การนำทางนี้น่าสนใจยิ่งขึ้นสำหรับนักออกแบบ

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

ดูการนำทางแบบเลื่อนลงด้วยปากกา: ตอบสนองและสัมผัสได้ง่ายโดย Dragoeco

8. ลิงก์การนำทางอย่างง่าย โดย AnabolicHippo

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

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

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

ดูเมนูการนำทางที่ตอบสนองต่อปากกาโดย AnabolicHippo

9. เมนู Playstation Curtain โดย Louis Chenais

นักพัฒนา Louis Chenais ได้สร้างระบบนำทางแบบตอบสนองที่ฉันโปรดปรานจากเว็บไซต์ PlayStation หลุยส์เรียกสิ่งนี้ว่า "เมนูม่าน" ที่เลื่อนเข้ามาดู แซงหน้าทั้งหน้า นี่เป็นเรื่องปกติสำหรับอินเทอร์เฟซมือถือ และก็กลายเป็นที่นิยมอย่างรวดเร็วสำหรับนักออกแบบเว็บไซต์เช่นกัน

สิ่งหนึ่งที่ฉันชอบคือสไตล์แอนิเมชั่น มันทันสมัยและเร็วพอที่จะแสดงลิงก์โดยไม่ทำให้ผู้ใช้เบื่อ และเหนือสิ่งอื่นใด ฟีเจอร์นี้ให้ความรู้สึกเหมือนทำงานบนเว็บไซต์ที่ใช้งานจริงได้

ดูหลักการนำทางที่ตอบสนองต่อปากกา #3 – เมนูผ้าม่านโดย Louis Chenais

10. เมนูเมก้าที่ตอบสนอง โดย Samir Alley

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

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

ดูเมนูเมก้าที่ตอบสนองต่อปากกา – การนำทางโดย samir alley