วิธียืดเมนูแนวนอนให้พอดีกับความกว้างของส่วนหัว เมนูแบบเลื่อนลงแนวนอนทำเองโดยใช้ CSS และ Html เมนูแบบเลื่อนลงแนวนอนแบบเต็มความกว้าง

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

เราขอเสนอตัวอย่างการนำเมนูยางพาราไปใช้เมื่อ ความช่วยเหลือเกี่ยวกับ 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; )

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

สวัสดีตอนบ่าย

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

วันนี้ฉันอยากจะแสดงวิธีการสร้างเมนูดังกล่าว

ดังนั้นเมนูของเราจะเป็นดังนี้:

มันถูกขยายจนเต็มความกว้างและโดดเด่นเมื่อวางเมาส์เหนือ เมนูจะโค้งมนด้านข้าง

มาร์กอัป HTML

บ้าน

ข่าวที่น่าสนใจ

อีกหนึ่งเมนู!

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

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

คลาสที่ใช้งานมีหน้าที่รับผิดชอบรายการเมนูที่เลือกและไฮไลต์

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

กฎ CSS

ขั้นแรก เรามากำหนดสไตล์สำหรับการแสดงเมนูทั่วไป:

Menu_container ( padding-top: 40px; ความกว้าง: 100%; ความสูง: 47px; ระยะห่างเส้นขอบ: 0px; ) .menu_container td ( แนวตั้ง: กลาง; /* การจัดตำแหน่งแนวตั้ง */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( ความกว้าง: 100%; ความสูง: 47px; เส้นขอบ: 1px solid #dadbda; ตำแหน่ง: สัมพันธ์; เส้นขอบซ้าย: ไม่มี); 150px; ช่องว่างภายใน: 4px; ) .td.inner_table_title ( ช่องว่างด้านบน: 4px; น้ำหนักแบบอักษร: ตัวหนา; ) .td.inner_table_img ( ความกว้าง: 40px!important; ) .inner_table_menu ( ความสูง: 100%; ช่องว่างภายใน: 0px ; แนวตั้ง: กลาง; เส้นขอบ: ไม่มี; การจัดตำแหน่งข้อความ: ซ้าย; ) .inner_table_title ( ช่องว่างภายใน: 10px; การขยายข้อความ: ตัวพิมพ์ใหญ่; ความสูงบรรทัด: 13px; ( width: 30px! สำคัญ; ความสูง: 30px! สำคัญ; ช่องว่างภายใน: 15px; )

เพื่อความสวยงาม เรามาปัดมุมด้านข้างของเมนูกัน:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; ขอบบนซ้ายรัศมี: 5px; ขอบล่างซ้ายรัศมี: 5px; ขอบขวา: 1px ทึบ #dadbda; .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border - รัศมีล่างขวา: 5px; -moz-border-topright: 5px;

ตอนนี้เมนูของเรามีรูปลักษณ์ที่สวยงามยิ่งขึ้น:

จนถึงจุดแรกยังไม่มีขอบด้านซ้าย เราจะแก้ไขในภายหลังเล็กน้อย

ตอนนี้เรามาเพิ่มเอฟเฟ็กต์โฮเวอร์สำหรับเมนูกัน

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( สีพื้นหลัง: #CAE285; ภาพพื้นหลัง: -moz-linear- การไล่ระดับสี(บนสุด, #CAE285, #9FCB56); -webkit-การไล่ระดับสี(เชิงเส้น, 0 0, 0 100%, จาก(#CAE285) ถึง(#9FCB56)); -gradient(บนสุด, #CAE285, #9FCB56); ภาพพื้นหลัง: -o-linear-gradient(top, #CAE285, #9FCB56); -สี: #aec671 #9fbb62 #87ac4a; ขอบซ้าย: ไม่มี; z-index: 5000; .first_point_menu:hover, .first_point_menu.active ( ขอบ: 1px solid #9FCB56; ขอบสี: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( เส้นขอบ: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover ( เส้นขอบ: 1px solid #9FCB56; border-left: none;

สีขอบ: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( เส้นขอบซ้าย: ไม่มี; )

ตอนนี้เมนูของเราดูดีขึ้นมาก แต่สำหรับตอนนี้เราไม่มีขอบเขตสำหรับรายการเมนูที่ไฮไลต์ มาแก้ไขปัญหานี้กัน!

/* รูปแบบสำหรับเส้นขอบด้านข้าง */ .borderLeftSecond, .borderRightSecond ( display: none; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 1px; ความสูง: 47px; สีพื้นหลัง: #9fbb62; top: 0px; z-index: 1000; ) /* ออฟเซ็ตสัมบูรณ์สำหรับเส้นขอบ */ .borderLeftSecond ( left: 0px; ) , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* จัดการกรณีของ first และรายการสุดท้าย */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

แค่นั้นแหละ!

สวัสดี ฉันไม่ได้เขียนโพสต์เกี่ยวกับงาน 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

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

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

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

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

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

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

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

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

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

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

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

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

#menu1( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ความกว้าง:100%; ความสูง:อัตโนมัติ; z-index: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;

ตัวอย่างนี้ยังแตกต่างจากตัวอย่างแรกตรงที่เมนูดรอปดาวน์หรือดรอปดาวน์นั้นเองจะขยายออกขึ้นอยู่กับความกว้างของรายการเมนูทั้งหมด สำหรับรายการเมนูที่ยาวมาก ตัวเลือกนี้อาจไม่สะดวกนักเนื่องจากจะเกินขีดจำกัด หากต้องการปิดใช้งานคุณสมบัตินี้ เพียงค้นหาคุณสมบัติ "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 หลายระดับที่มี 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 เหมือนที่มาจากตัวอย่างก่อนหน้า ฉันตัดสินใจออกจากวงเวียนเพื่อให้เมนูดูดีขึ้นนิดหน่อย แน่นอนคุณสามารถทำได้โดยไม่มีพวกเขา

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

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

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

ฉันจะไม่เปลี่ยนโค้ด 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; height:auto; text-align:left) #menu1 > ul > li(position:static;) #menu1 ul li.razd; -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( display : บล็อก; ความกว้าง:30%; ลอย:ซ้าย; ) #menu1 ul li ul li a( จอแสดงผล:บล็อก; การแปลงข้อความ:ไม่มี; ความสูง:อัตโนมัติ; การขยาย:7px 45px; ความกว้าง:100%; ขนาดกล่อง:ชายแดน - กล่อง; ) #menu1 ul li ul li:ลูกคนแรก > 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(จอแสดงผล: บล็อก ; float:none; width:100%;) #menu1 ul li ul li ul a( สี:#F38A01; border-top:1px solid #ffffff; )

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

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

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

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