วิธีทำเมนูการปรับตัว ตัวอย่าง

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

เมนูจอใหญ่

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

เมนูสองจุดใน HTML

คุณจะต้องเพิ่มสไตล์ CSS ให้กับเมนูผลลัพธ์ ควรระบุขนาดและสีของแบบอักษร พื้นหลัง ตำแหน่งของบล็อก

กระบวนการปรับตัว

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

แท็ก HTML - เอกสาร

ถัดไป คุณจะต้องเพิ่มแท็กเหล่านี้สไตล์ที่เหมาะสมเพื่อสร้างเมนูที่ดึงดูดสายตาและอ่านง่าย นอกจากการออกแบบภาพของการนำทางและไอคอนเมนูแล้ว คุณต้องจัดเรียงตำแหน่งของภาพให้สอดคล้องกัน ดังนั้นจึงแนะนำเงื่อนไข menu_icon span: nth-child (1) {top: 0 px}; นั่นคือระยะขอบด้านบนของภาพจะเป็นศูนย์พิกเซล ในทำนองเดียวกัน คุณต้องตั้งค่าให้อีกฝ่ายหนึ่ง

ตอนนี้เมนูตอบสนองใกล้เสร็จแล้วให้ความสนใจกับการแสดงผล: ไม่มีเงื่อนไข โดยค่าเริ่มต้น ไอคอนเมนูจะไม่ปรากฏบนไซต์ ดังนั้นต้องเพิ่มคลาสเพิ่มเติมในเอกสาร CSS ด้วยเงื่อนไขต่อไปนี้: .menu__icon {display: inline-block;} ซึ่งจะทำให้การนำทางมองเห็นได้

นอกจากนี้ คุณต้องเพิ่มลงในตารางเรียงซ้อนจัดรูปแบบงานที่จะซ่อนย่อหน้าและย่อหน้าย่อยตามต้องการ ในการทำเช่นนี้ ใน CSS คุณต้องตั้งค่าตำแหน่งเมนูคงที่ จัดรูปแบบการแสดงผลและการจัดตำแหน่ง รายการถูกซ่อนโดยใช้เงื่อนไขล้น: อัตโนมัติ; ความทึบ: 0; ดัชนี z: 1000 คุณยังสามารถเพิ่มคลาส menu__links-item ซึ่งจะระบุสไตล์สำหรับรายการเมนู แต่นี่เป็นคำขอของนักพัฒนาซอฟต์แวร์

สัมผัสการตกแต่ง

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

• (ฟังก์ชัน ($) {$ (ฟังก์ชัน () $ (". menu__icon") บน ("คลิก" ฟังก์ชัน () $ (นี้) .closest (". เมนู") toggleClass ("menu_state_open");}) ;});}) (jQuery).

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

โดยไม่เปลี่ยนมาตรฐาน

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

1. การเขียนแท็ก HTML
2. จัดแต่งทรงผมโดยใช้สไตล์ชีตแบบเรียงซ้อน (CSS)
3. การปรับเมนูที่มีอยู่

โดยปกติ ไซต์ทั้งหมดจะมีแถบเมนูของตัวเอง แต่ถ้าทรัพยากรถูกสร้างขึ้นบน CMS การสร้างเมนูตอบสนองใหม่จะง่ายกว่ามาก

Bootstrap

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

ตัวอย่างเมนู 3 จุดที่ตอบสนองในแนวนอน

คุณสมบัติของวิธีการ

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

ชั้นเรียนมีบทบาทสำคัญในการสร้างฟังก์ชันการทำงานที่ปรับเปลี่ยนได้ ทรุด และ navbar-ยุบที่รับผิดชอบต่อสไตล์ เมนูนี้สร้างขึ้นโดยการเขียนรายการสัญลักษณ์แสดงหัวข้อย่อยของรายการที่วางในแนวนอน

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

เมนูแบบเลื่อนลง

Bootstrap เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับการสร้างดรอปดาวน์แบบตอบสนอง ในการดำเนินการนี้ เพียงแทนที่แท็กไลน์ <li> จากตัวอย่างก่อนหน้าด้วยโค้ดด้านล่าง

รายการดรอปดาวน์

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

เมนูหลายระดับ

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

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

แถบนำทางรายการ HTML

แอนิเมชั่นดรอปดาวน์ที่ตอบสนองถูกตั้งค่าโดยใช้สไตล์ชีตแบบเรียงซ้อน ที่นี่คุณต้องระบุพารามิเตอร์สำหรับเมนูเมื่อหน้าจอลดลง 50, 75 และ 25% วิธีการสร้างฟังก์ชันที่ปรับเปลี่ยนได้นี้มีรูปแบบที่เหมาะสมซึ่งเมนูจะไม่ "เลื่อนออก"

และสุดท้าย คุณต้องป้อนฟังก์ชันที่ระบุด้านล่างลงในเอกสาร

ฟังก์ชัน

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

JQuery

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

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

หลังจากนั้นคุณต้องจัดวางระบบนำทางหากยังไม่มี ทุกอย่างที่นี่ดำเนินการตามหลักการ: "ความเฉลียวฉลาดทั้งหมดนั้นเรียบง่าย" ในเอกสาร HTML คุณต้องสร้างรายการหัวข้อย่อยในแท็ก nav... คุณสามารถใช้ตัวอย่างที่ให้ไว้ก่อนหน้านี้หรือแบบง่ายก็ได้ ซึ่งดูเหมือนตัวอย่างที่แสดงด้านล่าง

รายการเมนูใน HTML

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

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

โซลูชันนี้ดูทันสมัยมาก และเอฟเฟกต์แอนิเมชันที่เกี่ยวข้องทำให้ทรัพยากรอยู่ในแสงที่ดีต่อหน้าผู้เยี่ยมชม

Joomla

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

เมนูสำหรับ jooble

ถัดไป คุณต้องเพิ่มสไตล์ทางออกที่ดีที่สุดของคุณคือตั้งค่าช่องว่างภายในทั้งหมดเป็น 0 px และใช้ box-sizing: border-box ซึ่งจะทำให้สามารถรักษาความกว้างที่ระบุขององค์ประกอบได้ ไม่ว่าจะมีการเยื้องมากน้อยเพียงใด ถัดไป สำหรับองค์ประกอบเมนูหลัก (div) คุณควรตั้งค่าความกว้างเป็น 90% แล้วเริ่มกำหนดสไตล์แต่ละรายการแยกกัน

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

ฟังก์ชันข้ามเบราว์เซอร์

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