บทนำ: บทความนี้จะสอนคุณทีละขั้นตอนถึงวิธีการสร้างเมนูการนำทางประตูบานเลื่อนมาตรฐานแบบแยกสามชั้นที่ยอดเยี่ยมทีละขั้นตอน จากแนวคิด หลักการ ขั้นตอน และวิธีการต่างๆ อาจกล่าวได้ว่า "ทุกสิ่งเป็นไปได้" คุณคือฉันเชื่อว่าหลังจากอ่านบทความนี้แล้ว คุณสามารถสร้างเมนูนำทางมาตรฐานที่สวยงามสุด ๆ ของคุณเองได้ เมนูนี้ไม่มีโครงสร้างซ้ำซ้อนและเอื้อต่อการส่งออกข้อมูลแบบไดนามิก เหมาะมากสำหรับใช้ในโครงการทั่วไป บทช่วยสอนนี้พูดถึงหลักการพื้นฐานของประตูบานเลื่อน ฉันเชื่อว่ามันจะเป็นประโยชน์กับเพื่อน ๆ ที่ยังคลำหาอยู่บนถนนสายนี้! แน่นอนหากมีข้อผิดพลาดหรือปัญหาใด ๆ คุณสามารถหารือได้ เป้าหมายในอุดมคติที่เมนูนำทางนี้ต้องการบรรลุคือ: สวยงามและเป็นส่วนตัว โครงสร้างชัดเจน ความหมายชัดเจน และไม่มีแท็กซ้ำซ้อน ประสิทธิภาพ โครงสร้าง และพฤติกรรมถูกแยกออกเป็นสามระดับ โดยไม่มีการบุกรุกใดๆ เอื้อต่อการส่งออกข้อมูลของโปรแกรมพื้นหลัง เมนูมีการเปลี่ยนแปลงเอฟเฟกต์สามสถานะ สามารถไฮไลท์และบันทึกรายการเมนูที่คลิกได้ ความกว้างของข้อความที่ปรับได้ เมื่อเนื้อหาข้อความเปลี่ยนความยาว ปุ่มสามารถเปลี่ยนตามเวลาได้ เข้ากันได้กับเบราว์เซอร์หลักทั้งหมด มาปรับใช้เมนูในอุดมคตินี้ทีละขั้นตอนกัน! โครงสร้าง ในความคิดของฉัน เมนูมาตรฐานในอุดมคติควรมีโครงสร้างดังต่อไปนี้: <div id="nav"> โครงสร้างดั้งเดิมของเมนูพร้อมใช้งานแล้ว คุณจะเห็นว่าไม่มีป้ายกำกับที่ไม่มีความหมายอยู่ในนั้น มาดูในเบราว์เซอร์กันดีกว่า ง่ายๆ เลย มันเป็นแค่ข้อความต้นฉบับแบบ เอ่อ เหมือนเมนูที่เราสั่งอาหารในร้านอาหารนั่นแหละ มันอาจจะง่ายกว่านั้นและมีจุดเล็กๆ อยู่ด้วย! โอ้พระเจ้า ห่างไกลจากเมนูสวยๆ ของเราเหลือเกิน! สไตล์ โอเค ตอนนี้มันเป็นเพียงโครงกระดูก มาตกแต่งให้สวยงามหน่อย เพิ่มสไตล์ง่ายๆ อย่างน้อยก็เอาจุดเล็กๆ ออก แล้วจัดเรียงในแนวนอน! เอาล่ะ มาเพิ่มสไตล์กันดีกว่า! *{margin:0;padding:0;}/*รวมเป็นรูปลักษณ์เดียว ไม่เช่นนั้นเบราว์เซอร์ต่างๆ จะดูน่าเกลียด*/ ดูสิ เราได้บรรลุเป้าหมายเล็กๆ ของเราแล้ว ด้วยซอร์สโค้ดของปุ่มที่ออกแบบมา การบันทึกส่วนการออกแบบจึงเป็นเรื่องดี แต่เพื่อให้เป็นปุ่มสามสถานะ เราจำเป็นต้องแก้ไขปุ่มนี้ คุณเห็นเป้าหมายที่เจ็ดแล้วหรือยัง เรากำลังสร้างปุ่มแบบปรับเปลี่ยนได้ ดังนั้นเราจึงจำเป็นต้องดำเนินการบางอย่างกับปุ่มนี้ เราแสดงปุ่มทั้งสามนี้เป็นสามสถานะ: เมื่อเลื่อนเมาส์ออกไป หลังจากคลิก และเมื่อเลื่อนเมาส์ขึ้น ในการสร้างเมนูประตูบานเลื่อน คุณต้องตัดปุ่มจากตรงกลาง วางไว้ทางด้านซ้ายและภาพทางด้านขวาคือวางไว้ทางด้านขวา หากต้องการปรับให้เข้ากับความยาวของข้อความ ความกว้างของเลเยอร์นี้จะต้องขยายออกไปเล็กน้อย อย่างไรก็ตาม รูปภาพนี้มีเอฟเฟกต์เงาที่ซับซ้อนมากและไม่สามารถยืดออกแบบไม่ได้ตั้งใจได้ มิฉะนั้นเอฟเฟกต์จะไม่เหมือนเดิม ลองตัดมันออกตรงกลางแล้วยืดด้านซ้ายของรูปภาพทางด้านขวาไปข้างหน้า ขั้นแรกเราจึงตัดมันเป็นหกส่วนตามที่แสดงในภาพ จากนั้นจึงรวมรูปภาพทั้งหกนี้เข้าด้วยกัน ทำไมจึงเป็นเช่นนี้? มาดูหลักการของ CSS Sprite กัน! ฉันจะไม่ลงรายละเอียดที่นี่ คุณสามารถอ่านบทความอื่นของฉัน "การสร้างโป๊กเกอร์การ์ดซีรีส์ 1 --- เทคโนโลยีการเพิ่มประสิทธิภาพพื้นหลังภาพ CSS Sprites" ในภาพด้านบน รูปภาพแรกและรูปภาพที่สองจะสร้างสไตล์เมนูปกติ (สไตล์เริ่มต้น) รูปภาพที่สามและสี่จะสร้างสไตล์การเลื่อน และรูปภาพที่ห้าและหกจะสร้างสไตล์รายการเมนูที่ถูกคลิก กราฟิกที่ต้องการพร้อมแล้ว ต่อไปมาเพิ่มรูปภาพนี้ในรายการเมนู ปุ่มต้องมีสองภาพจึงจะแสดงได้ ทุกคนในโลกรู้ดีว่าแท็ก html สามารถเก็บภาพได้เพียงภาพเดียว (หากคุณพบว่าแท็กสามารถเก็บภาพได้สองภาพ โปรดบอกฉันให้ทันเวลา แล้วฉันจะเลี้ยงอาหารค่ำคุณ!) โอ้! แต่ละรายการในโครงสร้างเมนูของฉันมีสองแท็กพอดี แท็กหนึ่งคือ li และมีแท็ก A อยู่ด้วย ซึ่งสามารถใช้เพื่อเก็บรูปภาพซ้ายและขวาได้ Li ใช้สำหรับเก็บภาพทางด้านซ้าย และ A ใช้สำหรับเก็บภาพทางด้านขวา ฉันชื่นชมตัวเองจริงๆ ฉันสามารถคิดไอเดียดีๆ ออกมาได้ และฉันก็พอใจกับตัวเองมาก... โอ้พระเจ้า อย่ายุ่งเลย ถ้าฉันติดตั้งรูปภาพด้วยวิธีนี้ ฉันจะเลื่อนเมาส์ทั้งสามสถานะได้อย่างไร เราทุกคนควรรู้ว่ายกเว้น IE6 เบราว์เซอร์อื่นๆ ในปัจจุบันรองรับคลาสหลอก li:hover อย่างไรก็ตาม เพื่อให้เข้ากันได้กับเบราว์เซอร์หลักๆ ทั้งหมด (นี่คือเป้าหมายที่ 8 ของเรา อย่าลืม!) วิธีการนี้ใช้ไม่ได้ผล IE6 สามารถใช้คลาสหลอกแบบโฮเวอร์กับแท็ก A เท่านั้นและจะไม่สนใจแท็กอื่น ๆ ! เนื่องจาก IE6 สามารถใช้คลาสหลอกแบบโฮเวอร์บนแท็ก A เท่านั้น ดังนั้นหากเราต้องการสร้างเมนูประตูเลื่อนที่ปรับเปลี่ยนได้ เราจำเป็นต้องทำการเปลี่ยนแปลงโครงสร้างบางอย่าง ดูเหมือนว่าเราจะสามารถเพิ่มแท็กอื่นให้กับแท็ก A ได้เท่านั้น โครงสร้างของเมนูก็จะประมาณนี้ (หมายเหตุ: นี่คือจุดที่โครงสร้างเริ่มเปลี่ยนแปลง แม้ว่าฉันต้องการหลีกเลี่ยงสิ่งนี้มาโดยตลอด แต่ดูเหมือนว่าเพื่อให้เป็นไปตามข้อกำหนด จะต้องเพิ่มป้ายกำกับนี้) <li><a href="#none" title="ปิงจีเฟิง"><span>ปิงจีเฟิง</span></a></li> เราได้เพิ่มคอนเทนเนอร์ span ให้กับแท็ก A ซึ่งรวมถึงเนื้อหาข้อความ ขณะนี้มีสองป้ายกำกับ ซึ่งสามารถเก็บรูปภาพได้สองรูป เราวางภาพที่ถูกต้องไว้ที่พื้นหลังของแท็ก A และจัดตำแหน่งไปทางขวา และวางภาพด้านซ้ายในแท็ก SPAN และจัดตำแหน่งไปทางซ้าย นี่จะแสดงรูปร่างของปุ่มที่สมบูรณ์ เอาล่ะ การเตรียมการของเราใกล้จะเสร็จสิ้นแล้ว ได้เวลามอบเสื้อผ้าใหม่ให้กับเมนูแล้ว หากเราต้องการสร้างเมนูที่มี Adaptive width เราไม่สามารถตั้งค่าความกว้างของเมนูได้ ดังนั้นเราจึงไม่สามารถกำหนดความกว้างแล้วลอยไปทางซ้ายเหมือนที่เรามักจะทำเมื่อสร้างเมนูแนวนอนที่มีความกว้างคงที่ หากเป็นกรณีนี้ เมื่อความกว้างของแต่ละรายการเมนูแตกต่างกัน คุณต้องกำหนดความกว้างของแต่ละรายการแยกกัน จากนั้นคุณต้องกำหนด ID หรือ CLASS สำหรับแต่ละรายการเมนู และวิธีการนี้ไม่เอื้อต่อการวนซ้ำแบบไดนามิก เอาต์พุตของโปรแกรมพื้นหลัง สิ่งที่เราต้องการคือการจัดเรียงรายการเมนูแต่ละรายการจากซ้ายไปขวาเหมือนองค์ประกอบแบบอินไลน์ จากนั้นเราต้องการให้เมนูแสดงแบบอินไลน์ ตกลง ลองใช้ display:inline นี่เป็นคุณสมบัติที่มีประโยชน์มาก: การจัดเรียงแบบแยกวิเคราะห์ สามารถตอบสนองความต้องการขั้นพื้นฐานของเรา: จัดเรียงองค์ประกอบฉลากจากซ้ายไปขวาเป็นแถวโดยอัตโนมัติ และความกว้างของแต่ละรายการอาจแตกต่างกัน หากการใช้แอตทริบิวต์ข้างต้นสามารถตอบสนองความต้องการของเราได้จริงๆ จะไม่มีเนื้อหาข้อความที่มีลักษณะดังต่อไปนี้ แต่...คุณลักษณะนี้มีจุดอ่อนร้ายแรงเช่นกัน โดยเบราว์เซอร์ขั้นสูงเช่น FF3 เท่านั้นที่สามารถรับรู้ได้ เบราว์เซอร์อื่นๆ ทำได้เพียงเลี่ยงเท่านั้น เอ่อโอ้! ดังนั้นการรวมมาตรฐานเบราว์เซอร์เข้าด้วยกันจึงมีความสำคัญเพียงใด! ดูเหมือนว่า HACK จะเป็นหนทางบรรเทาทุกข์ที่เราต้องรับมือด้วย โชคดีที่ผู้เชี่ยวชาญบางคนพบวิธีแก้ปัญหาแล้ว โปรดอ่านบทความทั้งสองนี้ก่อน บทช่วยสอนที่เกี่ยวข้อง: เราทุกคนเข้าใจหลักการนี้ และสามารถสร้างเมนูที่ปรับเปลี่ยนได้โดยใช้เทคนิคที่ให้ไว้ในบทความทั้งสองข้างต้น ขั้นแรกเรามาเขียนสไตล์ของรูปภาพทางด้านขวา ซึ่งใช้กับแท็กโหนดย่อย A ขององค์ประกอบ li li {display:inline-block; padding-right:30px; padding-top:10px; /button.gif) ไม่ทำซ้ำขวา -36px; สี:#fff;} ขั้นแรกเราตั้งค่า display:inline-block จากนั้นเราใช้ช่องว่างภายในเพื่อขยายระยะขอบเพื่อให้มีพื้นที่ว่างจำนวนหนึ่งในการเติมรูปภาพ โปรดทราบว่าเส้นทางรูปภาพที่นี่จะถูกแทนที่ด้วยเส้นทางของคุณเอง จากนั้นตั้งค่าสไตล์อื่นๆ เช่น การลบขีดเส้นใต้ สีฟอนต์ ขนาดฟอนต์ ฯลฯ ตั้งค่ารูปภาพให้ชิดขวา li a span {จอแสดงผล: inline-block; padding-left: 30px; line-height: 36px; ; พื้นหลัง:url(images/button.gif) ไม่ซ้ำด้านบน; รูปภาพทางด้านซ้ายของปุ่มถูกวางไว้ในองค์ประกอบ SPAN จัดรูปภาพไปทางซ้าย และตั้งค่าช่องว่างภายในเพื่อขยายความกว้างและความสูง li a, li ช่วง {display:inline;cursorointer;} จากนั้นตั้งค่ากลับเป็นโหมดอินไลน์ เพื่อทริกเกอร์คุณลักษณะ haslayout ของ IE li a:hover{padding-right:30px;พื้นหลัง:url(images/button.gif) ไม่ทำซ้ำทางขวา -108px;} ถัดไปคือเอฟเฟกต์หลังจากการคลิกเมาส์ li a:active{padding-right:30px;พื้นหลัง:url(images/button.gif) ไม่ทำซ้ำทางขวา -180px;} ตกลง ดูเหมือนว่าคุณจะทำเสร็จแล้ว หากคุณดูในเบราว์เซอร์ต่างๆ ดูเหมือนว่าคุณจะได้ผลลัพธ์ที่น่าพอใจ ตอนนี้เมนูประตูบานเลื่อนเวอร์ชัน CSS ล้วนพร้อมแล้ว
ฉันมักจะเห็นเพื่อนหลายคนทำเมนูในฟอรั่ม แต่พูดตามตรง พวกเขามีโครงสร้างที่ซ้ำซ้อน หรือมีรูปแบบ แต่ไม่มีจิตวิญญาณ หรือมีจิตวิญญาณ แต่ไม่มีรูปลักษณ์ และสิ่งที่เราอยากสร้างตอนนี้คือเมนูที่ดีที่สุด ไม่ว่าคุณจะเป็นมือใหม่หรือทหารผ่านศึก คุณควรพบสิ่งที่มีประโยชน์ในบทช่วยสอนนี้
โครงสร้างของเมนูในอุดมคติควรจะสะอาด ปราศจากความซ้ำซ้อน และแยกจากกัน อย่างไรก็ตาม ด้วยเหตุผลหลายประการ สิ่งที่ไม่มีความหมายมากมายจะถูกเพิ่มเข้าไป และในท้ายที่สุดก็จะห่างไกลจาก "ความสะอาด" มากขึ้นเรื่อยๆ . ดังนั้นก่อนทำเมนูจึงมีหลักการบางประการที่ต้องคำนึงถึงตลอดกระบวนการผลิตทั้งหมด และไม่สามารถถูกขัดขวางด้วยแรงภายนอกใดๆ ได้
<ul id="เมนู">
<li><a href="#none" title="บล็อกการ์เด้น">บล็อกการ์เด้น</a></li>
<li><a href="#none" title="ชุมชน">ชุมชน</a></li>
<li><a href="#none" title="บ้าน">บ้าน</a></li>
<li><a href="#none" title="เรียงความใหม่">เรียงความใหม่</a></li>
<li><a href="#none" title="ติดต่อ">ติดต่อ</a></li>
<li><a href="#none" title="การจัดการ">การจัดการ</a></li>
<li><a href="#none" title="สมัครสมาชิก">สมัครสมาชิก</a></li>
<li><a href="#none" title="บิงจีพีค">บิงจีพีค</a></li>
</ul>
</div>
ul{list-style:none}/*ลบจุด*/
li{float:left;margin-left:10px;}/*จัดเรียงในแนวนอนและใช้ระยะห่างเล็กน้อย -
ตอนนี้โครงกระดูกเข้าที่แล้ว ขั้นตอนต่อไปคือการใส่เสื้อผ้าสวยๆ ให้กับแต่ละเมนู
เพื่อให้เป็นไปตามข้อกำหนดแรก คุณต้องมีกระดุมสวยๆ และวาดด้วยตัวเองก่อน โอ้ ฉันไม่ใช่ศิลปิน มันเป็นเรื่องยาก! อย่างไรก็ตาม อย่าใจร้อนเกินไป อินเทอร์เน็ตมีมากมายจนมีสิ่งมหัศจรรย์มากมาย (น้ำตาจะไหล...) ซอร์สโค้ดของปุ่ม: http://bbs.blueidea.com/thread-2860891-1-1.html
เราแยกภาพเงาออกมาโดยเฉพาะและสร้างภาพพื้นหลังขนาดเล็ก
โชคดีที่แม้ว่าจะมีการเพิ่มแท็กพิเศษ แต่ก็ไม่ได้ไร้ความหมายโดยสิ้นเชิง
แม้ว่าแอตทริบิวต์นี้จะสามารถตอบสนองความต้องการพื้นฐานของโครงการของเราได้ แต่ก็มีจุดอ่อนที่ร้ายแรงมาก: ไม่สามารถกำหนดค่าความกว้างและความสูงได้ หากคุณไม่เชื่อ คุณสามารถลองใช้ได้ จะปรากฏเป็นความสูงและความกว้างเริ่มต้นของข้อความเท่านั้น โดยจะถูกซ่อนโดยอัตโนมัติหลังจากเกินค่าความกว้างและความสูงนี้ ด้วยวิธีนี้ ฉันมีภาพพื้นหลังที่นี่ เพื่อแสดงผลของภาพนี้ เราจำเป็นต้องกำหนดความกว้างและความสูง ซึ่งหมายความว่าเราไม่สามารถบรรลุผลสำเร็จได้ ซึ่งน่าหงุดหงิด! โชคดีที่มีคุณลักษณะอื่น: display:inline-block; ประสิทธิภาพคือสิ่งที่เราต้องการ
"สองตัวอย่างของการใช้งานจอแสดงผล: อินไลน์บล็อก" (Qin Ge)
"แอตทริบิวต์ Inline-block สำหรับความเข้ากันได้ของการจำลอง" (Yi Fei)
ในโค้ดข้างต้น เรายังเห็นแอปพลิเคชัน HACK *padding-bottom: 0; และ *padding-top: 0; ซึ่งใช้เพื่อแก้ไขเอฟเฟกต์ต่างๆ ของเบราว์เซอร์ เช่น IE และ FF หากคุณไม่เชื่อฉันคุณสามารถลบมันออกและดูว่ามันจะมีผลกระทบอะไรบ้าง
เอาล่ะ ถึงเวลาเขียนเอฟเฟกต์เมื่อเลื่อนเมาส์ไป
li a:hover span{padding-left:30px;พื้นหลัง:url(images/button.gif) ไม่ทำซ้ำซ้าย -72px;font-weight:bold;}
li a: ช่วงที่ใช้งานอยู่ {padding-left:30px;พื้นหลัง:url(images/button.gif) ไม่ทำซ้ำซ้าย -144px;font-weight:bold;}