การยุบเมนูในเทมเพลตที่ตอบสนอง ภาพรวมที่ยอดเยี่ยมของเมนูหลายระดับที่สวยงามพร้อม Codepen

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

เมนูสีเข้มเฉพาะ CSS โดย John Erbank

นอกเหนือจากการออกแบบแล้ว ตัวอย่างนี้ยังกำหนดเมนูแบบเลื่อนลงแบบตอบสนองอีกด้วย แถบนำทางเมื่อ หน้าต่างมาตรฐานครองตำแหน่งแนวนอนปกติ

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

ดูการสาธิต

ผลงานแบบตอบสนองเต็มรูปแบบโดย Celine

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

ดูการสาธิต

Bootstrap Navbar โดย Bobby

ข้อมูลโค้ดนี้ประกอบด้วยเบรกพอยต์หลายจุดและติดตั้งไว้ที่ด้านบนของ Bootstrap

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

ดูการสาธิต

Clean Dropdown Toggle โดย Boyd Massier

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

ดูการสาธิต

แถบเลื่อนแบบเคลื่อนไหวโดย Antoine Vinial

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

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

ดูการสาธิต

เมนูตอบสนองขั้นพื้นฐานโดย Ash Nelson

เมื่อดูเผินๆ เมนูนี้ดูเหมือนเป็นมาตรฐาน: ลิงก์แบบเดิม การสลับเมนูแฮมเบอร์เกอร์ และโทนสีเรียบๆ แม้ว่าจะไม่มีความแวววาว แต่เมนูก็ใช้งานได้และใช้งานง่าย รหัสทั้งหมดเขียนด้วยภาษา Haml และ SASS

ดูการสาธิต

ลิ้นชักเลื่อน Hamburger Nav โดย Hanlin Chong

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

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

ดูการสาธิต

Mic Nav หน้าเดียวโดย Travis

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

ดูการสาธิต

Morphing Circular Menu โดยเซอร์จิโอ

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

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

ดูการสาธิต

บริสุทธิ์ CSS เฟล็กซ์บ็อกซ์การนำทาง โดย Joe Watkins

Flexbox CSS3 เป็นคำที่นักพัฒนาใช้เพื่ออ้างถึงโมเดลโครงร่าง CSS3 ที่ยืดหยุ่น เราได้เผยแพร่ไปแล้วซึ่งฉันแนะนำให้คุณอ่าน

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

ดูการสาธิต

Animated Toggle โดย Joe Baggaley

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

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

ดูการสาธิต

เมนูการนำทางที่ยืดหยุ่นโดย gantit

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

ดูการสาธิต

แท็บ CSS บริสุทธิ์โดย Martin Gaidichar

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

ดูการสาธิต

Pure CSS Breadcrumbs โดย Oliver Noblitch

Breadcrumbs ไม่ได้รับความนิยมมากนักในหมู่นักออกแบบและนักพัฒนา แต่สามารถใช้สำหรับอินเทอร์เฟซการนำทางได้ เหล่านี้ เศษขนมปังใช้งานโดยไม่มีเอฟเฟกต์ภาพเคลื่อนไหว แต่เขียนด้วย CSS ล้วนๆ

ดูการสาธิต

Batman Nav โดย Mighty Shaban

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

ระบบเมนูจัดวางอย่างสวยงาม ซึ่งจะมีประโยชน์เมื่อพัฒนาเค้าโครงหน้าเดียวใดๆ

ดูการสาธิต

ดรอปดาวน์หลายระดับโดย Stephanie Water

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

ดูการสาธิต

Pure CSS eBook Webapp โดย Andy Fitzsimon

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

ดูการสาธิต

การนำทางที่มีความกว้างเท่ากัน โดย Dorian Kovran

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

ดูการสาธิต

Navbox หลายระดับเก๋ไก๋โดย Andrew DeBrew

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

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

โดยพื้นฐานแล้ว เราจะมีเมนูแบบเลื่อนลงปกติตามรายการ UL > LI ถ้าเราทำให้หน้าจอเล็กลง เมนูย่อยทั้งหมดจะใช้งานได้โดยการคลิก มาดูกันว่าเราควรจะได้อะไร:

ขั้นตอนที่ 1 HTML

เอาล่ะ รหัสเอชทีเอ็มตัวอย่างการสาธิตของเรา:

ดัชนี.html

เมนูที่ตอบสนอง- บทช่วยสอนสคริปต์

ที่นี่ฉันต้องการทราบจุดหนึ่ง - เมตาที่มีแอตทริบิวต์ name='viewpoint' แท็กนี้จำเป็นสำหรับการปรับขนาดเนื้อหาของหน้าบนหน้าจอให้ถูกต้อง ไม่ว่าจะเป็นจอคอมพิวเตอร์หรือโทรศัพท์มือถือ โค้ดที่เหลือก็เข้าใจได้ไม่ยาก รายการหลายระดับ UL > LI

ขั้นตอนที่ 2: CSS

ดังนั้นสไตล์ ก่อนอื่นสำหรับเพจนั้น:

css/main.css

* ( ระยะขอบ: 0; การขยาย: 0; ) html ( สีพื้นหลัง: #fff; ความสูง: 100%; ) ร่างกาย ( สี: #333333; แบบอักษร: 0.75em/1.5em Arial,sans-serif; ) .container ( ขอบซ้าย: อัตโนมัติ ขอบขวา: อัตโนมัติ; ขอบบน: 30px;

ตอนนี้เรามาเขียนสไตล์สำหรับองค์ประกอบเมนูด้านบน:

/* รูปแบบทั่วไปและระดับบนสุด */ #nav span ( display: none; ) #nav, #nav ul ( list-style: none ภายนอก none; margin: 0; padding: 0; ) #nav ( สีพื้นหลัง: # F5F5F5; ขอบล่าง: 5px ทึบ - ซ้าย: 1%; ตำแหน่ง: ความกว้างสัมพัทธ์: 98%; FFFFFF; : ด้านบนสุด: 96% ; ) #nav > li ( ขอบล่าง: 5px ทึบโปร่งใส; ลอย: ซ้าย; ขอบล่าง: -5px; จัดเรียงข้อความ: ซ้าย; -moz-transition: ทั้งหมด 300ms ง่ายในการเข้าออก 0s; -ms-transition: ความง่ายในการเข้า-ออก 300ms ทั้งหมด; -o-transition: 0s ความง่ายในการเข้า-ออกทั้งหมด 300ms; : บล็อก; การตกแต่งข้อความ: ไม่มี; -moz-transition: สี 450ms ความง่ายในการเข้า - ออก 0, พื้นหลัง - สี 450ms ความง่ายในการเข้าออก 0s;

-o-transition: สี 450ms ความง่ายในการเข้า-ออก 0s, สีพื้นหลัง 450ms ความง่ายในการเข้า-ออก 0s;

-webkit-transition: สี 450ms ความง่ายในการเข้า-ออก 0s, สีพื้นหลัง 450ms ความง่ายในการเข้า-ออก 0s;

ยอดเยี่ยม. สิ่งที่สำคัญที่สุดคือเมนูจะปรับตัวได้อย่างไร? จริงๆแล้วมันง่ายมาก! เราจะใช้คำสั่งสื่อ CSS3 เพื่อกำหนดสไตล์ที่จะแสดงตามขนาด หน้าจอที่กำหนดเอง- เราจะเปลี่ยนเมนูโดยใช้เคล็ดลับต่อไปนี้ ในโค้ด HTML ของเรา ทันทีหลังจากระดับเมนูด้านบน ฉันวาง SPAN พิเศษไว้ เราจะใช้มันโดยกำหนดสถานะที่ใช้งานอยู่ (คลาสหลอก: เป้าหมาย) เมื่อคลิก องค์ประกอบด้านบนเมนู. นี่จะเป็นการเปิดเมนูย่อย ลองดูรหัส:

/* กฎการตอบสนอง */ @media ทั้งหมด และ (ความกว้างสูงสุด: 980px) ( #nav > li ( float: none; border-bottom: 0; margin-bottom: 0; ) #nav ul.subs ( ตำแหน่ง: สัมพันธ์; ด้านบน: 0; ) #nav li:hover ul.subs ( จอแสดงผล: none; ) #nav li #s1:target + ul.subs, #nav li #s2:target + ul.subs ( จอแสดงผล: block; ) #nav ul.subs > li ( จอแสดงผล: บล็อก; ความกว้าง: อัตโนมัติ; ) )

บรรทัดล่าง

ดังนั้นเราจึงสร้างเมนูที่ปรับเปลี่ยนได้เจ๋งๆ ขึ้นมาใหม่ตั้งแต่ต้น ฉันหวังว่าคุณจะพบว่ามันมีประโยชน์ ขอให้โชคดี! แล้วพบกันใหม่!

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

เพื่อความชัดเจน เราจะสร้างส่วนหนึ่งที่มีภาพพื้นหลังขนาดใหญ่ ซึ่งประกอบด้วยส่วนหัวที่มีโลโก้และเมนูแนวนอน

มาร์กอัป HTML

งานมีความชัดเจน ภายในแท็กส่วนจะมีส่วนหัวของไซต์ซึ่งอยู่ภายใน บล็อก divพร้อมโลโก้และ แถบนำทางนำทาง มันจะถูกใช้เป็นคอนเทนเนอร์สำหรับเมนูของรายการสัญลักษณ์แสดงหัวข้อย่อย ul พร้อมด้วยเมนู item-links a








  • บ้าน

  • ค้นหา

  • บริการ

  • ข่าว

  • ภาพถ่าย

  • กฎ





ตามปกติแล้ว โครงสร้าง HTML ดูเรียบง่ายมาก - รหัสสะอาดและไม่มีอะไรพิเศษ ดีใจที่ได้เห็น อย่างไรก็ตาม หากคุณดูผลลัพธ์ในเบราว์เซอร์ คุณจะต้องเปิดไฟล์สไตล์อย่างรวดเร็วและเริ่มสร้างสิ่งที่สวยงาม

นี่คือสิ่งที่เราจะทำตอนนี้

สไตล์ส่วน - ส่วน

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

ส่วน (
พื้นหลัง: url(bg.jpg);
}

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

ขนาดพื้นหลัง: ปก;
ความสูง: 100vh;

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

ซ้ำพื้นหลัง: ไม่ซ้ำ;

บน โทรศัพท์มือถือหากไม่จัดพื้นหลังให้ตรงกลางก็อาจถูกตัดออก

ตำแหน่งพื้นหลัง: กึ่งกลาง;

ส่วนนี้พร้อมแล้ว เราจะเขียนสไตล์สำหรับส่วนหัวในนั้น

จัดแต่งทรงผมส่วนหัวของเว็บไซต์

มาดูกันดีกว่าว่าส่วนหัวจะประกอบด้วยบล็อกใดบ้าง นี่คือบล็อก div ที่มีโลโก้และบล็อกการนำทาง

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

ส่วนหัว (
จอแสดงผล: ดิ้น;
ปรับเนื้อหา: ช่องว่างระหว่าง;
จัดรายการ: กึ่งกลาง;
}

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

ส่วนสูง: 18%;
กล่องเงา: 0 5px 15px rgba (0,0,0,.2);

ผลลัพธ์ เฟล็กซ์บ็อกซ์ทำงานอย่างไรและเงาที่ปรากฏอยู่ข้างล่างนี้

ทำงานกับโลโก้

ตอนนี้โลโก้ถูกกดไปที่ขอบด้านซ้ายของหน้าต่างเบราว์เซอร์ ให้เลื่อนไปทางขวาเล็กน้อย

โลโก้ img (
ขอบซ้าย: 2.3em;
}

รหัสต่อไปนี้ทำให้โลโก้ตอบสนอง

ความกว้างสูงสุด: 100%;

การออกแบบเมนู - ul

ลบเครื่องหมายออกจากรายการเมนู

อูล(
รายการสไตล์ประเภท: ไม่มี;
}

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

อูล(
จอแสดงผล: ดิ้น;
ดิ้นไหล: nowrap;
ทิศทางแบบยืดหยุ่น: แถว;
ปรับเนื้อหา: กึ่งกลาง;
จัดรายการ: กึ่งกลาง;
การเปลี่ยนแปลง: .5 วินาที;
}

รายการเมนู li อยู่ใกล้กันมากและเราต้องทำงานกับแบบอักษรและลิงก์

มากำหนดระยะขอบรอบรายการเมนูกัน

อุลลี เอ (
การขยาย: 10px 20px;
}

มาสร้างข้อความกันเถอะ เป็นตัวพิมพ์ใหญ่และลบการขีดเส้นใต้ของลิงก์ออก

การแปลงข้อความ: ตัวพิมพ์ใหญ่;
การตกแต่งข้อความ: ไม่มี;

เราเลือกแบบอักษรที่เข้มกว่าเพื่อตัดกันและทำให้มันเป็นตัวหนา (มันทำให้ฉันรำคาญเมื่อสีของข้อความรวมเข้าด้วยกัน สีพื้นหลังเว็บไซต์).

สี: #262625;
น้ำหนักตัวอักษร: ตัวหนา;

สร้างเอฟเฟกต์โฮเวอร์ง่ายๆ และอย่าลืมเกี่ยวกับการเปลี่ยนแปลงที่ราบรื่น

อุลลี a:โฮเวอร์ (
พื้นหลัง: #000;
สี: #fff;
การเปลี่ยนแปลง: .5 วินาที
}

ในบทเรียนถัดไป เราจะทำให้เมนูของเราตอบสนองโดยการสอบถามสื่อ ดูโค้ดทั้งหมดได้ที่ jsfiddle.

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

เมนูสำหรับหน้าจอขนาดใหญ่

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

เมนูสองรายการในรูปแบบ HTML

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

กระบวนการเริ่มต้นใช้งาน

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

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

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

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

สัมผัสสุดท้าย

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

  • (function($)($(function() $(".menu__icon").on("click", function() $(this).closest(".menu").toggleClass("menu_state_open");)) ;));))(jQuery)

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

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

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

  • การเขียนแท็ก HTML
  • จัดแต่งทรงผมโดยใช้ Cascading Style Sheets (CSS)
  • การปรับเปลี่ยนเมนูที่มีอยู่

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

    บูทสแตรป

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

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

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

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

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

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

    ทรัพยากร Bootstrap จะเป็นผู้ช่วยที่ยอดเยี่ยมในการสร้างเมนูแบบเลื่อนลงที่ตอบสนอง เมื่อต้องการทำเช่นนี้ เพียงแทนที่บรรทัดแท็ก

  • จากตัวอย่างก่อนหน้าเป็นโค้ดด้านล่าง

    รายการแบบเลื่อนลง

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

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

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

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

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

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

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

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

      เจคิวรี่

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

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

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

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

      var navigation = $("#nav-main").okayNav();

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

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

      จูมล่า

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

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

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

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

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

      สวัสดีเพื่อน ๆ เพื่อนร่วมงาน! เป็นอย่างไรบ้าง หวังว่าทุกคนจะทำได้ดีนะ :) วันนี้เราจะทำเมนูดัดแปลงง่ายๆ มาฝากกันค่ะ หน้า Landing Page- ผู้คนถามเกี่ยวกับเรื่องนี้บ่อยขึ้นเรื่อยๆ และฉันก็เขียนคำถามเหล่านี้ลงไปและพยายามถาม เวลาว่างเขียนบทความในหัวข้อเหล่านี้

      ขอบคุณที่ให้แนวคิดใหม่ๆ แก่ฉันในลักษณะนี้และช่วยพัฒนาบล็อก ว่าแต่คุณอยากอ่านหัวข้ออะไรล่ะ? บทความถัดไป- กรุณาเขียนความคิดเห็นนี่เป็นสิ่งสำคัญมากสำหรับฉัน เอาล่ะ มาเริ่มกันเลย...

      วิธีสร้างเมนูแบบตอบสนองสำหรับเว็บไซต์

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

      โดยพื้นฐานแล้วมันจะเป็น html + css แต่คุณจะต้องมีสคริปต์ขนาดเล็กมากในการประมวลผลการคลิก ดังนั้น…

      เมนูแนวนอนที่ตอบสนอง

      เริ่มจาก html กันก่อน ก่อนอื่นมาเชื่อมต่อกันก่อน ไลบรารี jquery- คุณอาจใช้มันมาเป็นเวลานานแล้ว ดังนั้นตรวจสอบให้แน่ใจว่าคุณไม่ได้เชื่อมต่อเป็นครั้งที่สอง:

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

    • ดาวน์โหลดราคา
    • รายชื่อผู้ติดต่อ
    • รีวิว

      • อย่างที่คุณเห็น มันไม่ซับซ้อน ฉันคิดว่าคุณสามารถปรับปรุงได้ด้วยตัวเองตามต้องการ
      ตอนนี้มาเพิ่มสไตล์:

      #menu ( พื้นหลัง: #2ba9c0; ความกว้าง: 100%; padding: 10px 0; text-align: center; ) #menu a ( สี: #fff; การตกแต่งข้อความ: none; padding: 12px 12px; ) #menu a: โฮเวอร์ ( ขอบล่าง: 4px solid #fff; พื้นหลัง: #078ecb; ) .itemsMenu li ( จอแสดงผล: อินไลน์; ช่องว่างด้านขวา: 35px; ความกว้าง: 100%; ระยะขอบ: 0 อัตโนมัติ; ) .itemsMenu li img (จัดแนวตั้ง : กลาง; ขอบขวา: 10px; .iconMenu ( color: #fff; cursor: pointer; display: none; ) .showitems ( display:block !important; ) @media screen และ (max-width: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( จอแสดงผล:none; ) .itemsMenu li ( display:block; padding:10px 0 ; ) )

      ตอนนี้ เมื่อคุณลดขนาดหน้าต่างเบราว์เซอร์ คุณจะเห็นภาพต่อไปนี้:

      ฉันไม่อยากอธิบายทุกบรรทัดเพราะบล็อกไม่ได้เกี่ยวกับการจัดวางเช่นนี้ ให้ฉันลองอธิบายดู

      ขั้นแรก เราตั้งค่าคุณสมบัติ display:inline ให้กับองค์ประกอบ li เพื่อให้ปรากฏในแนวนอนติดกัน ฉันสามารถใช้ float:left แต่ฉันตัดสินใจทำเช่นนี้ และซ่อนไอคอนเมนูด้วยคุณสมบัติ display:none เมื่อความละเอียดหน้าจอน้อยกว่า 600 พิกเซล ให้ลบอินไลน์ออกจากองค์ประกอบ li ซ่อน และแสดงไอคอน สรุป - ใช่

      ตอนนี้เราต้องการสคริปต์ง่ายๆ ที่จะประมวลผลการคลิกบนไอคอนเมนูและแสดงองค์ประกอบของมัน:

      $(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

      แบบนี้. ฉันเอามันไป แยกไฟล์และรวมไว้หน้าแท็กเนื้อหาปิด

      แค่นั้นแหละ. ด้วยวิธีนี้ คุณจะสามารถสร้างเมนูที่ปรับเปลี่ยนได้ง่ายสำหรับหน้า Landing Page ของคุณได้อย่างรวดเร็ว

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



    • บทความที่เกี่ยวข้อง