งาน

สร้างเมนูแนวนอนซึ่งรายการมีความชันโดยพลการ (รูปที่ 1)

ข้าว. 1. มุมมองเมนูที่มีรายการเอียง

สารละลาย

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

เบราว์เซอร์สนับสนุนคุณสมบัติการแปลงส่วนใหญ่ด้วยคำนำหน้าของตัวเอง ดังนั้นเพื่อความอเนกประสงค์ในรูปแบบ คุณควรทำซ้ำหลายครั้งด้วยค่าเดียวกัน โดยเพิ่ม -moz- สำหรับ Firefox, -webkit- สำหรับ Safari และ Chrome, -o- สำหรับ Opera และ -ms - สำหรับเบราว์เซอร์ Internet Explorer ดังตัวอย่างที่ 1

ตัวอย่างที่ 1: การเอียงรายการเมนู

HTML5 CSS3 IE Cr Op Sa Fx

เมนู li ( display: inline-block; /* องค์ประกอบแบบอินไลน์บล็อก */ พื้นหลัง: #CA181A; /* สีพื้นหลัง */ ระยะขอบขวา: 3px; /* ระยะห่างระหว่างรายการเมนู */ -webkit-transform: skewX(- 30deg); /* สำหรับ Safari และ Chrome */ -moz-transform: skewX(-30deg); /* สำหรับ Firefox */ -o-transform: skewX(-30deg); /* สำหรับ Opera */ -ms-transform: skewX(-30deg); /* สำหรับ IE */ แปลง: skewX(-30deg); /* CSS3 */ ) a ( color: #fff; /* Link color */ display: block; /* Block element */ padding : 5px 15px; /* ขอบข้อความ */ การตกแต่งข้อความ: ไม่มี; /* ลบการขีดเส้นใต้ */ -webkit-transform: skewX(30deg); /* สำหรับ Safari และ Chrome */ -moz-transform: skewX(30deg) ; /* สำหรับ Firefox */ -o-transform: skewX(30deg); /* สำหรับ Opera */ -ms-transform: skewX(30deg); /* สำหรับ IE */ การแปลง: skewX(30deg); โฮเวอร์ ( พื้นหลัง: #333; /* สีพื้นหลังเมื่อโฮเวอร์ */ )

• โจ๊ก
• ปาซูซู
• พัลพาทีน
• หมอดูม

ในตัวอย่างนี้ เมนูแนวนอนจะถูกสร้างขึ้นโดยใช้รายการสัญลักษณ์แสดงหัวข้อย่อย เพื่อให้แน่ใจว่ารายการอยู่ในแนวนอน คุณสมบัติการแสดงผลที่มีค่า inline-block จะถูกเพิ่มให้กับองค์ประกอบ li ในรูปแบบ สำหรับการเอียง ให้ใช้คุณสมบัติการแปลงพร้อมกับฟังก์ชัน skewX และค่า -30° คุณสมบัตินี้ยังใช้กับลิงก์ภายในรายการด้วย แต่ด้วยค่าบวก 30° ช่วยให้มั่นใจได้ว่าตัวอักษรจะแสดงอย่างถูกต้องแทนที่จะเอียง

เบราว์เซอร์ Chrome, Safari และ Firefox ใช้คุณสมบัติการแปลงสำหรับองค์ประกอบบล็อกหรืออินไลน์ ดังนั้นลิงก์จึงตั้งค่าคุณสมบัติการแสดงผลเป็นบล็อก

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

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

เมนูเค้าโครง HTML + CSS

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

เรามีอะไร? รายการที่ไม่มีหมายเลขธรรมดาที่สุดซึ่งมีตัวระบุ "top_menu" และมีลิงก์รวมอยู่ในองค์ประกอบของรายการนี้ ทุกอย่างซ้ำซากและเรียบง่าย รายการเมนูเปลี่ยนสีเมื่อเลื่อนเมาส์ไปเหนือ...ทุกท่านทราบและเข้าใจวิธีทำแล้ว (หวังว่านะ)

การเพิ่มเมนูระดับที่สอง

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

เราวางตำแหน่งรายการที่ซ้อนกันโดยสัมพันธ์กับ "li" ที่มีการซ้อนกันอย่างแน่นอน และเราวางตำแหน่ง "li" ทั้งหมดของระดับบนสุดโดยสัมพันธ์กับ ( ญาติ- เพื่อให้เมนูแบบเลื่อนลงตั้งอยู่ทันทีหลังจากเมนูระดับบนสุดของเรา (เมนูแบบเลื่อนลง - “ ภายใน_เมนู"จะต้องระบุ

ตำแหน่ง: แน่นอน; ด้านบน: 100%;

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

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

อย่างที่คุณเห็น เมนูแบบเลื่อนลงของเรายังไม่ปรากฏเป็นแบบเลื่อนลง แต่หลุดและหยุดทำงาน แต่ไม่เป็นไร เราจะแก้ไขปัญหานั้นเร็วๆ นี้

วิธีสร้างเมนูแบบเลื่อนลงแบบเลื่อนลงจริงๆ

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

เพิ่มลงในเมนูแบบเลื่อนลง:

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

และเพื่อแสดงคุณต้องเขียน:

#top_menu > li:hover > ul ( จอแสดงผล: บล็อก; )

ตัวเลือกทั้งหมดนี้บอกอะไรเราบ้าง? เราอ่านตั้งแต่ตอนจบ เราตั้งค่าสไตล์ (การมองเห็น) สำหรับรายการระดับที่สองซึ่งอยู่ภายในองค์ประกอบรายการระดับแรก แต่สไตล์เหล่านี้จะใช้งานได้ก็ต่อเมื่อเราวางเมาส์เหนือองค์ประกอบ “li" ซึ่งมีรายการระดับที่สองของเรา

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

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

เอาล่ะ เรามาเพิ่มเวทย์มนตร์ให้เขากันดีกว่า

เมนูแบบเลื่อนลงที่ราบรื่นทำได้ง่าย

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

โปรดจำไว้ว่า คุณสามารถเคลื่อนไหวได้เฉพาะค่าทางคณิตศาสตร์ที่แน่นอนเท่านั้น เช่น 50px และ 300px, 0 และ 100%, 0.5 และ 1.0 และอื่นๆ ในกรณีของเรา เราจะไม่สามารถทำให้สองสถานะของเมนูแบบเลื่อนลงของเราเคลื่อนไหวได้ ( จอแสดงผล:ไม่มี;และ จอแสดงผล:บล็อก;).

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

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

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

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

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

บทสรุป:

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

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

ขอบคุณสำหรับความสนใจของคุณ แล้วพบกันใหม่!

คุณอ่านจนจบหรือเปล่า?

บทความนี้มีประโยชน์หรือไม่?

ไม่เชิง

คุณไม่ชอบอะไรกันแน่? บทความไม่สมบูรณ์หรือเป็นเท็จ?
เขียนความคิดเห็นและเราสัญญาว่าจะปรับปรุง!

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

บทช่วยสอนเมนูแบบเลื่อนลง CSS3 แรกเป็นบทช่วยสอนใหม่ล่าสุดในคอลเลกชัน (ตั้งแต่เดือนเมษายน 2559) ข้อดีของการแก้ปัญหา: ในเมนูแบบเลื่อนลงแนวนอนสำหรับไซต์นี้ รายการย่อยจะมีไอคอน การใช้งานและโค้ด CSS นั้นค่อนข้างง่ายต่อการเข้าใจและนำไปใช้

ขั้นตอนที่ 1 - มาร์กอัป HTML

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

แดชบอร์ดของฉัน ชอบ จำนวนการดู เอกสาร ข้อความ ออกจากระบบ การอัปโหลด วิดีโอ เอกสาร

• แดชบอร์ดของฉัน
• ชอบ
• จำนวนการดู
  • เอกสาร
  • ข้อความ
  • ออกจากระบบ
• การอัปโหลด
• วิดีโอ
• เอกสาร

ขั้นตอนที่ 2 - แสดงเมนู

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

.menu, .menu ul, .menu li, .menu a ( ระยะขอบ : 0 ; การขยาย : 0 ; เส้นขอบ : none ; โครงร่าง : none ; ) .menu ( ความสูง : 40px ; ความกว้าง : 505px ; พื้นหลัง : #4c4e5a ; พื้นหลัง : -webkit-linear-gradient(บนสุด , #4c4e5a 0% , #2c2d33 100% ) ; (บนสุด , #4c4e5a 0% ) #2c2d33 100% ) ; พื้นหลัง : -ms-linear-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; รัศมีเส้นขอบ: 5px ; -moz-border-radius: 5px ; .menu li ( ตำแหน่ง : สัมพันธ์ ; รายการสไตล์ : ไม่มี ; ลอย : ซ้าย ; จอแสดงผล : บล็อก ; ความสูง : 40px ;

เมนู, .menu ul, .menu li, .menu a ( ระยะขอบ: 0; การขยาย: 0; เส้นขอบ: ไม่มี; โครงร่าง: ไม่มี; ) .menu ( ความสูง: 40px; ความกว้าง: 505px; พื้นหลัง: #4c4e5a; พื้นหลัง: - webkit-linear-gradient(บนสุด, #4c4e5a 0%,#2c2d33 100%); พื้นหลัง: -moz-linear-gradient(บนสุด, #4c4e5a 0%,#2c2d33 100%); บนสุด, #4c4e5a 0%,#2c2d33 100%); พื้นหลัง: -ms-linear-gradient(บนสุด, #4c4e5a 0%,#2c2d33 100%); รัศมี: 5px; -moz-border-radius: 5px; .menu li (ตำแหน่ง: สัมพันธ์; รูปแบบรายการ: ไม่มี; ลอย: ซ้าย; จอแสดงผล: บล็อก; ความสูง: 40px )

ขั้นตอนที่ 3 - การออกแบบลิงค์

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

.menu li a ( display : block ; padding : 0 14px ; margin : 6px 0 ; line-height : 28px ; text- ตกแต่ง : none ; border-left : 1px solid #393942 ; border-right : 1px solid #4f5058 ; font -family: Helvetica, sans-serif; แบบอักษร-น้ำหนัก: สี: #f3f3f3; moz-transition: color .2s ความง่ายในการออก; -o-transition: color .2s ความง่ายในการออก; ( border-left : none ; ) .menu li: Last-child a( border-right : none ; ) .menu li : hover > a ( color : #8fde62 ; )

เมนู li a ( จอแสดงผล: บล็อก; ช่องว่างภายใน: 0 14px; ระยะขอบ: 6px 0; ความสูงบรรทัด: 28px; การตกแต่งข้อความ: ไม่มี; เส้นขอบซ้าย: 1px ทึบ #393942; เส้นขอบขวา: 1px ทึบ #4f5058; แบบอักษร- ครอบครัว: Helvetica, sans-serif; font-weight: ตัวหนา; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -การเปลี่ยนแปลง: สี .2s ความง่ายในการออก; -o-การเปลี่ยนแปลง: สี .2s ความง่ายในการออก; -ซ้าย: ไม่มี; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( color: #8fde62; )

ขั้นตอนที่ 4 - เมนูย่อย

เนื่องจากเรามีเมนูไซต์แบบเลื่อนลงโดยใช้ CSS เราจึงควรตั้งค่าการออกแบบสำหรับรายการที่ซ้อนกันด้วย ขั้นแรก ตั้งค่าระยะขอบไว้ที่ 40px ที่ด้านบนและ 0px ทางซ้าย + เพิ่มมุมโค้งมน หากต้องการแสดง/ซ่อนเมนูย่อย ให้ตั้งค่าคุณสมบัติความทึบเป็นศูนย์ก่อน และเมื่อเลื่อนเมาส์ไปที่หนึ่ง หากต้องการสร้างเอฟเฟกต์ของเมนูย่อยที่ปรากฏขึ้น ให้ตั้งค่าความสูงของรายการเป็นศูนย์ และเลื่อนเมาส์ไปที่ = 36px

.menu ul ( ตำแหน่ง : แน่นอน ; บน : 40px ; ซ้าย : 0 ; ความทึบ : 0 ; พื้นหลัง : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; เส้นขอบ -radius : 0 0 5px 5px ; -webkit-transition: ความทึบ .25s ความง่าย .1s ; การเปลี่ยนแปลง : ความทึบ .25s ง่าย .1s ; ) .menu li: โฮเวอร์ > ul ( ความทึบ : 1 ; ) .menu ul li ( ความสูง : 0 ; ล้น : ซ่อน ; padding : 0 ; -webkit-transition : ความสูง .25s ความง่าย 1s ; -moz-transition: ความสูง .25s ง่าย .1s ; -ms-transition: ความสูง .25s ง่าย .1s ; .menu li: โฮเวอร์ > ul li ( ความสูง : 36px ; ล้น : มองเห็นได้ ; ; )

เมนู ul ( ตำแหน่ง: สัมบูรณ์; บน: 40px; ซ้าย: 0; ความทึบ: 0; พื้นหลัง: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- รัศมี: 0 0 5px 5px; -webkit-transition: ความทึบ .25s ความง่าย .1s; โฮเวอร์ > ul (ความทึบ: 1; ) .menu ul li (ความสูง: 0; ล้น: ซ่อนอยู่; ช่องว่างภายใน: 0; -webkit-transition: ความสูง .25s ความง่าย .1s; -moz-transition: ความสูง .25s ความง่าย .1s; -ms-transition: ความสูง .25s ง่าย .1s; ) .menu li:hover > ul li ( ความสูง: 36px; ล้น: มองเห็นได้; การขยาย: 0; )

เราตั้งค่าความกว้างของลิงก์ = 100px โดยมีการเพิ่มเส้นขอบด้านล่างที่ด้านล่างขององค์ประกอบทั้งหมดยกเว้นองค์ประกอบสุดท้าย นอกจากนี้หากคุณต้องการคุณสามารถวางรูปภาพสำหรับรายการเมนูย่อยได้ (โปรดทราบ! อย่าลืมเปลี่ยนเส้นทางไปยังรูปภาพในโค้ดเป็นเส้นทางที่คุณใช้)

.menu ul li a ( width : 100px ; padding : 4px 0 4px 40px ; margin : 0 ; border : none ; border-bottom : 1px solid #353539 ; ) .menu ul li : Last-child a ( border : none ; ) .menu a.documents ( พื้นหลัง : url (../img/docs.png ) ไม่ทำซ้ำ 6px center ; ) .menu a.messages ( พื้นหลัง : url (../img/bubble.png ) ไม่ทำซ้ำ 6px center ; ) .menu a.signout ( พื้นหลัง : url (../img/arrow.png ) ไม่ทำซ้ำ 6px center ; )

เมนู ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539; ) .menu ul li:last-child a ( border: none; ) เมนู a.documents ( พื้นหลัง: url(../img/docs.png) ไม่ทำซ้ำ 6px center; ) .menu a.messages ( พื้นหลัง: url(../img/bubble.png) ไม่ทำซ้ำ 6px center; ) .menu a.signout ( พื้นหลัง: url(../img/arrow.png) ไม่ทำซ้ำ 6px center; )

โดยส่วนตัวแล้วฉันชอบความง่ายในการใช้งานและการใช้ไอคอน นี่คือรหัสสุดท้ายจาก codepen:

ตัวเลือกของ Josh Riser มีลักษณะคล้ายกับเมนูแบบเลื่อนลง HTML และ CSS ก่อนหน้า โค้ดไม่มีตัวเลือกลูก ">" (มีประโยชน์ในการออกแบบหลายระดับ) แต่ผู้เขียนใช้เอฟเฟกต์ CSS3 อย่างดี (การเปลี่ยนผ่าน, เงาของกล่อง และเงาข้อความ) เพื่อให้ได้ผลลัพธ์ที่สวยงามยิ่งขึ้น ลิงก์ในแหล่งที่มาไม่ได้อธิบายกระบวนการสร้างเมนูแบบเลื่อนลงแนวนอน ดังนั้นฉันจะให้โค้ดสุดท้ายทันที:

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

รหัส HTML

สำหรับการนำทาง เช่นเคย จะใช้รายการแบบไม่เรียงลำดับ (ที่มีคลาส nav) รายการเมนูปกติคือรายการ (li) และมีลิงก์ (a href) โดยไม่มีคลาสหรือ ID ใดๆ ข้อยกเว้นคือองค์ประกอบพิเศษ 3 รายการของเมนูแบบเลื่อนลงแนวนอนนี้ซึ่งมีรหัสต่อไปนี้:

• การตั้งค่า — ลิงค์รูปภาพ;
• ค้นหา - บล็อกที่มีการค้นหาและปุ่มที่เกี่ยวข้อง
• options - มีเมนูย่อย (ใช้งานผ่านรายการที่มีคลาส subnav)

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

แอปพลิเคชัน กระดาน ตัวเลือก การตั้งค่า แอปพลิเคชัน กระดาน ตัวเลือก

• 
• แอปพลิเคชัน
• กระดาน
• ตัวเลือก
  • การตั้งค่า
  • แอปพลิเคชัน
  • กระดาน
  • ตัวเลือก

เมนู CSS

1. รูปแบบพื้นฐานและองค์ประกอบเมนู

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

@import URL (http: //fonts.googleapis.com/css?family= มอนต์เซอร์รัต) ;

@ นำเข้า URL (http://fonts.googleapis.com/css?family=Montserrat); * ( ระยะขอบ: 0; ช่องว่างภายใน: 0; ) .nav ( พื้นหลัง: #232323; ความสูง: 60px; จอแสดงผล: บล็อกอินไลน์; ) .nav li ( float: left; list-style-type: none; ตำแหน่ง: สัมพันธ์; )

2. การจัดรูปแบบลิงก์

รายการเมนูใช้การออกแบบพื้นฐาน + . ความสูงจะเหมือนกับในคลาส nav สำหรับ #settings ลิงก์รูปภาพที่จุดเริ่มต้นของเมนู การจัดตำแหน่งจะถูกตั้งค่าไว้

.nav li a ( font-size : 16px ; สี : white ; display : block ; line-height : 60px ; padding : 0 26px ; ตกแต่งข้อความ : none ; border-left : 1px solid #2e2e2e ; font-family : Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; .nav li a: hover ( สีพื้นหลัง : #2e2e2e ; ) #settings a ( padding : 18px ; height : 24px ; ขนาดตัวอักษร: 10px ; ความสูงบรรทัด: 24px ;

Nav li a ( ขนาดตัวอักษร: 16px; สี: ขาว; จอแสดงผล: บล็อก; ความสูงบรรทัด: 60px; การขยาย: 0 26px; การตกแต่งข้อความ: ไม่มี; เส้นขอบซ้าย: 1px solid #2e2e2e; ตระกูลแบบอักษร: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); .nav li a:hover ( สีพื้นหลัง: #2e2e2e; ) #settings ( ช่องว่างภายใน: 18px; ความสูง: 24px; แบบอักษร -ขนาด: 10px; ความสูงบรรทัด: 24px)

3. บล็อกการค้นหา

องค์ประกอบนี้มีความกว้างคงที่และประกอบด้วยหลายส่วน - ช่องป้อนข้อมูล (#search_text) ที่มีพื้นหลังสีเขียวและปุ่มค้นหา (#search_button) ในบางเบราว์เซอร์ สีพื้นหลังอาจเป็นสีเทา

#search ( ความกว้าง : 357px ; ระยะขอบ : 4px ; ) #search_text ( ความกว้าง : 297px ; การขยาย : 15px 0 15px 20px ; ขนาดตัวอักษร : 16px ; ตระกูลแบบอักษร : มอนต์เซอร์รัต, sans-serif ; เส้นขอบ : 0 ไม่มี ; ความสูง : 52px ; ระยะขอบขวา : 0 ; สี : สีขาว ; พื้นหลัง : #1f7f5c ; float : border-box ; ) : -moz- ตัวยึด ( /* Mozilla Firefox 4 ถึง 18 */ color : white ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color : white ; ) #search_text : focus ( background : rgb (64 , 151 , 119 ) ; ) #search_button ( border : 0 none ; background : #1f7f5c url (search.png ) center no-repeat ; float : left ; การจัดแนวข้อความ : กึ่งกลาง ; เคอร์เซอร์ : ตัวชี้ ;

#search ( width: 357px; margin: 4px; ) #search_text( width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; ความสูง: 52px ; ขอบขวา: 0; โครงร่าง: ไม่มี; ลอย: ซ้าย; ::-webkit-input-placeholder ( /* เบราว์เซอร์ WebKit */ สี: ขาว; ) :-moz-placeholder ( /* Mozilla Firefox 4 ถึง 18 */ สี: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white ; ) #search_text:focus ( พื้นหลัง: rgb(64, 151, 119); ) #search_button ( เส้นขอบ: 0 none; พื้นหลัง: #1f7f5c url (search.png) ไม่ทำซ้ำตรงกลาง; float: left; text-align: 52px;

4. เมนูย่อยแบบเลื่อนลง

ขั้นตอนสุดท้ายจะทำให้เราสามารถสร้างเมนูแบบเลื่อนลงใน CSS ซึ่งจะเริ่มทำงานสำหรับ #options รายการสุดท้าย

#options a( border-left : 0 none ; ) #options > a ( background-image : url (triangle.png ) ; background-position : 85% center ; background-repeat : no-repeat ; padding-right : 42px ; ) .subnav ( การมองเห็น : ซ่อนเร้น ; ตำแหน่ง : สัมบูรณ์ ; บน : 110% ; ขวา : 0 ; ความกว้าง : 200px ; ความสูง : อัตโนมัติ ; ความทึบ : 0 ; การเปลี่ยนแปลง : ทั้งหมด 0.1s ; พื้นหลัง : #232323 ; ) .subnav li ( ลอย : ไม่มี ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav ( การมองเห็น : มองเห็นได้ ; ด้านบน : 100% ; ความทึบ : 1 ; )

#options a( border-left: 0 none; ) #options>a ( background-image: url(triangle.png); ตำแหน่งพื้นหลัง: ตรงกลาง 85%; พื้นหลังซ้ำ: ไม่ซ้ำ; padding-ขวา: 42px; ) .subnav ( การมองเห็น: ซ่อน; ตำแหน่ง: สัมบูรณ์; ด้านบน: 110%; ขวา: 0; ความกว้าง: 200px; ความสูง: อัตโนมัติ; ความทึบ: 0; การเปลี่ยนแปลง: ทั้งหมด 0.1s; พื้นหลัง: #232323; ) .subnav li ( ลอย : ไม่มี; ) .subnav li a ( ขอบล่าง: 1px solid #2e2e2e; ) #options:hover .subnav ( การมองเห็น: มองเห็นได้; ด้านบน: 100%; ความทึบ: 1; )

ในรูปแบบต่างๆ คุณจะพบการแทรกภาพพื้นหลังรูปสามเหลี่ยม (triangle.png) เพื่อระบุเมนูย่อย - อย่าลืมระบุเส้นทางที่ถูกต้องสำหรับภาพนี้และภาพอื่นๆ ในตัวอย่าง ลักษณะที่ปรากฏของเมนูย่อยถูกนำมาใช้โดยใช้คุณสมบัติความทึบ วิธีแก้ปัญหาสุดท้ายเกี่ยวกับ codepen:

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

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

ทั้งหมด

ด้านบนเราดู 4 ตัวเลือกสำหรับวิธีสร้างเมนูแบบเลื่อนลงโดยใช้ CSS + HTML แม้ว่าจะมีตัวอย่างที่คล้ายกันอีกมากมายบนอินเทอร์เน็ต มีวิธีแก้ไขปัญหาสำหรับ jQuery แต่น่าจะมีประโยชน์มากสำหรับการใช้งานเอฟเฟกต์พิเศษและงานที่ไม่ได้มาตรฐานเท่านั้น ในกรณีส่วนใหญ่การรวมกันของ CSS + HTML ก็เพียงพอแล้ว โดยเฉพาะอย่างยิ่งเนื่องจากตอนนี้ข้อกำหนดหลักสำหรับเมนูคือความสะดวกและความเร็วในการโหลดที่รวดเร็ว

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

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

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

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

มาเริ่มวางเค้าโครงเมนูแนวนอนกันเถอะ!

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

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

แล้วเราจะได้อะไรในขั้นตอนนี้? เรามีหน้า html พร้อมมาร์กอัปมาตรฐาน:

เมนูแนวนอน

และเรามีไฟล์สไตล์ที่เชื่อมต่อกับหน้านี้ (สำหรับฉันคือ style.css) โดยมีเนื้อหาดังต่อไปนี้:

ขั้นตอนต่อไปคือการสร้างมาร์กอัป html สำหรับเมนูของเรา

การสร้างมาร์กอัปสำหรับเมนู

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

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

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

กลับไปที่มาร์กอัปของเราโดยตรง ต่อไป เราต้องแทรกรายการหัวข้อย่อยลงในแท็กของเรา ซึ่งสำหรับฉันแล้วจะมีหน้าตาดังนี้:

• บ้าน
• เกี่ยวกับเรา
• ผลงาน
• บล็อก
• รายชื่อผู้ติดต่อ

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

รูปแบบการเขียนสำหรับเมนูแนวนอนของเรา

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

Ul( รายการสไตล์:ไม่มี; )

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

ฉันไม่ชอบการที่เมนูของเราติดอยู่ที่ขอบเบราว์เซอร์ มาแก้ไขกัน:

ด้วยโค้ดนี้ เราตั้งค่าความกว้างของเมนู โดยกำหนดระยะขอบด้านบนและด้านล่างไว้ที่ 50px และวางไว้ตรงกลาง ใครจะรู้ ถ้าองค์ประกอบบล็อกมีความกว้าง ดังนั้นเพื่อวางตำแหน่งองค์ประกอบนี้ไว้ตรงกลางอย่างเคร่งครัด เราเพียงแค่ต้องให้ระยะขอบภายนอก (ระยะขอบ) ทางด้านขวาและซ้ายพร้อมกับค่า อัตโนมัติ

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

ลอย: ซ้าย

เมนู li( float:left; )

เมนูทั้งหมดของเราตอนนี้กลายเป็นแนวนอนแล้ว

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

เมนู li a( display:block;/* ทำให้ลิงก์เป็นองค์ประกอบบล็อก*/ padding:12px 20px;/* ตั้งค่าช่องว่างภายใน */ การตกแต่งข้อความ: none; /* ลบขีดเส้นใต้ */ color:#fff;/* ตั้งค่าลิงค์สีเป็นสีขาว */ background:#444;/* ทำให้สีพื้นหลังมืด */ font:14px Verdana, sans-serif;/* กำหนดขนาดตัวอักษรและชื่อ */ )

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

มาดูกันว่าเราได้อะไรบ้าง รีเฟรชหน้าเบราว์เซอร์ เท่านี้ก็เรียบร้อย!:

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

เริ่มจากตัวคั่นกันก่อน:

เมนู li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

เราทำอะไรที่นี่? ใช่ ทุกอย่างง่ายมาก เรากำหนดประเด็นของเราไว้ (

) เส้นขอบด้านซ้ายขนาด 1px และสี #666; สำหรับตัวเลือก .menu li:first-child ที่นี่เราใช้คลาสเทียมพิเศษที่ช่วยให้เราสามารถเลือกองค์ประกอบลูกแรกของรายการได้ ฉันขอแนะนำให้อ่านรายละเอียดเพิ่มเติมเกี่ยวกับคลาสหลอกบนอินเทอร์เน็ตคุณจะได้เรียนรู้สิ่งที่มีประโยชน์มากมาย

มาดูกันว่าเราได้อะไรอีกครั้ง:

ในความคิดของฉัน การใช้ตัวคั่นจะดีกว่ามาก

เมนู a:hover( พื้นหลัง:#888; )

อีกครั้งโดยใช้คลาสหลอกพิเศษ คราวนี้โฮเวอร์ เราตั้งค่าสีของลิงค์เมื่อโฮเวอร์เหนือมัน ดู:

ผมว่ามันเจ๋งนะ :) หวังว่าคงได้เมนูเดียวกับผมนะ

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

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

นี่คือโค้ด CSS ทันที:

* html ulli (
ลอย: ซ้าย;
}
* html ulli a (
ความสูง: 1%;
}
อูล (
ขอบล่าง: 1px ทึบ #000;
รายการสไตล์: ไม่มี;
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
ความกว้าง: 100px;
}
อุลลี (
ตำแหน่ง: ญาติ;
}
อุลลี (
จอแสดงผล: บล็อก;
เส้นขอบ: 1px ทึบ #000;
ขอบล่าง: 1px;
ช่องว่างภายใน: 5px;
การตกแต่งข้อความ: ไม่มี;
}
ลิ อุล (
จอแสดงผล: ไม่มี;
ซ้าย: 99px;
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
}
li:โฮเวอร์ ul (
จอแสดงผล: บล็อก;
}

สิ่งที่สำคัญที่สุดที่นี่คือตัวเลือก "li:hover ul" ที่จริงแล้วมันแสดงเนื้อหาของเมนู ตามค่าเริ่มต้น จะเป็น "display: none" และเมื่อคุณวางเมาส์เหนือรายการเมนู เมนูย่อยจะกลายเป็น: "display: block" ซึ่งก็คือ มองเห็นได้ นี่คือสิ่งที่สำคัญที่สุด นอกจากนี้ในตัวเลือกสองตัวแรก (ที่มี * ) จะมีการแฮ็ก CSS สำหรับ IE ไม่เช่นนั้นจะไม่มีอะไรทำงานในเบราว์เซอร์นี้หากไม่มี ทุกสิ่งทุกอย่างล้วนเป็นรูปลักษณ์ภายนอก ซึ่งแน่นอนว่าสามารถเปลี่ยนแปลงได้

นี่คือโค้ด HTML:

• 
  บ้าน


• 
  เมนูที่ 1
  
  
  
  • 
    เมนูย่อย 1
    
  
  
  • 
    เมนูย่อย 2
    
  
  
  • 
    เมนูย่อย 3
    
  
  
  
  


• 
  เมนูที่ 2
  
  
  
  • 
    เมนูย่อย4
    
  
  
  • 
    เมนูย่อย 5
    
  
  
  • 
    เมนูย่อย 6
    
  
  
  • 
    เมนูย่อย7
    
  
  
  • 
    เมนูย่อย 8
    
  
  
  
  

หากคุณคิดอย่างรอบคอบเกี่ยวกับโครงสร้างนี้ ทุกอย่างจะชัดเจนมาก แท็ก ul สร้างเมนู หาก ul อยู่ใน ul อื่น แสดงว่าเป็นเมนูย่อยอยู่แล้ว และแท็ก li มีหน้าที่รับผิดชอบรายการเมนูเฉพาะ

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