เมนู css ความกว้างเต็มหน้า เมนูแนวนอนสวยงามเต็มความกว้าง เมนูแบบตอบสนองพร้อมเอฟเฟกต์ขีดเส้นใต้เมื่อวางเมาส์เหนือลิงก์

สวัสดี ฉันไม่ได้เขียนโพสต์เกี่ยวกับงาน html/css มาเป็นเวลานานแล้ว เมื่อเร็ว ๆ นี้ฉันเพิ่งเริ่มรวบรวมเค้าโครงใหม่และในกระบวนการนี้ฉันพบเคล็ดลับที่น่าสนใจที่ช่วยให้คุณทำให้เมนูมีความยืดหยุ่น (คุณสามารถเพิ่มรายการใหม่ลงไปได้และขนาดจะไม่เพิ่มขึ้น แต่จะเท่ากับ 100% ของขนาดเสมอ บล็อกหลัก) ดังนั้นวันนี้เราจะใช้เมนูยางโดยใช้ CSS

หากคุณขี้เกียจอ่านบทความนี้ คุณสามารถชมวิดีโอนี้ได้ ผู้เขียนยังอธิบายทุกอย่างได้ดีมาก:

ขั้นตอนแรกคือมาร์กอัป html เสมอ เราจะอยู่ที่ไหนถ้าไม่มีมัน แต่ในกรณีของเราทุกอย่างจะง่าย:

ทุกอย่างชัดเจน นี่คือรหัสมาร์กอัปของฉัน:

• จุดที่ 1


• จุดที่ 2


• จุดที่ 3


• จุดที่ 4


• จุดที่ 5

ทุกอย่างดูเป็นมาตรฐาน เช่นนี้:

ตอนนี้เราจะนำทุกอย่างเข้ามา ประเภทที่ถูกต้อง, CSS เริ่มทำงาน

ต่อไป ฉันจะเพิ่มสไตล์ให้กับ wrapper block กล่าวคือ ฉันจะตั้งค่าความกว้างสูงสุดเป็น 600 พิกเซล (เพื่อให้จับภาพหน้าจอได้ง่ายขึ้นเพื่อให้เมนูพอดี) และฉันจะจัดกึ่งกลางบล็อกด้วย

ห่อ(
พื้นหลัง: #fff;
ความกว้างสูงสุด: 600px;
ระยะขอบ: 0 อัตโนมัติ;
}

ตอนนี้เรามาดูเมนูกันดีกว่า ฉันจะลบเครื่องหมายออกจากมัน (แท็ก ul) ทำการไล่ระดับสีเชิงเส้นพื้นหลัง และที่สำคัญที่สุดคือใช้คุณสมบัติ display: table-row เพื่อทำให้คอนเทนเนอร์สำหรับเมนูทำงานเหมือนแถวของตาราง นี่เป็นสิ่งสำคัญที่ต้องทำเพื่อการจัดการเพิ่มเติม

R-เมนู(
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, #b0d4e3 0%,#88bacf 100%);
จอแสดงผล: ตาราง-แถว;
รายการสไตล์: ไม่มี;
}

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

R-เมนู(
จัดแนวตั้ง: ด้านล่าง;
จอแสดงผล: ตารางเซลล์;
ความกว้าง: อัตโนมัติ;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูง: 50px;
เส้นขอบขวา: 1px ทึบ #222;
}

• แนวตั้ง: ด้านล่าง - คุณสมบัตินี้จำเป็นเพื่อที่ว่าถ้าข้อความในรายการเมนูยาว 2 บรรทัด ข้อความนั้นก็จะแสดงเท่าๆ กัน เมื่อเราสร้างเมนู คุณสามารถลบคุณสมบัตินี้ ขยายเพื่อให้รายการถูกบีบอัดและข้อความถูกย้ายไปยังสองบรรทัด แล้วคุณจะเห็นปัญหาในการแสดงผล คืนทรัพย์สินแล้วทุกอย่างจะเรียบร้อย
• display: table-cell - เนื่องจากเราตั้งค่าเมนูการแสดงผลให้เป็นแถวของตาราง จึงสมเหตุสมผลที่จะตั้งค่ารายการให้แสดงเป็นเซลล์ในตาราง นี่เป็นสิ่งจำเป็น
• width: auto — ความกว้างจะถูกคำนวณโดยอัตโนมัติ ขึ้นอยู่กับความยาวของข้อความในย่อหน้า
• text-align: center - นี่เป็นเพียงการจัดข้อความให้อยู่ตรงกลาง
• ความสูง: 50px — ตั้งค่าความสูงเป็น 50 พิกเซล
• border-right เป็นเพียงเส้นขอบทางด้านขวา ซึ่งเป็นตัวคั่นสำหรับรายการต่างๆ

ถึงตอนนี้เมนูดูไม่น่าดู แต่ก็ไม่เป็นไร ถึงเวลาที่ต้องคำนึงถึงแล้ว

สิ่งสุดท้ายที่ต้องทำคือจัดรูปแบบลิงก์ภายในรายการ ที่นี่ฉันมีรหัสนี้:

R-เมนู li a(
การตกแต่งข้อความ: ไม่มี;
ความกว้าง: 1,000px;
ความสูง: 50px;
แนวตั้ง-จัด: กลาง;
จอแสดงผล: ตารางเซลล์;
สี: #fff;
แบบอักษร: ปกติ 14px Verdana;
}

และนี่คือลักษณะของเมนูตอนนี้:

ให้ฉันอธิบายบางบรรทัดอีกครั้ง:

• คุณสมบัติการตกแต่งข้อความจะแทนที่การขีดเส้นใต้เริ่มต้นสำหรับลิงก์
• width: 1,000px อาจเป็นบรรทัดที่สำคัญที่สุด คุณต้องตั้งค่าลิงก์ให้มีความกว้างประมาณนี้ อาจจะน้อยกว่านี้ แต่ต้องใหญ่กว่ารายการเมนูที่กว้างที่สุดเท่าที่จะเป็นไปได้อย่างแน่นอน ลิงก์จะไม่กว้าง 1,000 พิกเซล เนื่องจากความกว้างจะถูกจำกัดโดยรายการเมนู li ซึ่งตั้งค่าความกว้างเป็นอัตโนมัติ แต่จะทำให้มั่นใจได้ว่าสำหรับรายการจำนวนเท่าใดก็ได้ในเมนูจะเป็น 100 เสมอ เปอร์เซ็นต์ของความกว้าง
• แนวตั้ง: ตรงกลาง และจอแสดงผล: ตารางเซลล์ - อันแรกจะจัดข้อความในแนวตั้งตรงกลาง และอันที่สองจะแสดงลิงก์เป็นเซลล์ด้วย จำเป็นต้องมีคุณสมบัติทั้งสองอย่าง
• แบบอักษร - นี่เป็นเพียงชุดการตั้งค่าสำหรับแบบอักษร อ่านเกี่ยวกับ คุณสมบัติ CSSสำหรับฟอนต์ในบทความนี้

ตัวอย่างเช่น เพื่อให้สีของรายการเมนูเปลี่ยนแปลงเมื่อโฮเวอร์ สิ่งนี้สามารถนำไปใช้งานได้ค่อนข้างง่ายโดยใช้คลาสหลอกแบบโฮเวอร์:

R-เมนู li:โฮเวอร์(
สีพื้นหลัง: #6bba70;
}

เยี่ยมมาก เมนูพร้อมแล้ว แต่เรายังไม่ได้ตรวจสอบสิ่งที่สำคัญที่สุด - มันเหนียวแค่ไหนตามที่ฉันสัญญาไว้กับคุณ ฉันจะเพิ่มอีก 2 รายการในเมนู:

เมนูยังคงมีความกว้าง 600 พิกเซล สิ่งของที่เหลือถูกย่อให้เล็กลงเล็กน้อยเพื่อรองรับสิ่งของใหม่ 2 ชิ้น

ฉันจะเพิ่มประเด็นยาวอีกหนึ่งประเด็น:

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

ฉันจะลดเมนูเหลือสามรายการ

รายการมีอิสระมากขึ้นมาก แต่เมนูเองก็ไม่ได้เปลี่ยนความกว้าง เราเลยทำเมนูยาง 100% ขึ้นมา!

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

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

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

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

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

มาร์กอัป HTML สำหรับการนำทางแนวนอน

• รายการเมนู
• รายการเมนู
• รายการเมนู
...

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

มีหลายวิธีในการวางแนวนอน ขั้นแรก คุณต้องรีเซ็ตสไตล์เบราว์เซอร์เริ่มต้นสำหรับองค์ประกอบการนำทาง:

Ul ( list-style: none; /*remove list markers*/ margin: 0; /*ลบระยะขอบด้านบนและด้านล่างเท่ากับ 1em*/ padding-left: 0; /*ลบ padding ด้านซ้ายเท่ากับ 40px*/ ) a ( การตกแต่งข้อความ: none; /*ลบการขีดเส้นใต้ข้อความลิงก์*/)

วิธีที่ 1. li (จอแสดงผล: อินไลน์;)

ทำให้องค์ประกอบรายการเป็นตัวพิมพ์เล็ก ด้วยเหตุนี้ พวกมันจึงถูกวางในแนวนอน โดยมีช่องว่าง 0.4em เพิ่มทางด้านขวาระหว่างพวกมัน (คำนวณโดยสัมพันธ์กับขนาดตัวอักษร) หากต้องการลบออก ให้เพิ่มระยะขอบขวาเป็นลบสำหรับ li li (margin-right: -4px;) ต่อไปเราจะจัดรูปแบบลิงก์ตามที่เราต้องการ

วิธีที่ 2. li (ลอย: ซ้าย;)

ทำให้องค์ประกอบรายการลอยตัว ส่งผลให้วางในแนวนอน ความสูงของบล็อกคอนเทนเนอร์ ul กลายเป็นศูนย์ เพื่อแก้ปัญหานี้ เราเพิ่ม (overflow: Hidden;) ให้กับ ul เพื่อขยายและอนุญาตให้มีองค์ประกอบลอยตัว สำหรับลิงก์ ให้เพิ่ม (display: block;) และจัดรูปแบบตามที่คุณต้องการ

วิธีที่ 3. li (จอแสดงผล: inline-block;)

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

วิธีที่ 4. ul (จอแสดงผล: flex;)

ทำให้รายการ ul เป็นคอนเทนเนอร์ที่ยืดหยุ่นโดยใช้นามสกุล . ด้วยเหตุนี้ องค์ประกอบรายการจึงถูกจัดเรียงในแนวนอน เราเพิ่ม (display: block;) สำหรับลิงก์และจัดรูปแบบตามต้องการ

1. เมนูแบบปรับได้พร้อมเอฟเฟกต์ขีดเส้นใต้เมื่อวางเมาส์เหนือลิงก์
• งาน
• เกี่ยวกับ
• บล็อก
• ติดต่อ
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (จอแสดงผล: inline-block;).menu- main li:after ( เนื้อหา: "|"; color: #606060; display: inline-block; Vertical-align:top; ) .menu-main li:last-child:after (เนื้อหา: none;) .menu-main a ( การตกแต่งข้อความ: ไม่มี; ครอบครัวแบบอักษร: "Ubuntu Condensed", sans-serif; การเว้นวรรคตัวอักษร: 2px; ตำแหน่ง: ญาติ; ช่องว่างด้านล่าง: 20px; ระยะขอบ: 0 34px 0 30px; ขนาดตัวอักษร: 17px; การแปลงข้อความ: ตัวพิมพ์ใหญ่; การแสดงผล: อินไลน์บล็อก; การเปลี่ยนแปลง: สี .2s; ) .menu-main a, .menu-main a:visited (สี: #9d999d; ) .menu-main a:before, .menu-main a:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ความสูง: 4px; บน: อัตโนมัติ; ขวา: 50%; ล่าง: -5px; ซ้าย: 50%; พื้นหลัง : #feb386; การเปลี่ยนแปลง: .8s; ) .menu-main a:hover:before, .menu-main .current:before (ซ้าย: 0;) 0;) @media (ความกว้างสูงสุด: 550px) ( .menu-main (padding-top: 0;).menu-main li (แสดง: block; ) .menu-main li:after (เนื้อหา: none;) เมนูหลัก ( ช่องว่างภายใน: 25px 0 20px;
• งาน
• เกี่ยวกับ
• บล็อก
• ติดต่อ
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( ตำแหน่ง: ญาติ; พื้นหลัง: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after (เนื้อหา: ""; display: block; height : 1px; border-top: 3px solid #575350; border-top: 1px solid #575350; 575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; .menu-main ( list-style: none; padding: 0 30px; ระยะขอบ: 0; ขนาดตัวอักษร: 18px; text-align: center; ตำแหน่ง: สัมพันธ์; ) .menu-main:before, .menu-main:after ( เนื้อหา: "\25C8"; line-height: 1; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; แปลงร่าง: แปล Y(-50% ); ( การตกแต่งข้อความ: ไม่มี; จอแสดงผล: inline-block; ระยะขอบ: 2px 5px; การขยาย: 6px 15px; ตระกูลแบบอักษร: "PT Sans", sans-serif; ขนาดตัวอักษร: 16px; สี: #777777; ขอบล่างสุด : 1px ทึบโปร่งใส การเปลี่ยนแปลง: .3s เชิงเส้น; ) .menu-main .current, .menu-main a:hover ( รัศมีเส้นขอบ: 3px; พื้นหลัง: #f3ece1; สี: #313131; เงาข้อความ: 0 1px 0 #fff; สีเส้นขอบ: #c6c6c6; ) @media (ความกว้างสูงสุด: 500px) ( .menu-main li (จอแสดงผล: block;) ) 3. เมนูสแกลลอปที่ตอบสนอง
• งาน
• เกี่ยวกับ
• บล็อก
• ติดต่อ
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( list-style: none; padding: 0 30px; Margin: 0; font-size: 18px; text-align: center; position:ญาติ; พื้นหลัง: white; ) .menu-main:after (เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ความสูง: 20px; ด้านล่าง: -20px; พื้นหลัง: สีขาว 0%, สีขาว 70%, rgba (255,255,255,0) 255,255,255,0) 100%) 0 -10px; พื้นหลังซ้ำ: ทำซ้ำ-x; ) .menu-main li (จอแสดงผล: inline-block;) .menu-main a ( การตกแต่งข้อความ: none; จอแสดงผล: inline-block; padding: 10px 30px; font-family: " PT Sans Caption", sans-serif; การเปลี่ยนแปลง: .3s เชิงเส้น; -main a:before, .menu-main a:after (เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ด้านบน: calc(50% - 3px); ความกว้าง: 6px; ความสูง: 6px; รัศมีเส้นขอบ: 50%; พื้นหลัง: #F58262; ความทึบ: 0; .5s ความง่ายในการออก; :after (ขวา: 5px;) .menu-main a. ปัจจุบัน:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after (ความทึบ: 1;) .menu-main a.current, .menu- main a:hover (สี: #F58262;) @media(max-width:680px) ( .menu-main li (จอแสดงผล: block;) ) 4. Adaptive เมนูบนริบบิ้น
• งาน
• เกี่ยวกับ
• บล็อก
• ติดต่อ
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( ระยะขอบ: 0 60px; ตำแหน่ง: สัมพันธ์; พื้นหลัง: #5A394E; กล่องเงา: ใส่ 1px 0 0 rgba(255,255,255,.1), ใส่ -1px 0 0 rgba(255,255,255,.1), ใส่ 150px 0 150px -150px rgba(255,255,255,.12) สิ่งที่ใส่เข้าไป -150px 0 150px -150px rgba(255,255,255,.12); .top-menu:before, .top-menu:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์) ; ; z-index: 2; width: 100%; height: 3px; ) .top-menu ( ด้านล่าง: 0; border-top: 1px ประ rgba(255,255,255,.2); ) .menu-main -style: none; padding: 0; text-align: center; ) . ; ด้านบน: 8px; border-top: 18px solid #5A394E; ขอบซ้าย: 12px solid rgba (255, 255, 255, 0) ) .menu- main: after ( right: -30px; border-right: 12px solid rgba (255, 255, 255, 0); ) .menu-main li ( จอแสดงผล: inline-block; margin-right: -4px; ) .menu-main a ( การตกแต่งข้อความ: none; จอแสดงผล: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; สี: ขาว; การเปลี่ยนแปลง: .3s เชิงเส้น; ) .menu-main a.current, .menu-main a:hover (พื้นหลัง: rgba(0,0,0,.2);) @media (ความกว้างสูงสุด: 680px) ( .top-menu (margin: 0;) .menu-main li ( จอแสดงผล: block; margin-right: 0; ) .menu-main:before, .menu-main:after (เนื้อหา: none;) .menu-main a (แสดง: block;) ) 5. เมนูแบบตอบสนองโดยมีโลโก้อยู่ตรงกลาง
• งาน
• เกี่ยวกับ
• เรื่องราว
• ติดต่อ
• ร้านค้า
• แกลเลอรี่
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( ตำแหน่ง: ญาติ; พื้นหลัง: rgba(34,34,34,.2); ) .menu-main ( รายการสไตล์: ไม่มี; ระยะขอบ: 0; การขยาย: 0; ) .menu-main:หลัง ( เนื้อหา: ""; แสดง: ตาราง; ชัดเจน: ทั้งสอง; ) .left-item (ลอย: ซ้าย;) .right-item (ลอย: ขวา;).navbar-logo ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ด้านบน : 50%; แปลง: แปล (-50%, -50%); .menu-main a ( ตกแต่งข้อความ: ไม่มี; จอแสดงผล: บล็อก; ความสูงบรรทัด: 80px; การขยาย: 0 20px; ขนาดตัวอักษร: 18px ; การเว้นวรรคตัวอักษร: 2px; ตระกูลแบบอักษร: "Arimo", sans-serif; สี: สีขาว; การเปลี่ยนแปลง: .3s เชิงเส้น; 0,0,.3) @media (ความกว้างสูงสุด: 830px) ( .menu- main ( padding-top: 90px; text-align: center; ) .navbar-logo ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 50% ; ด้านบน: 10px; แปลงร่าง: แปล X (-50%) ) .menu-main li ( float: ไม่มี; display: inline-block; ) .menu-main a ( line-height: Normal; padding: 20px 15px; font -size: 16px; ) ) @media (ความกว้างสูงสุด: 630px) ( .menu-main li ( จอแสดงผล: บล็อก;) ) 6. เมนูตอบสนองพร้อมโลโก้ด้านซ้าย
• งาน
• เกี่ยวกับ
• เรื่องราว
• ร้านค้า
• แกลเลอรี่
• ติดต่อ
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( พื้นหลัง: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( เนื้อหา: "" ; display: table; clear: ทั้งสอง; ) .navbar-logo (แสดง: inline-block;) .menu-main ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (จอแสดงผล: inline-block;).menu-main a ( การตกแต่งข้อความ: none; display: block; ตำแหน่ง: สัมพันธ์; line-height: 61px; padding-left: 20px; ขนาดตัวอักษร: 18px; ระยะห่างตัวอักษร : 2px; ตระกูลแบบอักษร: "Arimo", sans-serif; สี: #F73E24; การเปลี่ยน: .3s เชิงเส้น; .menu-main a:before (เนื้อหา: ""; ความกว้าง: 9px; ความสูง: 9px; ซ้าย: 50%; แปลง (45deg) แปล X (6.5px) การเปลี่ยนแปลง: .3s เชิงเส้น (ความทึบ: 1;) @media (ความกว้างสูงสุด: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:before (แปลง: หมุน(45deg) transX( -6px);) ) @media (ความกว้างสูงสุด: 600px) ( .menu-main li (จอแสดงผล: บล็อก;) )

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

หากคุณมาที่นี่โดยบังเอิญหรือกำลังมองหาการใช้งานเมนูแบบเลื่อนลงแบบอื่น ฉันแนะนำให้คุณไปที่ส่วนหลัก

ส่วนนี้จะอธิบายเมนูแบบเลื่อนลงแนวนอนใน CSS และ HTML

การนำทางหน้า:

ดังนั้น, งานของเรา:

สร้างเมนูแนวนอนด้วย CSS รายการแบบเลื่อนลง (ในรายการ ul li) โดยไม่ต้องใช้ โดยใช้ jQueryและ Javascript และยังไม่ใช้ตารางอีกด้วย

ในรหัส
เมนูแนวนอนแบบเลื่อนลง html

ก่อนอื่นก่อนที่เราจะเริ่มเขียนโค้ดเราต้องทำก่อน เทมเพลต HTMLสำหรับเมนู

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

• บ้าน
• เกี่ยวกับเรา
• บริการของเรา
  • บริการของเราหมายเลข 1
  • บริการของเราหมายเลข 2
  • บริการของเราหมายเลข 3
  • บริการของเราหมายเลข 4
  • บริการ 5
• ข่าว
• รายชื่อผู้ติดต่อ

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

ยอมรับเถอะว่ามันดูน่าเกลียดเหมือนรายการทั่วไป ต่อไปเราต้องตกแต่งเมนูนี้โดยใช้สไตล์ CSS

เมนูแบบเลื่อนลงแนวนอนใน CSS

สไตล์ CSS สำหรับเมนูแบบเลื่อนลงและอื่นๆ มีความจำเป็นพอๆ กับอากาศ ท้ายที่สุดแล้ว แท็บแบบเลื่อนลงจะถูกสร้างขึ้นตามคลาสหลอก:โฮเวอร์

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

#menu1( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ความกว้าง:100%; ความสูง:อัตโนมัติ; ดัชนี z:10; ) #menu1 ul( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ระยะขอบ:0px; การขยาย:0px; ความกว้าง:100 %; height:auto; list-style:none; พื้นหลัง:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # menu1 ul li( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ลอย:ซ้าย; ความกว้าง:อัตโนมัติ; ความสูง:อัตโนมัติ; ) #menu1 ul li a( จอแสดงผล:บล็อก; ช่องว่างภายใน:9px 25px 0px 25px; ขนาดตัวอักษร:14px; font- ครอบครัว:Arial, sans-serif; line-height:1.3em; font-weight:uppercase; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( พื้นหลัง:#EBBD5B; color:#2B45E0; )

นี่ยังไม่สิ้นสุด เพียงส่วนหนึ่งของ CSS สำหรับเมนูแนวนอนหลัก ต่อไปเราจะเขียนสไตล์สำหรับรายการแบบเลื่อนลงของเมนู:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*บรรทัดนี้นำไปใช้ กลไกการเลื่อนออก*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( จอแสดงผล:block; text-transform:none; height:auto; padding:7px 25px; ความกว้าง: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li li a:hover ( พื้นหลัง:#FDDC96;สี:#6572BC)

แค่นั้นแหละ. กลไกการออกกลางคันนั้นถูกนำไปใช้ในบรรทัดเดียว

ดูผิวด้วยเมนูนี้:

ข้าว. 2 (เมนูแบบเลื่อนลงแนวนอน)

ด้านล่างนี้เป็นการสาธิตการทำงานของเมนูแบบเลื่อนลง รวมถึงลิงก์สำหรับดาวน์โหลดแหล่งที่มา (ตัวเดโมจะเปิดขึ้นมาโดยมี drop-down อยู่ด้านบนของหน้านี้ ไม่ต้องคลิก open in a new window 🙂 หรือล้อเมาส์)

เมนูแบบเลื่อนลงแนวนอนแบบเต็มความกว้าง

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

ฉันหวังว่าคุณจะดาวน์โหลดตัวอย่างข้างต้น Html ของเรายังคงเหมือนเดิม แต่เราจะเปลี่ยน CSS ทั้งหมด คุณสามารถนำโค้ด CSS จากที่นี่มาวางลงในตัวอย่างที่ดาวน์โหลดมา หรือดูวิธีการทำงานในโหมดสาธิต

#container( width:1000px; height:auto; Margin:0px auto; padding-top:10px; ) #menu1( ตำแหน่ง:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ระยะขอบ:0px; การขยาย:0px; ความกว้าง:100%; ความสูง:อัตโนมัติ; รายการสไตล์:none; พื้นหลัง:#F3A601; ) #menu1 > ul( การจัดแนวข้อความ: จัดชิดขอบ; ขนาดตัวอักษร:1px; line-height:1px; ) #menu1 > ul:after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( ตำแหน่ง :relative; display:inline-block; width:auto; ความสูง:1.3em; font-weight:uppercase; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( พื้นหลัง:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( ตำแหน่ง:สัมบูรณ์; บน:36px; ซ้าย :0px;

จอแสดงผล:ไม่มี;

ความกว้าง:อัตโนมัติ;

พื้นหลัง:#EBBD5B;

พื้นที่สีขาว: nowrap;

) #menu1 ul li:last-child ul(/*รายการสุดท้ายจะถูกแนบไว้ที่ขอบด้านขวา*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this บรรทัดใช้กลไก dropouts*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; ความกว้าง:100% ; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li li a:hover ( พื้นหลัง: #FDDC96;สี:#6572BC;

ตัวอย่างนี้ยังแตกต่างจากตัวอย่างแรกตรงที่เมนูดรอปดาวน์หรือดรอปดาวน์นั้นเองจะขยายออกขึ้นอยู่กับความกว้างของรายการเมนูทั้งหมด สำหรับรายการเมนูที่ยาวมาก ตัวเลือกนี้อาจไม่สะดวกนักเนื่องจากจะเกินขีดจำกัด หากต้องการปิดใช้งานคุณสมบัตินี้ เพียงค้นหาคุณสมบัติ "white-space:nowrap;" ที่ตัวเลือก #menu1 ul li ul แล้วลบออกเพิ่มแถบ (ตัวคั่น) ระหว่างรายการเมนู ฉันจะไม่ทำซ้ำตัวเลือกที่ใช้::before หรือ::after หรือง่ายกว่ามากคือ border-left, border-right

มีบางสถานการณ์ที่เค้าโครงถูกสร้างขึ้นอย่างน่าอัศจรรย์จนคุณไม่สามารถทำได้หากไม่มี jquery

รหัส HTML ของเรายังคงเหมือนเดิม เราแค่รวมไลบรารี jQuery และไฟล์ที่ใช้มันในตอนเริ่มต้น:

ทันทีหลังจากนั้น

ตามที่คุณเข้าใจคุณจะต้องสร้างไฟล์ สคริปต์เมนู-3.jsและเพิ่มโค้ดเล็กๆ น้อยๆ นี้ลงไป:

$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

สไตล์ CSS สำหรับเมนูดังกล่าวควรคงไว้เหมือนเดิม + เพิ่มส่วนนี้ที่ส่วนท้าย:

#menu1 ul li.razd( height:28px; width:1px; พื้นหลัง:#ffffff; ระยะขอบด้านบน:4px; )

เมนูแบบเลื่อนลงแนวนอนพร้อมตัวคั่นใน jQuery จะมีลักษณะดังนี้:


คุณสามารถดูในโหมดสาธิตหรือดาวน์โหลดเทมเพลตเมนูแนวนอนด้านล่าง:

ข้อดีของโซลูชันนี้คือ:

• เมนูจะถูกวาดแบบไดนามิก
• การเยื้องจากตัวคั่นไปยังย่อหน้าจะเหมือนกันทุกที่
• การออกแบบที่สวยงามและยืดหยุ่นยิ่งขึ้น
เมนูแบบเลื่อนลงหลายระดับแนวนอน CSS+HTML

เนื่องจากเรากำลังพูดถึงเมนูแบบเลื่อนลงหลายระดับเมื่อโฮเวอร์ มันอาจจะคุ้มค่าที่จะแบ่งออกเป็นกลุ่มย่อย:

• มีแผ่นวีไอพีเมื่อชี้ไปด้านข้าง
• พร้อมป๊อปอัปแบบเลื่อนลงของระดับที่สาม

ในตัวอย่างของฉัน ฉันจะแสดงเมนู CSS หลายระดับที่มี 3 ระดับ จากนั้นฉันคิดว่าการเดาว่าต้องทำอะไรคงไม่ยาก

เมนูแบบเลื่อนลงหลายระดับพร้อมแถบด้านข้างเมื่อวางเมาส์เหนือ

ก่อนอื่น เราต้องแก้ไข HTML ของเราเล็กน้อย จะมีการเพิ่มสองสามบรรทัดสำหรับระดับ 3:

• บ้าน
• เกี่ยวกับเรา
• บริการของเรา
  • บริการของเราหมายเลข 1
    • นอกเหนือจากการบริการ1
    • นอกเหนือจากการบริการ2
  • บริการของเราหมายเลข 2
    • นอกเหนือจากการบริการ 3
    • นอกเหนือจากบริการ 4
  • บริการของเราหมายเลข 3
  • บริการของเราหมายเลข 4
  • บริการ 5
• ข่าว
• รายชื่อผู้ติดต่อ
  • แผนที่เส้นทาง
    • ส่วนเสริมแผนที่
    • เพิ่มเติมสำหรับแผนที่ 2
  • แบบฟอร์มตอบรับ

#container( width:1000px; height:auto; Margin:0px auto; padding-top:10px; ) #menu1( ตำแหน่ง:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ระยะขอบ:0px; การขยาย:0px; ความกว้าง:100%; ความสูง:อัตโนมัติ; รายการสไตล์:none; พื้นหลัง:#F3A601; ) #menu1 > ul( การจัดแนวข้อความ: จัดชิดขอบ; ขนาดตัวอักษร:1px; line-height:1px; ) #menu1 > ul:after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( ตำแหน่ง :relative; display:inline-block; height:auto; text-align:left; margin-top:4px; -family:Arial, sans-serif; color:#ffffef; line-height:1.3 em; text-transform:uppercase; ( พื้นหลัง:#EBBD5B;

สี:#2B45E0;

) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*รายการสุดท้ายจะถูกแนบไว้ที่ขอบด้านขวา*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*บรรทัดนี้ใช้กลไกการเลื่อนออก* / #menu1 ul li ul li( จอแสดงผล:บล็อก; ความกว้าง:อัตโนมัติ; ) #menu1 ul li ul li a( จอแสดงผล:บล็อก; การแปลงข้อความ:none; ความสูง:อัตโนมัติ; การขยาย:7px 45px; ความกว้าง:100%; กล่อง -ขนาด:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( พื้นหลัง:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; พื้นหลัง:#fddc96; ) #menu1 > ul > li:last-child > ul ul(left:auto; right:100%;) #menu1 ul li ul li ul a(color:#F38A01;)
เราคัดลอกไฟล์สำหรับ jQuery เหมือนที่มาจากตัวอย่างก่อนหน้านี้ ฉันตัดสินใจออกจากวงเวียนเพื่อให้เมนูดูดีขึ้นนิดหน่อย แน่นอนคุณสามารถทำได้โดยไม่มีพวกเขา

นี่คือสิ่งที่เกิดขึ้น:

ฉันสร้าง 2 สกินในอันเดียวเพื่อแสดงให้เห็นว่าหยดนั้นดูเป็นอย่างไรทางด้านขวาและตรงกลาง

ด้านล่างนี้คุณสามารถดูการสาธิตและดาวน์โหลดตัวอย่าง:

เมนูแบบเลื่อนลงหลายระดับพร้อมแผ่นป๊อปอัปเมื่อโฮเวอร์

ฉันจะไม่เปลี่ยนโค้ด HTML สามารถนำมาจากตัวอย่างก่อนหน้าได้ เรายังทิ้งตัวคั่นไว้ใน jQuery

เฉพาะ CSS เท่านั้นที่จะเปลี่ยนแปลงโดยสิ้นเชิง:

#container( width:1000px; height:auto; Margin:0px auto; padding-top:10px; ) #menu1( ตำแหน่ง:relative; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ระยะขอบ:0px; การขยาย:0px; ความกว้าง:100%; ความสูง:อัตโนมัติ; รายการสไตล์:none; พื้นหลัง:#F3A601; ) #menu1 > ul( การจัดแนวข้อความ: จัดชิดขอบ; ขนาดตัวอักษร:1px; line-height:1px; ) #menu1 > ul:after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( ตำแหน่ง :relative; display:inline-block; width:auto; -top:4px; ) #menu1 ul li a( จอแสดงผล:block; padding:9px 45px 0px 45px; ตระกูลแบบอักษร:Arial, sans-serif; สี:#ffffef; การตกแต่งข้อความ:none; การแปลงข้อความ:ตัวพิมพ์ใหญ่; ขนาดกล่อง: border-box; a:hover, #menu1 ul li:hover > a( พื้นหลัง:#EBBD5B;

สี:#2B45E0;

) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; พื้นหลัง:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" " ) #menu1 ul li:hover > ul(display:block;)/*บรรทัดนี้ใช้กลไกการเลื่อนออก*/ #menu1 ul li li( จอแสดงผล :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing: เส้นขอบ -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( พื้นหลัง:#FDDC96 ; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; พื้นหลัง:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(จอแสดงผล : block; float:none; width:100%;) #menu1 ul li ul li ul a( สี:#F38A01; border-top:1px solid #ffffff; )

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

นั่นคือทั้งหมดสำหรับฉัน ฉันหวังว่าตัวอย่างของฉันอย่างน้อยหนึ่งตัวอย่างจะเหมาะกับคุณ ขอบคุณสำหรับความสนใจของคุณ

มันจะเป็นประโยชน์ต่อทั้งพวกเขาและฉัน :)

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

นอกจากนี้ฉันขอแนะนำให้คุณไปที่หน้าหลัก https://site/vypadayushhee-menu/ ตัวอย่างและประเภทของเมนูแบบเลื่อนลงทั้งหมดจะถูกรวบรวมไว้ที่นั่น

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

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

จะปฏิบัติสิ่งนี้ได้อย่างไร?

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

โซลูชั่นของเรา

ข้อเสนอของเราจะสร้างขึ้นบนรากฐานที่มั่นคงของความรู้ HTML5 และ CSS3

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

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

ด้านล่างนี้เป็นโค้ดที่ใช้เป็นตัวอย่างในการสร้างเมนูยาง:

HTML


< ul> < li>< a href= "#" >บ้าน< li>< a href= "#" >บล็อก< li>< a href= "#" >ข่าว< li>< a href= "#" >เป็นที่นิยม< li>< a href= "#" >สินค้าใหม่

ul ( text- align: justify; overflow: Hidden; /* กำจัดผลข้างเคียงของวิธีการ */ height: 20px; /* ยังกำจัดสิ่งที่ไม่จำเป็นออกไป */ cursor: default ; /* กำหนดรูปร่างเริ่มต้นของเคอร์เซอร์ */ ระยะขอบ : 50px 100px 0 100px; พื้นหลัง: #eee; padding: 5px; ) li ( display: inline; /* ทำให้รายการเมนูข้อความ */ ) li a ( display: inline- block; /* กำจัดการแบ่งคำในเมนู */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* สร้างบรรทัดที่สองเพื่อหาวิธี */ content: "1" ; margin- left: 100 %; height: 1px; ล้น: ซ่อน; จอแสดงผล: อินไลน์บล็อก;

หากต้องการทำงานใน Internet Explorer รุ่นเก่า คุณต้องเพิ่มโค้ดต่อไปนี้ใน CSS เพิ่มเติม

ul ( ดัชนี z: expression(runtimeStyle.zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( ขอบซ้าย: 100%; ) * html ul ( /* need ie6 only */ height: 30px; )

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



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

6.0+	6.0+	10.5+	5.0+	3.6+	-	-