วิธีสร้าง Navigation Responsive

หนึ่งในส่วนที่ยากที่สุดที่จะเป็น responsified บนเว็บไซต์คือ “การนำทาง”, ส่วนนี้มีความสำคัญอย่างยิ่งต่อการเข้าถึงเว็บไซต์เนื่องจากนี่เป็นหนึ่งในวิธีที่ผู้เข้าชมข้ามหน้าเว็บ.

จริงๆแล้วมีหลายวิธีในการสร้างการนำทางเว็บไซต์ที่ตอบสนองและแม้กระทั่งบางปลั๊กอิน jQuery ก็สามารถทำได้ในไม่กี่วินาที.

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

ดังนั้นเรามาเริ่มกันเลย.

การสาธิต
แหล่งดาวน์โหลด

HTML

ก่อนอื่นให้เพิ่มเมตาวิวพอร์ตภายใน หัว แท็ก นี้ เมตาวิวพอร์ต จำเป็นต้องใช้แท็กสำหรับหน้าเว็บของเราในการปรับขนาดอย่างเหมาะสมภายในขนาดหน้าจอใด ๆ โดยเฉพาะในวิวพอร์ตมือถือ.

…แล้วเพิ่มตัวอย่างต่อไปนี้เป็นมาร์กอัปการนำทางภายใน ร่างกาย แท็ก.

   บ้าน
 ทำอย่างไร
 ไอคอน
 ออกแบบ
 เว็บ 2.0
 เครื่องมือ
 
 เมนู

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

อ่านเพิ่มเติม: อย่าลืมเมตาแท็กวิวพอร์ต.

รูปแบบ

ในส่วนนี้เราเริ่มจัดแต่งทรงผมนำทาง สไตล์ที่นี่เป็นเพียงการตกแต่งคุณสามารถเลือกสีตามที่คุณต้องการ แต่ในกรณีนี้เรา (ส่วนตัว) ต้องการ ร่างกาย มีสีอ่อนและสีครีม.

 body background-color: # ece8e5;

nav แท็กที่กำหนดการนำทางจะมี 100% ความกว้างเต็มของหน้าต่างเบราว์เซอร์ในขณะที่ ยู ที่ซึ่งมีลิงค์เมนูหลักของเราจะมี 600px สำหรับความกว้าง.

 nav height: 40px; ความกว้าง: 100%; พื้นหลัง: # 455868; ขนาดตัวอักษร: 11pt; ตระกูลฟอนต์: 'PT Sans', Arial, sans-serif; น้ำหนักตัวอักษร: ตัวหนา; ตำแหน่ง: ญาติ; border-bottom: 2px solid # 283744;  nav ul padding: 0; กำไรขั้นต้น: 0 อัตโนมัติ; ความกว้าง: 600px; ความสูง: 40px;

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

 nav li display: inline; ลอย: ซ้าย;

หากคุณสังเกตเห็นจากมาร์กอัป HTML ข้างต้นเราได้เพิ่มไว้แล้ว clearfix ใน ชั้น คุณลักษณะสำหรับทั้ง nav และ ยู เพื่อล้างสิ่งต่าง ๆ รอบ ๆ เมื่อเราลอยองค์ประกอบภายในมันโดยใช้การแฮ็ค clearfix CSS ดังนั้นให้เพิ่มกฎสไตล์ต่อไปนี้ในสไตล์ชีท.

 .clearfix: ก่อนหน้า,. cleanarfix: หลัง เนื้อหา: ""; แสดง: ตาราง;  .clearfix: หลังจาก ชัดเจน: ทั้งคู่  .clearfix * ซูม: 1;

เนื่องจากเรามีลิงค์เมนูหกรายการและเรายังได้ระบุคอนเทนเนอร์สำหรับ 600px, แต่ละลิงค์เมนูจะมี 100px สำหรับความกว้าง.

 นำทาง color: #fff; จอแสดงผล: บล็อกแบบอินไลน์; ความกว้าง: 100px; จัดข้อความ: ศูนย์; การตกแต่งข้อความ: ไม่มี; line-height: 40px; ข้อความเงา: 1px 1px 0px # 283744;

ลิงก์เมนูจะถูกคั่นด้วย 1px ขอบขวายกเว้นอันสุดท้าย จำโพสต์ก่อนหน้าของเราในกล่องรุ่นความกว้างของเมนูจะขยาย 1px ทำให้มัน 101px ในฐานะที่เป็นการเพิ่มชายแดนดังนั้นที่นี่เราเปลี่ยน กล่องขนาด รูปแบบเพื่อ ชายแดนกล่อง เพื่อให้เมนูยังคงอยู่ 100px.

 nav li a border-right: 1px solid # 576979; กล่องปรับขนาด: ชายแดนกล่อง; -moz กล่องปรับขนาด: ชายแดนกล่อง; -webkit กล่องขนาด: ชายแดนกล่อง;  nav li: ลูกคนสุดท้าย ชายแดนขวา: 0;

ถัดไปเมนูจะมีสีที่สว่างกว่าเมื่ออยู่ใน : เลื่อน หรือ :คล่องแคล่ว สถานะ.

 nav a: hover, nav a: active background-color: # 8c99a4;

... และสุดท้ายลิงก์พิเศษจะถูกซ่อน (สำหรับหน้าจอเดสก์ท็อป).

 nav # pull display: none;

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

อ่านเพิ่มเติม: ขนาดกล่อง CSS3 (Hongkiat.com)

การค้นหาสื่อ

เคียวรีสื่อบันทึก CSS3 ใช้เพื่อกำหนดลักษณะที่จะเปลี่ยนในเบรกพอยต์บางอย่างหรือขนาดหน้าจอของอุปกรณ์โดยเฉพาะ.

เนื่องจากการนำทางของเรานั้นเริ่มแรก 600px ความกว้างคงที่เราจะกำหนดรูปแบบเมื่อมันดู 600px หรือขนาดหน้าจอที่ต่ำกว่าดังนั้นการพูดจริง, นี้ เป็นเบรกพอยต์แรกของเรา.

ในขนาดหน้าจอนี้ลิงก์เมนูสองรายการแต่ละลิงค์จะปรากฏขึ้นพร้อมกันดังนั้น ยูความกว้างของที่นี่จะเป็น 100% ของหน้าต่างเบราว์เซอร์ในขณะที่ลิงก์เมนูจะมี 50% สำหรับความกว้าง.

 หน้าจอ @ สื่อและ (ความกว้างสูงสุด: 600px) nav สูง: อัตโนมัติ;  nav ul width: 100%; จอแสดงผล: บล็อก; ความสูง: อัตโนมัติ;  nav li กว้าง: 50%; ลอย: ซ้าย; ตำแหน่ง: ญาติ;  nav li a border-bottom: 1px solid # 576979; ขอบขวา: 1px solid # 576979;  nav text-align: left; ความกว้าง: 100%; เยื้องข้อความ: 25px;

…จากนั้นเรายังกำหนดวิธีการนำทางจะปรากฏขึ้นเมื่อหน้าจอเล็กลง 480px หรือต่ำกว่า (นี่คือจุดพักที่สองของเรา).

ในขนาดหน้าจอนี้ลิงก์พิเศษที่เราเพิ่มก่อนหน้านี้จะเริ่มปรากฏให้เห็นและเรายังให้ลิงก์เป็น “เมนู” ไอคอนทางด้านขวาโดยใช้ไอคอน :หลังจาก องค์ประกอบหลอก, ในขณะที่ลิงก์เมนูหลักจะถูกซ่อนไว้เพื่อประหยัดพื้นที่ในแนวตั้งบนหน้าจอ.

 @ สื่อหน้าจอเท่านั้นและ (ความกว้างสูงสุด: 480px) nav เส้นขอบด้านล่าง: 0;  nav ul display: none; ความสูง: อัตโนมัติ;  nav # pull display: block; สีพื้นหลัง: # 283744; ความกว้าง: 100%; ตำแหน่ง: ญาติ;  นำทาง # pull: after content: ""; พื้นหลัง: url ('nav-icon.png') ไม่ทำซ้ำ ความกว้าง: 30px; ความสูง: 30px; จอแสดงผล: บล็อกแบบอินไลน์; ตำแหน่ง: สัมบูรณ์; ขวา: 15px; ด้านบน: 10px;

สุดท้ายเมื่อหน้าจอเล็กลง 320px และลดลงเมนูจะแสดงในแนวตั้งจากบนลงล่าง.

 @ สื่อหน้าจอเท่านั้นและ (ความกว้างสูงสุด: 320px) nav li display: block; ลอย: ไม่มี; ความกว้าง: 100%;  nav li a border-bottom: 1px solid # 576979;

ตอนนี้คุณสามารถลองปรับขนาดหน้าต่างเบราว์เซอร์ ตอนนี้มันควรจะสามารถปรับขนาดหน้าจอ.

อ่านเพิ่มเติม: Media Queries สำหรับอุปกรณ์มาตรฐาน.

แสดงเมนู

ณ จุดนี้เมนูจะยังคงซ่อนอยู่และจะปรากฏเฉพาะเมื่อจำเป็นโดยการแตะหรือคลิกที่ “เมนู” ลิงค์และเราสามารถบรรลุผลโดยใช้ jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('คลิก', function (e) e.preventDefault (); menu.slideToggle ();););

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

ดังนั้นเราจำเป็นต้องลบสไตล์นี้เมื่อปรับขนาดหน้าต่างดังนี้:

 $ (หน้าต่าง) .resize (function () var w = $ (หน้าต่าง). width (); ถ้า (w> 320 && menu.is (': ซ่อนอยู่')) menu.removeAttr ('style'); );

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

การสาธิต
แหล่งดาวน์โหลด

โบนัส: ทางเลือกอื่น

ดังที่เราได้กล่าวถึงก่อนหน้านี้ในโพสต์นี้มีวิธีอื่น ๆ ในการทำและใช้ห้องสมุด JavaScript ที่เรียกว่า SelectNav.js เป็นหนึ่งในวิธีที่ง่ายที่สุด. นี่คือ JavaScript ที่แท้จริงที่ไม่ได้ใช้ไลบรารีบุคคลที่สามอื่นเช่น jQuery.

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

โปรดอ้างอิงเอกสารทางการสำหรับการดำเนินการต่อไป.

ข้อสรุป

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