วิธีสร้าง Navigation Responsive
หนึ่งในส่วนที่ยากที่สุดที่จะเป็น responsified บนเว็บไซต์คือ “การนำทาง”, ส่วนนี้มีความสำคัญอย่างยิ่งต่อการเข้าถึงเว็บไซต์เนื่องจากนี่เป็นหนึ่งในวิธีที่ผู้เข้าชมข้ามหน้าเว็บ.
จริงๆแล้วมีหลายวิธีในการสร้างการนำทางเว็บไซต์ที่ตอบสนองและแม้กระทั่งบางปลั๊กอิน jQuery ก็สามารถทำได้ในไม่กี่วินาที.
อย่างไรก็ตามแทนที่จะใช้วิธีแก้ปัญหาแบบทันทีในโพสต์นี้เราจะแนะนำคุณต่อไป วิธีการสร้างการนำทางอย่างง่ายจากพื้นดิน และใช้คิวรี่สื่อ CSS3 และ jQuery เล็กน้อยเพื่อแสดงในหน้าจอขนาดเล็กเช่นสมาร์ทโฟนอย่างถูกต้อง.
ดังนั้นเรามาเริ่มกันเลย.
- การสาธิต
- แหล่งดาวน์โหลด
HTML
ก่อนอื่นให้เพิ่มเมตาวิวพอร์ตภายใน หัว
แท็ก นี้ เมตาวิวพอร์ต จำเป็นต้องใช้แท็กสำหรับหน้าเว็บของเราในการปรับขนาดอย่างเหมาะสมภายในขนาดหน้าจอใด ๆ โดยเฉพาะในวิวพอร์ตมือถือ.
…แล้วเพิ่มตัวอย่างต่อไปนี้เป็นมาร์กอัปการนำทางภายใน ร่างกาย
แท็ก.
ดังที่คุณเห็นด้านบนเรามีลิงค์เมนูหลักหกลิงค์และเพิ่มอีกหนึ่งลิงก์หลังจากนั้น ลิงค์พิเศษนี้จะถูกใช้เพื่อ ดึง การนำทางเมนูเมื่อซ่อนอยู่ในหน้าจอขนาดเล็ก.
อ่านเพิ่มเติม: อย่าลืมเมตาแท็กวิวพอร์ต.
รูปแบบ
ในส่วนนี้เราเริ่มจัดแต่งทรงผมนำทาง สไตล์ที่นี่เป็นเพียงการตกแต่งคุณสามารถเลือกสีตามที่คุณต้องการ แต่ในกรณีนี้เรา (ส่วนตัว) ต้องการ ร่างกาย
มีสีอ่อนและสีครีม.
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.
โดยทั่วไปมันจะทำซ้ำเมนูรายการของคุณและเปลี่ยนเป็น เมนูแบบเลื่อนลงจากนั้นคุณสามารถเลือกได้ว่าจะซ่อนหรือแสดงรายการใดขึ้นอยู่กับขนาดหน้าจอผ่านทางข้อความค้นหาสื่อ.
ข้อดีอย่างหนึ่งที่ฉันชอบในการฝึกนี้คือเราไม่ต้องกังวลกับสไตล์การนำทางเหมือน เมนูจะใช้ประโยชน์จากส่วนติดต่อผู้ใช้ดั้งเดิมจากอุปกรณ์ของตัวเอง.
โปรดอ้างอิงเอกสารทางการสำหรับการดำเนินการต่อไป.
ข้อสรุป
เราได้ผ่านทุกวิธีในการสร้างการนำทางที่ตอบสนองตั้งแต่เริ่มต้น สิ่งนี้เราได้สร้างขึ้นที่นี่เป็นเพียงหนึ่งในตัวอย่างและตามที่เราระบุไว้ก่อนหน้าในโพสต์นี้และแสดงไว้ด้านบนมีวิธีแก้ปัญหาอื่น ๆ อีกมากมายที่คุณสามารถฝัง ดังนั้นจึงเป็นเรื่องที่คุณต้องตัดสินใจว่าจะเลือกวิธีใดที่เหมาะสมกับความต้องการและโครงสร้างการนำทางเว็บไซต์ของคุณ.