สวัสดีตอนบ่าย!
มักจะมีความต้องการที่จะหารายได้ เมนูแนวนอนซึ่งจะขยายออกไปตลอดความกว้างของบล็อกของพ่อ ไม่ว่าจะมีกี่จุดก็ตาม
วันนี้ฉันอยากจะแสดงวิธีสร้างเมนูดังกล่าวด้วยตัวเอง
เมนูของเราจะมาเร็ว ๆ นี้:
ขยายให้เต็มความกว้าง และเมื่อวางเมาส์ไว้จะมองเห็นได้ เมนูจะโค้งมนด้านข้าง
HTML ROZMYTKA
|
|
...
|
เพื่อให้เมนูเต็มความกว้าง ฉันเลือกตารางที่มีความกว้าง 100% แต่ละโต๊ะก็มี กองคอนเทนเนอร์รายการเมนู นอกจากนี้ยังเป็นรายการเมนูแรก รายการสุดท้าย หรือรายการกลางอีกด้วย กอง- มีการจัดชั้นเรียนพิเศษ
ในชั้นผิวหนัง กองภาชนะที่มีขอบ 2 บาร์เรล ตำแหน่งที่แน่นอนซึ่งจำเป็นสำหรับภาพที่ถูกต้อง หากคุณใช้เส้นขอบมาตรฐาน เมื่อคุณเปลี่ยนรายการเมนู ข้อความจะกระโดด 1-2 พิกเซล ซึ่งไม่ดี
ระดับ คล่องแคล่วแสดงว่าคุณได้เลือกรายการเมนูแล้วจึงจะเห็น
ในแต่ละจุดจะมีรูปภาพและข้อความ ตรวจสอบให้แน่ใจว่าทุกอย่างจัดวางในแนวตั้งตรงกลางโต๊ะ เนื่องจากพลังของการจัดตำแหน่งในแนวตั้ง รายการเมนูของเราจึงจะปรากฏขึ้นเสมอและไม่ไป
กฎ CSS
จากนี้ไปเราจะกำหนดสไตล์สำหรับการแสดงเมนูอย่างเป็นทางการ:
Menu_container ( padding-top: 40px; width: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( Vertical-align: middle; /* Vertically aligned */ ) .last_point_menu, u width: 100%; ส่วนสูง: 47px; เส้นขอบ: 1px ทึบ #dadbda; ดัชนี z: 1,000; ตำแหน่ง: ญาติ; ขอบซ้าย: ไม่มี; -
( การขยาย: 0px; แนวตั้ง: กลาง; เส้นขอบ: ไม่มี; การจัดข้อความ: ซ้าย; ความกว้าง: 150px; การขยายด้านซ้าย: 4px; ) .td.inner_table_title ( การขยายด้านบน: 4px; น้ำหนักแบบอักษร: ตัวหนา; ) .td.inner_table_img ( width: 40px!important; ) .inner_table_menu ( height: 100%; padding: 0px; Vertical-align: middle; border: none; text-align: left; ) .inner_table_title ( pad1 padding-right: 10px ; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ความสูงบรรทัด: 13px; .inner_table_menu td.inner_table_img (ความกว้าง: 30px!important; ความสูง: 30px!important; padding-left: 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; - ล่างขวารัศมี: 5px; -moz-border-radius-topright: 5px; moz-border-radius-bottomright: 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, #9FCB56); พื้นหลัง -image: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); ภาพพื้นหลัง: -webkit-linear -gradient(top, #CAE285, #9FCB56); ภาพพื้นหลัง: -o-linear-gradient (ด้านบน, #CAE285, #9FCB56); ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปด้านล่าง, #CAE285, #9FCB56); เส้นขอบ: 1px solid #9FCB56; ; เส้นขอบซ้าย: ไม่มี; ดัชนี z: 5000; .first_point_menu:hover, .first_point_menu.active (เส้นขอบ: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid # dadbda; ( เส้นขอบ: 1px solid #9FCB56; border-l eft: none; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( border-left: none; )
ตอนนี้เมนูของเราดูน่าสนใจยิ่งขึ้นมาก แต่เรายังไม่มีขอบเขตสำหรับรายการเมนู เอาล่ะตรงนี้!
/* รูปแบบสำหรับเส้นขอบด้านข้าง */ .borderLeftSecond, .borderRightSecond ( display: none; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 1px; ความสูง: 47px; สีพื้นหลัง: #9fbb62; top: 0px; z-index: 1000; ) ค่าสัมบูรณ์ สำหรับเส้นขอบ */ .borderLeftSecond ( left: 0px; ) Last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( จอแสดงผล: บล็อก;
นั่นคือทั้งหมด!
เรามีเมนูที่ยอดเยี่ยมซึ่งทอดยาวไปทั่วบล็อกปิตุภูมิ! รายการแบบตัวต่อตัวจะไม่คลิกเมื่อเลื่อนเมาส์และเค้าโครงไม่เร็ว
เราดำเนินซีรีส์ต่อด้วยบทเรียนเกี่ยวกับเมนูที่ปรากฏ ในเมนูแนวนอนที่เลื่อนลงมาเป็น CSS ด้วยมือของคุณเอง
หากคุณเสียเวลาที่นี่หรือสงสัยเกี่ยวกับการนำเมนูไปใช้แบบอื่น Raja จะไปที่ส่วนของพ่อ
ส่วนนี้จะอธิบายเมนูแนวนอนที่มี CSS และ HTML
การนำทางหน้า:
และใช่, งานของเรา:
สร้างเมนูแนวนอนด้วยรายการ CSS (ในรายการ ul li) โดยไม่ต้อง เจคิวรีวิกิ Javascript นั้นรวมทั้งไม่มีตารางด้วย
ที่รหัส
เมนูแนวนอนที่เลื่อนลงมา
ก่อนที่เราจะเริ่มเขียนโค้ดเราต้องมีรายได้ก่อน เทมเพลต HTMLสำหรับเมนู
เนื่องจากเรามีเมนูสากล ฉันต้องการสร้างเมนูนี้ให้คล้ายกับเมนู WordPress มากที่สุด ในความคิดของฉัน นี่เป็นหนึ่งในโค้ดเมนู HTML ที่ง่ายที่สุดและเป็นสากลที่สุด ดูเหมือนว่านี้:
อย่างที่คุณเห็นจากโค้ด เมนูของเราที่ดรอปดาวน์จะถูกนำไปใช้กับรายการ ul และ li แกนมีลักษณะเช่นนี้สำหรับเมนูที่ไม่มีสไตล์ CSS:
เอาเป็นว่าดูประจบเหมือนรายการสุดท้าย ต่อไปเราต้องตกแต่งเมนูนี้ด้วยสไตล์ CSS เพิ่มเติม
เมนูแนวนอนที่ตรงกับ CSS
สไตล์ CSS สำหรับเมนูที่ดรอปดาวน์และไม่เพียงเท่านั้นยังจำเป็นอีกด้วย เมื่อใดก็ตามที่แท็บปรากฏขึ้น ให้ทำงานตามคลาสหลอก: โฮเวอร์
สำหรับเมนูแนวนอนที่เลื่อนลงมา เราจำเป็นต้องมีสไตล์ดังต่อไปนี้:
#menu1( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ความกว้าง:100%; ความสูง:อัตโนมัติ; ดัชนี z:10; ) #menu1 ul( ตำแหน่ง:ญาติ; จอแสดงผล:บล็อก; ระยะขอบ:0px; การขยาย:0px; ความกว้าง:100 %;height:auto;list-style:none;พื้นหลัง:#F3A601; menu1 ul li( ตำแหน่ง:relative; display:block; float:left; width:auto; height:auto; ) #menu1 ul li a( จอแสดงผล: บล็อก; การขยาย: 9px 25px 0px 25px; :36px;box-sizing:border-box; ) #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(display:block; text-transform:none; height:auto; 100% box-sizing:border-box;border-top) :1px ทึบ #ffffff ) #menu1 พื้นหลัง:#FDDC96; สี:#6572BC;
แกนตอนนี้เป็นหนวด กลไกของการปล่อยยอดขายในแถวเดียว
ดูสกินจากเมนูนี้:
ข้าว. 2 (เมนูแนวนอนที่เลื่อนลงมา)
ด้านล่างนี้คือรีวิวสาธิตเมนูแบบเลื่อนลง รวมถึงข้อความสำหรับการโปรโมตวันหยุดสุดสัปดาห์ (การสาธิตจะเปิดที่ด้านบนของหน้านี้ ไม่จำเป็นต้องคลิกและเปิดในหน้าต่างใหม่ 🙂 หรือจี้หมี)
เมนูแนวนอนที่ครอบคลุมความกว้างทั้งหมด
หลายๆท่านอาจไม่เห็นด้วยกับผมโดยพูดเมนูต่างๆ ดังที่ผมได้แสดงไปแล้ว ในอดีต และส่วนหนึ่งที่คุณกำลังคิดว่าผมอยากจะเห็นรูปแบบใหม่ๆ ของเมนูดังกล่าว
ฉันพนันได้เลยว่าคุณสนใจเรื่องก้นมากกว่า 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; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height: 1.3em;text-ตกแต่ง:none;font-weight:bold;text-transform:uppercase; :border-box; ) #menu1 ul li > a:hover; :0px; จอแสดงผล: ไม่มี; ความกว้าง:อัตโนมัติ; พื้นหลัง:#EBBD5B; พื้นที่สีขาว: nowrap; ) #menu1 ul li:last-child ul(/*รายการที่เหลือจะถูกแนบไว้ที่ขอบด้านขวา*/ left:auto; right:0px; ) dropdown*/ #menu1 ul li ul li(display:block; width: อัตโนมัติ; ) #menu1 ul li ul li (แสดง: บล็อก; แปลงข้อความ: ไม่มี; ความสูง: อัตโนมัติ; ขนาดกล่อง: เส้นขอบกล่อง; เส้นขอบด้านบน: 1px ทึบ #ffffff;) #menu1 #FDDC96; สี:#6572BC;
นอกจากนี้ ตัวอย่างนี้ยังแตกต่างจากตัวอย่างแรกตรงที่เมนูที่ดรอปดาวน์ ตัวดรอปเองจะขยายความกว้างขึ้นอยู่กับความกว้างของรายการเมนูทั้งหมด
สำหรับรายการเมนูที่มีขนาดยาวมาก ตัวเลือกนี้อาจใช้ไม่ได้ผลมากนัก เนื่องจากกลิ่นจะกระจายไปไกลเกินขอบเขต หากต้องการได้รับพลังนี้ ก็เพียงพอที่จะทราบถึงพลังของ "white-space:nowrap;" ที่ตัวเลือก #menu1 ul li ul แล้วเลือก
ด้านล่างนี้คุณสามารถดูการสาธิตหรือเพลิดเพลินกับเมนูแบบเลื่อนลงช่วงสุดสัปดาห์:
หากไม่มีเส้นแบ่ง เมนูจะเป็นดังนี้ คุณสามารถเพิ่มรายละเอียดใน HTML ได้ด้วยตนเอง แต่หากคุณมี CMS เช่น WordPress การเพิ่มด้วยตนเองนั้นไม่ใช่เรื่องง่าย
เมนูแนวนอนพร้อมส่วนต่างๆ
มีตัวเลือกมากมายในการเพิ่มความสับสนระหว่างรายการเมนูโดยใช้ CSS ล้วนๆ ฉันจะไม่ทำซ้ำตัวเลือกเช่น::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:
#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; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a ( จอแสดงผล:บล็อก; การขยาย:9px 45px 0px 45px; em;การตกแต่งข้อความ:ไม่มี;แบบอักษร-น้ำหนัก:ตัวหนา;การแปลงข้อความ:ตัวพิมพ์ใหญ่;ความสูง:36px;ขนาดกล่อง:เส้นขอบ-กล่อง;) #เมนู1 ul li ( พื้นหลัง: #EBBD5B; color:#2B45E0; ) #menu1 ul li ul( ตำแหน่ง:สัมบูรณ์; ด้านบน:36px; ซ้าย:0px; จอแสดงผล:none; ความกว้าง:อัตโนมัติ; พื้นหลัง:#EBBD5B; white-space:nowrap; ) # menu1 > ul > li:last-child > ul(/*รายการสุดท้ายจะถูกแนบไว้ที่ขอบด้านขวา*/ left:auto; ขวา:0px; ) #menu1 ul li:hover > ul(display:block;)/*บรรทัดนี้ใช้กลไกแบบเลื่อนลง*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a ( จอแสดงผล: block; การแปลงข้อความ: none; padding:7px 45px; box-sizing:border-box ขอบด้านบน: 1px solid #ffffff; ; ) #menu1 ul li ul li ul( top:0px; > ul ul( ซ้าย:อัตโนมัติ; ขวา:100%;) #menu1
ไฟล์สำหรับ jQuery จะถูกคัดลอกราวกับว่ามาจากด้านหน้า หากต้องการถอดตัวคั่นออกเพื่อให้เมนูดูสวยงามขึ้นอีกหน่อย แน่นอนว่าเป็นไปได้หากไม่มีพวกเขา
แกนกลายเป็นดังนี้:
ฉันสร้างสกิน 2 อันในอันเดียวเพื่อแสดงให้เห็นว่ามันดูเป็นอย่างไรสำหรับคนถนัดขวาและตรงกลาง
ด้านล่างนี้คุณสามารถดูการสาธิตและดาวน์โหลดตัวอย่าง:
มีเมนูใหม่ปรากฏขึ้นพร้อมกับเลื่อนลงแบบเลื่อนลงเมื่อวางเมาส์เหนือ
มีน้ำมันอยู่เล็กน้อยในชื่อเรื่อง แต่รหัส smut จะต้องถูกส่งผ่าน
สาระสำคัญของสิ่งนี้คือการสร้างเมนูแนวนอนที่ตรงกับความกว้างเต็มโดยตกลงไปที่ความกว้างเต็ม + ความสมบูรณ์
ฉันจะไม่เปลี่ยนโค้ด 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; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 > ul > li(position:static;) :28px;width:1px;พื้นหลัง:#ffffff;margin-top:4px;) # menu1 ul li a(จอแสดงผล:บล็อก;ช่องว่างภายใน:9px 45px serif; สี:#ffffef;line-height:1.3em;การตกแต่งข้อความ:none;แบบอักษร-น้ำหนัก:ตัวหนา;การแปลงข้อความ:ตัวพิมพ์ใหญ่;ความสูง:36px; :hover, #menu1 ul li:hover > a( พื้นหลัง:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( ตำแหน่ง:สัมบูรณ์; บน:36px; ซ้าย:0px; จอแสดงผล:none; ความกว้าง:100%; พื้นหลัง:#EBBD5B; ) #menu1 > ul > li > ul::after( ชัดเจน:ทั้งสอง; ลอย:ไม่มี;ความกว้าง:100%; ความสูง:0px; เนื้อหา:" "; ) #menu1 :บล็อก; ความกว้าง:30%; ลอย:ซ้าย; ) #menu1 ul li ul li a( display:block; -box ; color:#6572BC; ; block;float:none;width:100%;) #menu1
เมนูจะมีลักษณะดังนี้: สิ่งหนึ่งที่ไซต์มีพื้นที่เพียงพอเนื่องจากไม่มีที่สำหรับรายการสุดท้ายทางด้านขวาให้ปรากฏ ปัญหานี้สามารถแก้ไขได้โดย: n-child แต่ฉันไม่ต้องการสร้างเมือง
ชมการสาธิตเมนูสัมภาระแนวนอน:
ดังที่คุณอาจสังเกตเห็น: แผ่นด้านล่างก็เป็นความกว้างทั้งหมดเช่นกัน เพลายุบแบบนี้ไปหลายช่วงตึก
ฉันเชื่อนั่นคือทั้งหมดที่ฉันมี แม้ว่าก้นของฉันจะช่วยคุณได้บ้างก็ตาม ขอขอบคุณสำหรับความเคารพของคุณ
นำเปลือกไม้มาให้เขาและฉัน🙂หากคุณอ่านโพสต์อย่างละเอียดแล้ว แต่ไม่รู้วิธีสร้างเมนูแนวนอนของคุณเองที่ตรงกับ CSS ให้ถามคำถามของคุณในความคิดเห็นหรือค้นหาเว็บไซต์อย่างรวดเร็ว
นอกจากนี้ราชายังอยากแบ่งปันด้านพ่อของฉันด้วย https://site/vypadayushhee-menu/คุณจะพบแอปพลิเคชันทั้งหมดและเมนูแบบเลื่อนลงประเภทต่างๆ
ฉันกำลังบิน.
เป็นเวลานานแล้วตั้งแต่ฉันเขียนโพสต์ในหัวข้อ html/css เพิ่งเริ่มจัดวางเลย์เอาต์ใหม่และในขั้นตอนการใช้เทคนิคง่าย ๆ ที่ทำให้คุณสามารถสร้างเมนูที่ปรับแต่งได้ (โดยคุณสามารถเพิ่มรายการใหม่ได้และขนาดจะไม่เพิ่มขึ้นและต่อจากนี้จะเป็น 100 % ของบล็อคของพ่อคุณ) ปัจจุบันเมนูถูกนำมาใช้โดยใช้ CSS
ผู้ที่ขี้เกียจอ่านบทความนี้สามารถเพลิดเพลินกับวิดีโอนี้ได้ ผู้เขียนยังอธิบายทุกอย่างได้ดีมาก:
เมนู Gumova บน CSS - croc 1
- บล็อกสำหรับเมนู
- เมนูนั้นแสดงผ่านรายการแท็ก (แท็ก ul)
- รายการเมนูอยู่ตรงกลางและเห็นได้ชัดว่ามีข้อความอยู่แล้ว
ทุกอย่างชัดเจน รหัสโครงร่างของฉันเป็นดังนี้:
ทุกอย่างดูเป็นมาตรฐาน แกนเป็นดังนี้:
ตอนนี้เรามารวมทุกอย่างไว้ในแบบฟอร์มที่ต้องการแล้ว มาทำงานกับ CSS กันดีกว่า
Croc 2 - สไตล์พื้นฐาน
ต่อไปฉันจะเพิ่มสไตล์ให้กับบล็อกบล็อก และฉันจะตั้งค่าความกว้างสูงสุดเป็น 600 พิกเซล (เพื่อให้สามารถจับภาพหน้าจอได้ง่ายเพื่อให้เมนูพอดี) และจัดกึ่งกลางบล็อกด้วย
ห่อ(
พื้นหลัง: #fff;
ความกว้างสูงสุด: 600px;
ระยะขอบ: 0 อัตโนมัติ;
}ครก 3 - ตระหนักถึงความชื้น
ตอนนี้เรามาดูเมนูกันดีกว่า จากอันนี้ (ที่แท็ก ul) ฉันจะลบเครื่องหมายออก สร้างการไล่ระดับสีเชิงเส้นพื้นหลัง และที่สำคัญที่สุดคือ display: table-row ฉันจะตั้งค่าคอนเทนเนอร์สำหรับเมนูให้ทำงานเหมือนแถวตาราง สิ่งสำคัญคือต้องเตรียมพร้อมสำหรับการปรับเปลี่ยนเพิ่มเติม
R-เมนู(
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, #b0d4e3 0%, #88bacf 100%);
จอแสดงผล: ตาราง-แถว;
รายการสไตล์: ไม่มี;
}อย่างที่คุณทราบ รหัสคำแนะนำได้รับการแก้ไขสำหรับทุกสิ่งที่ฉันเขียนไปแล้ว ก่อนที่จะพูด คุณสามารถสร้างการไล่ระดับสีได้ด้วยตนเองโดยใช้เครื่องมือ Ultimate CSS Gradient Generator ฉันจะเขียนเกี่ยวกับเขาในภายหลัง
R-เมนู(
จัดแนวตั้ง: ด้านล่าง;
จอแสดงผล: ตารางเซลล์;
ความกว้าง: อัตโนมัติ;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูง: 50px;
เส้นขอบขวา: 1px ทึบ #222;
}
- แนวตั้ง: ด้านล่าง - จำเป็นต้องใช้พลังงานนี้เพื่อให้ข้อความในรายการเมนูใช้เวลา 2 แถวและปรากฏเท่ากัน เมื่อเราสร้างเมนูแล้ว คุณสามารถลบพาวเวอร์นี้ เพิ่มมาตราส่วนเพื่อให้รายการถูกบีบอัดและข้อความถูกย้ายไปยังสองแถว และแก้ไขปัญหาเกี่ยวกับการแสดงผล หมุนไฟกลับแล้วทุกอย่างจะเรียบร้อย
- display: table-cell – ตอนนี้เราได้ตั้งค่าเมนูการแสดงผลเป็นแถวของตารางแล้ว ดังนั้นจึงสมเหตุสมผลที่จะตั้งค่ารายการที่แสดงนี้เป็นแถวของตาราง Tse obov'yazkovo
- width: auto — ความกว้างจะถูกคำนวณโดยอัตโนมัติ ขึ้นอยู่กับข้อความในย่อหน้า
- text-align: center ใช้สำหรับจัดข้อความให้อยู่ตรงกลางเท่านั้น
- height: 50px - ตั้งค่าความสูงเป็น 50 พิกเซล
- เส้นขอบขวาเป็นเพียงเส้นขอบทางขวามือ เหมือนกับตัวแบ่งจุด
แม้ว่าเมนูจะดูไม่โอ้อวดแต่ก็ไม่มีอะไร ถึงเวลาพาเขาไปยังจุดหมายปลายทางแล้ว
สิ่งเดียวที่ต้องทำคือกำหนดสไตล์ให้กับข้อความที่อยู่ตรงกลางจุด ที่นี่ฉันมีรหัสนี้:R-เมนู li a (
การตกแต่งข้อความ: ไม่มี;
ความกว้าง: 1,000px;
ความสูง: 50px;
แนวตั้ง-จัด: กลาง;
จอแสดงผล: ตารางเซลล์;
สี: #fff;
แบบอักษร: ปกติ 14px Verdana;
}นี่คือลักษณะของเมนูตอนนี้:
ฉันจะอธิบายสิบบรรทัดอีกครั้ง:
- การตกแต่งข้อความด้วยพลัง skasovaya pіdkrelennya u posilanya, แยกใส่ zamovchannyam
- ความกว้าง: 1,000px - อาจเป็นแถวที่สำคัญที่สุด จำเป็นต้องตั้งค่าให้มีความกว้างเท่ากันโดยประมาณ อาจน้อยกว่า แต่ใหญ่กว่ารายการเมนูสูงสุดอย่างแน่นอน สิ่งสำคัญคือไม่ต้องตั้งค่าความกว้างเป็น 1,000 พิกเซล เพื่อให้ความกว้างของรายการเมนูถูกกำหนดให้มีความกว้างตั้งค่าเป็นอัตโนมัติ แต่คุณสามารถทำได้เพื่อให้สำหรับรายการจำนวนเท่าใดก็ได้ เมนูจะมีความกว้าง 100 พิกเซลเสมอ .
- จัดแนวตั้ง: ตรงกลาง และจอแสดงผล: ตารางเซลล์ - อันแรกจัดข้อความในแนวตั้งตรงกลาง และอีกอันก็แสดงข้อความตรงกลางด้วย ความไม่พอใจต่อเจ้าหน้าที่เป็นสิ่งจำเป็น
- แบบอักษร - นี่เป็นเพียงชุดการตั้งค่าสำหรับแบบอักษร อ่านเกี่ยวกับพลัง CSS สำหรับแบบอักษรในบทความนี้
ครก 4 (หลังตะกร้า) คุณสามารถเพิ่มการโต้ตอบได้
ตัวอย่างเช่น เมื่อต้องการเปลี่ยนสีของรายการเมนูเมื่อโฮเวอร์ สามารถนำไปใช้งานได้ง่ายขึ้นโดยใช้คลาสหลอกเพิ่มเติม
เมนู R li: โฮเวอร์ (
สีพื้นหลัง: #6bba70;
}เรากำลังทดสอบความชื้นในเมนู
แน่นอนว่าเมนูพร้อมแล้ว แต่เรายังไม่ได้ตรวจสอบทั้งหมด - ดีเท่าที่ฉันสัญญาไว้ ฉันจะเพิ่มอีก 2 รายการในเมนู:
เมนูสูญเสียช่องว่างภายในไป 600 พิกเซล จุดอื่นๆ ก็บีบเข้าด้วยกันเพื่อให้พอดีกับจุดใหม่ 2 จุดฉันจะเพิ่มอีกหนึ่งประเด็น:
ดังที่คุณทราบเมนูมีการเปลี่ยนแปลงเพิ่มขึ้นเล็กน้อยและรายการอื่นก็ปรากฏเป็นปกติโดยสมบูรณ์ และถ้าฉันไม่มีพลังในการจัดแนวตั้ง: ด้านล่างอย่างที่ฉันบอกคุณ เมนูก็จะดูเรียบร้อยขึ้นฉันจะเปลี่ยนเมนูเป็นสามรายการ
รายการมีขนาดใหญ่ขึ้น แต่ความกว้างของเมนูเองก็ไม่เปลี่ยนแปลง เราสร้างสรรค์เมนูหมากฝรั่ง 100%!ปรับตัวยังไงบ้าง?
โดยหลักการแล้ว หากคุณกำหนดความกว้างสูงสุดให้กับ Wrapper Block ก็ไม่จำเป็นต้องมีการปรับเปลี่ยน มุมมองของฉันตั้งค่าเป็นความกว้างสูงสุด: 600px และหากความกว้างน้อยกว่า 600 พิกเซล บล็อกจะปรับขนาดด้านหลังหน้าจอโดยไม่อนุญาตให้เลื่อนในแนวนอน
คือถ้าคุณต้องการเปลี่ยนหรือแก้ไขเมนูให้เป็น อุปกรณ์เคลื่อนที่หรือจอกว้างก็มีสื่อช่วยคุณได้! ขอให้โชคดีกับเว็บไซต์!
เมนูแนวนอนนี่คือรายการส่วนต่างๆ ของเว็บไซต์ ดังนั้นจึงสมเหตุสมผลที่จะวางไว้ตรงกลางขององค์ประกอบ
จากนั้นใช้สไตล์ CSS กับองค์ประกอบของคุณ การขยายเมนูนี้ขยายได้มากที่สุดด้วยข้อได้เปรียบที่ชัดเจนในการวางตำแหน่งบนหน้าเว็บ
วิธีสร้างเมนูแนวนอน: เค้าโครงและการออกแบบแอปพลิเคชัน
เค้าโครง HTML และสไตล์พื้นฐานสำหรับเมนูแนวนอน
รายการทั้งหมดในรายการจะแสดงอยู่ด้านล่าง แนวตั้งซึ่งครอบครองความกว้างทั้งหมดขององค์ประกอบคอนเทนเนอร์ ซึ่งครอบครองความกว้างทั้งหมดของบล็อกคอนเทนเนอร์
รูปแบบ HTML สำหรับการนำทางแนวนอน
- รายการเมนู
- รายการเมนู
- รายการเมนู
...เมนูแนวนอนที่อยู่ตรงกลางของแท็กสามารถวางเพิ่มเติมที่ตรงกลางขององค์ประกอบได้ ทั้ง
... -การจัดรูปแบบ html นี้ให้ความรู้สึกทางความหมาย และยังมีตัวเลือกการจัดรูปแบบเพิ่มเติมสำหรับบล็อกเมนูอีกด้วย มีหลายวิธีในการวางแนวนอน
-
ในการเริ่มต้น คุณจะต้องละทิ้งสไตล์เบราว์เซอร์ของคุณสำหรับการตั้งค่าองค์ประกอบการนำทาง:
Ul ( list-style: none; /*การเลือกเครื่องหมายรายการ*/ margin: 0; /*การเลือกระยะขอบด้านบนและด้านล่าง เท่ากับ 1em*/ padding-left: 0; /*การเลือกระยะขอบด้านซ้าย เท่ากับ 40px* / ) a ( การตกแต่งข้อความ: none; /*เน้นข้อความ*/)
วิธีที่ 1. li (จอแสดงผล: อินไลน์;)
โรบิโม อิเลเมนติ ลิสตา มาลิมี. เป็นผลให้ข้อความถูกขยายในแนวนอน โดยมีช่องว่างระหว่างคนถนัดขวาเท่ากับ 0.4em (คำนวณตามขนาดตัวอักษร) หากต้องการใส่เข้าไป ให้เพิ่มสำหรับ li ในช่องขวาลบ li (margin-right: -4px;) ต่อไป เราจะตกแต่งข้อความสำหรับผลไม้เปียก
วิธีที่ 2. li (ลอย: ซ้าย;)
องค์ประกอบ Robimo ในรายการองค์ประกอบแบบลอย ส่งผลให้กลิ่นเหม็นกระจายไปในแนวนอน ความสูงของบล็อกคอนเทนเนอร์ ul เท่ากับศูนย์ เพื่อแก้ไขปัญหานี้ เราเพิ่ม ul (overflow: Hidden;) เพื่อขยายและอนุญาตให้ลบองค์ประกอบที่ลอยอยู่ได้ ในการดำเนินการนี้ เราได้เพิ่ม (display: block;) และจัดรูปแบบไว้หลังแบนเนอร์ของเรา
วิธีที่ 3. li (จอแสดงผล: inline-block;)
องค์ประกอบ Robimo รายการแถวบล็อก กลิ่นเหม็นขยายออกในแนวนอนและมีช่องว่างทางด้านขวาเหมือนตอนแรก เพื่อจุดประสงค์นี้ เราได้เพิ่ม (display: block;) และจัดรูปแบบไว้หลังแบนเนอร์ของเรา
วิธีที่ 4. ul (จอแสดงผล: flex;)
@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 (เนื้อหา: "|"; สี: #606060; จอแสดงผล: inline-block; Vertical-align:top; ) .menu-main li:last-child:after (เนื้อหา: ไม่มี;) .menu-main a (การตกแต่งข้อความ: ไม่มี; ตระกูลแบบอักษร: "Ubuntu Condensed", sans-serif; ระยะห่างระหว่างตัวอักษร: 2px; ตำแหน่ง: สัมพันธ์; ช่องว่างด้านล่าง: 20px; ระยะขอบ: 0 34px 0 30px; ขนาดตัวอักษร: 17px; การแปลงข้อความ: ตัวพิมพ์ใหญ่; การแสดงผล: อินไลน์บล็อก; การเปลี่ยนแปลง: สี .2s; ) .menu-main a, .menu-main a:visited (สี: #9d999d;) main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( content: ""; ตำแหน่ง: แน่นอน; ความสูง: 4px; top: auto; : -5px; ซ้าย: 50%; พื้นหลัง: #feb386; การเปลี่ยนแปลง: . 8s; ) .menu-main a:โฮเวอร์:ก่อน; เลื่อน: หลัง, .menu-main .current:after (ขวา: 0; ) @media (ความกว้างสูงสุด: 550px) ( .menu-main (padding-top: 0;) .menu-main li (แสดง: บล็อก; ) .menu-main li:after (เนื้อหา: ไม่มี;) .menu-main a ( การขยาย: 25px 0 20px; ระยะขอบ: 0 30px; )2. เมนูที่ปรับเปลี่ยนได้เพื่อเว็บไซต์สนุกๆ
@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; ขอบบน: 3px ทึบ #575350; ขอบล่าง: 1px ทึบ #575350; ขอบล่าง: 2px; ขอบบน: 2px; ) .menu-main ( รายการสไตล์: none; padding: 0 30px; center; ตำแหน่ง: ญาติ; ) .menu-main:before; - - -( การตกแต่งข้อความ: ไม่มี; จอแสดงผล: inline-block; ระยะขอบ: 2px 5px; การขยาย: 6px 15px; ตระกูลแบบอักษร: "PT Sans", sans-serif; ขนาดตัวอักษร: 16px; สี: #777777; ขอบล่างสุด : 1px ทึบโปร่งใส n: .3s เชิงเส้น; ) .menu-main .current, .menu-main a:hover ( รัศมีเส้นขอบ: 3px; พื้นหลัง: #f3ece1; สี: #313131; ข้อความ-เงา: 0 1px 0 #fff; @media (ความกว้างสูงสุด: 500px) ( .menu-main li (จอแสดงผล: บล็อก;) )
@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; ด้านล่าง: 255,255,255,0) 0 -10px; ขนาดพื้นหลัง: 20px 20px; พื้นหลังซ้ำ: ซ้ำ-x; -ไม่มี; จอแสดงผล: อินไลน์บล็อก; ระยะขอบ: 0 15px; การขยาย: 10px 30px; ตระกูลฟอนต์: "PT Sans Caption", sans-serif; -main a:before, .menu-main a:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ด้านบน: calc(50% - 3px); ความกว้าง: 6px; ความสูง: 6px; #F58262; ความทึบ: 0; การเปลี่ยนแปลง: .5s ความสะดวกเข้าออก; ปัจจุบัน: ก่อน .menu-main a.cur ค่าเช่า: หลัง . ) @media(ความกว้างสูงสุด:680px) ( .menu-main li (แสดง: บล็อก;) )
4. เมนูแบบปรับได้บนหน้า@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,2) 0 150px -150px rgba(255,255,255,.12) สิ่งที่ใส่เข้าไป -150px 0 150px -150px rgba(255,255,255,.12); .top-menu:before, .e z-index: 2; ซ้าย: 0; ความกว้าง: 100%; ความสูง: 3px; ) .top-menu:before ( บน: 0; เมนู:หลัง ( ล่าง: 0; ขอบด้านบน: 1px ประ rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; ระยะขอบ: 0; text-align: center; ) menu-main:before, .menu-main:after ( เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ความกว้าง: 50px; ความสูง: 0; ด้านบน: 8px; 5A394E; แปลงร่าง: หมุน (360deg); ดัชนี z: -1; ) .menu-main:before ( ซ้าย: -30px; main:after ( ขวา: -30px; border-right: 12px solid rgba(2 55, 255, 255, 0 ) ; .menu-main li ( display: inline-block; margin-right: -4px; ) .menu-main a ( การตกแต่งข้อความ: none; display: inline-block; Sans Caption", sans-serif; color : white ; การเปลี่ยนแปลง: .3s เชิงเส้น; ) .menu-main a.current, .menu-main a:hover @media (ความกว้างสูงสุด: 680px) ( .top-menu (ระยะขอบ: 0;) .menu-main li ( จอแสดงผล : block; margin-right: 0; ) .menu-main:before, .menu-main:after (เนื้อหา: none;).menu-main a (แสดง: block;) )
@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 ( ตกแต่งข้อความ: ไม่มี; แสดง: บล็อก; ; ระยะห่างตัวอักษร: 2px; ตระกูลแบบอักษร: "Arimo", sans - serif; font-weight: white; 0,0,.3);) @media (ความกว้างสูงสุด: 830px) (.menu-main (padding-top: 90px; text-align: center;)) - ด้านบน: 10px; แปลงร่าง: แปล X (-50%); ) .menu-main li (ลอย: none; display: inline-block; ) -size: 16px; ) ) @media (ความกว้างสูงสุด: 630px) ( .menu-main li (จอแสดงผล: บล็อก;) )6. เมนูแบบปรับได้พร้อมโลโก้ Zliv
@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;) li (จอแสดงผล: inline-block;).menu-main a ( การตกแต่งข้อความ: none; display: block; : 2px; ตระกูลแบบอักษร: "Arimo", sans-serif; Font-weight: ตัวหนา; สี: #F73E24 ; การเปลี่ยนแปลง: .3s เชิงเส้น; ความสูง: 9px; พื้นหลัง: #F73E24; ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; แปลง: หมุน (45deg) TranslateX (6.5px); ความทึบ: 0; การเปลี่ยนแปลง: .3s เชิงเส้น; (ความทึบ: 1;) @media (ความกว้างสูงสุด: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (ช่องว่างภายใน: 0 10px;) .menu-main a:be ข้างหน้า (แปลง: หมุน(45deg) TranslateX(-6px);) ) @media (ความกว้างสูงสุด: 600px) ( .menu-main li (จอแสดงผล: บล็อก;) )
