บทนำ: บทความนี้จะสอนคุณทีละขั้นตอนถึงวิธีการสร้างเมนูการนำทางประตูบานเลื่อนมาตรฐานแบบแยกสามชั้นที่ยอดเยี่ยมทีละขั้นตอน จากแนวคิด หลักการ ขั้นตอน และวิธีการต่างๆ อาจกล่าวได้ว่า "ทุกสิ่งเป็นไปได้" คุณคือฉันเชื่อว่าหลังจากอ่านบทความนี้แล้ว คุณสามารถสร้างเมนูนำทางมาตรฐานที่สวยงามสุด ๆ ของคุณเองได้ เมนูนี้ไม่มีโครงสร้างซ้ำซ้อนและเอื้อต่อการส่งออกข้อมูลแบบไดนามิก เหมาะมากสำหรับใช้ในโครงการทั่วไป บทช่วยสอนนี้พูดถึงหลักการพื้นฐานของประตูบานเลื่อน ฉันเชื่อว่ามันจะเป็นประโยชน์กับเพื่อน ๆ ที่ยังคลำหาอยู่บนถนนสายนี้! แน่นอนหากมีข้อผิดพลาดหรือปัญหาใด ๆ คุณสามารถหารือได้
เป้าหมายในอุดมคติของเมนูนำทางนี้คือ
มาปรับใช้เมนูในอุดมคตินี้ทีละขั้นตอนกัน!
ฉันมักจะเห็นเพื่อนหลายคนทำเมนูในฟอรั่ม แต่พูดตามตรง โครงสร้างนั้นซ้ำซาก หรือมีรูปแบบ แต่ไม่มีจิตวิญญาณ หรือมีจิตวิญญาณแต่ไม่ปรากฏ และสิ่งที่เราอยากสร้างตอนนี้คือเมนูที่ดีที่สุด ไม่ว่าคุณจะเป็นมือใหม่หรือทหารผ่านศึก คุณควรพบสิ่งที่มีประโยชน์ในบทช่วยสอนนี้
โครงสร้างของเมนูในอุดมคติควรจะสะอาด ปราศจากความซ้ำซ้อน และแยกจากกัน อย่างไรก็ตาม ด้วยเหตุผลหลายประการ สิ่งที่ไม่มีความหมายมากมายจะถูกเพิ่มเข้าไป และในท้ายที่สุดก็จะห่างไกลจาก "ความสะอาด" มากขึ้นเรื่อยๆ . ดังนั้นก่อนทำเมนูจึงมีหลักการบางประการที่ต้องคำนึงถึงตลอดกระบวนการผลิตทั้งหมด และไม่สามารถถูกขัดขวางด้วยแรงภายนอกใดๆ ได้
โครงสร้าง:
ในความคิดของฉัน เมนูมาตรฐานในอุดมคติควรมีโครงสร้างดังต่อไปนี้:
โครงสร้างดั้งเดิมของเมนูพร้อมใช้งานแล้ว คุณจะเห็นว่าไม่มีแท็กที่ไม่มีความหมายอยู่ในนั้น มาดูในเบราว์เซอร์กันดีกว่า ง่ายๆ เลย มันเป็นแค่ข้อความต้นฉบับ คล้ายๆ กับเมนูที่เราสั่งอาหารในร้านอาหารนั่นแหละ . จุดเล็กๆ! โอ้พระเจ้า ห่างไกลจากเมนูสวยๆ ของเราเหลือเกิน!
สไตล์:
ตอนนี้มันเป็นเพียงโครงกระดูก มาตกแต่งให้สวยงามเล็กน้อยและเพิ่มสไตล์ที่เรียบง่ายกันดีกว่า
เอาล่ะ มาเพิ่มสไตล์กันดีกว่า!
ดูสิ เราบรรลุเป้าหมายเล็กๆ ของเราแล้ว
ตอนนี้โครงกระดูกเข้าที่แล้ว ขั้นตอนต่อไปคือการใส่เสื้อผ้าสวยๆ ให้กับแต่ละเมนู
เพื่อให้เป็นไปตามข้อกำหนดแรก คุณต้องมีกระดุมสวยๆ และวาดด้วยตัวเองก่อน โอ้ ฉันไม่ใช่ศิลปิน มันเป็นเรื่องยาก! อย่างไรก็ตาม อย่าใจร้อนเกินไป อินเทอร์เน็ตมีมากมายจนมีสิ่งมหัศจรรย์มากมาย (น้ำตากำลังจะไหล...) ซอร์สโค้ดของปุ่ม: http://bbs.blueidea.com/thread-2860891-1-1.html
ด้วยซอร์สโค้ดของปุ่มที่ออกแบบไว้ มันช่วยบันทึกส่วนการออกแบบได้ดีมาก แต่เพื่อให้เป็นปุ่มสามสถานะ เราจำเป็นต้องแก้ไขปุ่มนี้ คุณเห็นเป้าหมายที่เจ็ดแล้วหรือยัง เราจะสร้างปุ่มแบบปรับได้ ดังนั้นเราจึงจำเป็นต้องดำเนินการบางอย่างกับปุ่มนี้
เราแสดงปุ่มทั้งสามนี้เป็นสามสถานะ: เมื่อเลื่อนเมาส์ออกไป หลังจากคลิก และเมื่อเลื่อนเมาส์ขึ้น ในการสร้างเมนูประตูบานเลื่อน คุณต้องตัดปุ่มจากตรงกลาง วางไว้ทางด้านซ้ายและภาพทางด้านขวาคือวางไว้ทางด้านขวา หากต้องการปรับให้เข้ากับความยาวของข้อความ ความกว้างของเลเยอร์นี้จะต้องขยายออกไปเล็กน้อย อย่างไรก็ตาม รูปภาพนี้มีเอฟเฟกต์เงาที่ซับซ้อนมากและไม่สามารถยืดออกแบบไม่ได้ตั้งใจได้ มิฉะนั้นเอฟเฟกต์จะไม่เหมือนเดิม ลองตัดเปิดตรงกลางแล้วยืดด้านซ้ายของรูปภาพทางด้านขวาไปข้างหน้า ดังแสดงในรูปที่ 2
ภาพที่ 1
ขั้นแรกเราจึงตัดมันเป็นหกส่วนตามที่แสดงในภาพ จากนั้นจึงรวมรูปภาพทั้งหกนี้เข้าด้วยกัน ทำไมจึงเป็นเช่นนี้? มาดูหลักการของ CSS Sprite กัน! ฉันจะไม่ลงรายละเอียดที่นี่ คุณสามารถอ่านบทความอื่นของฉัน "การสร้างโป๊กเกอร์การ์ดซีรีส์ 1 --- เทคโนโลยีการเพิ่มประสิทธิภาพพื้นหลังภาพ CSS Sprites"
รูปที่ 2
ในภาพด้านบน รูปภาพแรกและรูปภาพที่สองจะสร้างสไตล์เมนูปกติ (สไตล์เริ่มต้น) รูปภาพที่สามและสี่จะสร้างสไตล์การเลื่อน และรูปภาพที่ห้าและหกจะสร้างสไตล์รายการเมนูที่ถูกคลิก
เราแยกภาพเงาออกมาโดยเฉพาะและทำให้มันกลายเป็นภาพพื้นหลังขนาดเล็ก
กราฟิกที่ต้องการใน
รูปที่ 3
พร้อมแล้ว ต่อไปมาเพิ่มรูปภาพนี้ในรายการเมนูปุ่มต้องมีสองภาพจึงจะแสดงได้ ทุกคนในโลกรู้ดีว่าแท็ก html สามารถเก็บภาพได้เพียงภาพเดียว (หากคุณพบว่าแท็กสามารถเก็บภาพได้สองภาพ โปรดบอกฉันให้ทันเวลา แล้วฉันจะเลี้ยงอาหารค่ำคุณ!) โอ้! แต่ละรายการในโครงสร้างเมนูของฉันมีสองแท็กพอดี แท็กหนึ่งคือ li และมีแท็ก A อยู่ด้วย ซึ่งสามารถใช้เพื่อเก็บรูปภาพซ้ายและขวาได้ Li ใช้เพื่อเก็บภาพทางด้านซ้าย และ A ใช้เพื่อเก็บภาพทางด้านขวา ฉันชื่นชมตัวเองจริงๆ ฉันสามารถคิดไอเดียดีๆ ออกมาได้ และฉันก็พอใจที่จะตามใจตัวเอง...
อย่ายุ่งนะพระเจ้า ถ้าฉันติดตั้งรูปภาพด้วยวิธีนี้ ฉันจะประสบความสำเร็จได้อย่างไร สถานะการเลื่อนเมาส์สามสถานะ? เราทุกคนควรรู้ว่ายกเว้น IE6 เบราว์เซอร์อื่นๆ ในปัจจุบันรองรับคลาสหลอก li:hover อย่างไรก็ตาม เพื่อให้เข้ากันได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด (นี่คือเป้าหมายที่ 8 ของเรา อย่าลืม!) วิธีการนี้ใช้ไม่ได้ผล IE6 สามารถใช้คลาสหลอกแบบโฮเวอร์กับแท็ก A เท่านั้นและจะไม่สนใจแท็กอื่น ๆ !
เนื่องจาก IE6 สามารถใช้คลาสหลอกแบบโฮเวอร์บนแท็ก A เท่านั้น ดังนั้นหากเราต้องการสร้างเมนูประตูเลื่อนที่ปรับเปลี่ยนได้ เราจำเป็นต้องทำการเปลี่ยนแปลงโครงสร้างบางอย่าง ดูเหมือนว่าเราจะสามารถเพิ่มแท็กอื่นให้กับแท็ก A ได้เท่านั้น โครงสร้างของเมนูก็จะประมาณนี้ (หมายเหตุ: นี่คือจุดที่โครงสร้างเริ่มเปลี่ยนแปลง แม้ว่าฉันต้องการหลีกเลี่ยงสิ่งนี้มาโดยตลอด แต่ดูเหมือนว่าจะต้องเพิ่มแท็กนี้เพื่อให้ตรงตามข้อกำหนด)
เราได้เพิ่ม span คอนเทนเนอร์ให้กับแท็ก A ซึ่งรวมถึงเนื้อหาข้อความ ขณะนี้มีสองป้ายกำกับ ซึ่งสามารถเก็บรูปภาพได้สองรูป เราวางภาพที่ถูกต้องไว้ที่พื้นหลังของแท็ก A และจัดตำแหน่งไปทางขวา และวางภาพด้านซ้ายในแท็ก SPAN และจัดตำแหน่งไปทางซ้าย นี่จะแสดงรูปร่างของปุ่มที่สมบูรณ์
โชคดีที่แม้ว่าจะมีการเพิ่มแท็กพิเศษ แต่ก็ไม่ได้ไร้ความหมายโดยสิ้นเชิง
เอาล่ะ การเตรียมการของเราใกล้จะเสร็จแล้ว ได้เวลามอบเสื้อผ้าใหม่ให้กับเมนูแล้ว
หากเราต้องการสร้างเมนูที่มี Adaptive width เราไม่สามารถตั้งค่าความกว้างของเมนูได้ ดังนั้นเราจึงไม่สามารถกำหนดความกว้างแล้วลอยไปทางซ้ายเหมือนที่เรามักจะทำเมื่อสร้างเมนูแนวนอนที่มีความกว้างคงที่ หากเป็นกรณีนี้ เมื่อความกว้างของแต่ละรายการเมนูแตกต่างกัน คุณต้องกำหนดความกว้างของแต่ละรายการแยกกัน จากนั้นคุณต้องกำหนด ID หรือ CLASS สำหรับแต่ละรายการเมนู และวิธีการนี้ไม่เอื้อต่อการวนซ้ำแบบไดนามิก เอาต์พุตของโปรแกรมพื้นหลัง
สิ่งที่เราต้องการคือการจัดเรียงรายการเมนูแต่ละรายการจากซ้ายไปขวาเหมือนองค์ประกอบแบบอินไลน์ จากนั้นเราต้องการให้เมนูแสดงแบบอินไลน์ ตกลง ลองใช้ display:inline นี่เป็นคุณสมบัติที่มีประโยชน์มาก: การจัดเรียงแบบแยกวิเคราะห์ สามารถตอบสนองความต้องการขั้นพื้นฐานของเรา: จัดเรียงองค์ประกอบฉลากจากซ้ายไปขวาเป็นแถวโดยอัตโนมัติ และความกว้างของแต่ละรายการอาจแตกต่างกัน
หากการใช้แอตทริบิวต์ข้างต้นสามารถตอบสนองความต้องการของเราได้จริงๆ จะไม่มีเนื้อหาข้อความที่มีลักษณะดังต่อไปนี้
แม้ว่าแอตทริบิวต์นี้จะสามารถตอบสนองความต้องการพื้นฐานของโครงการของเราได้ แต่ก็มีจุดอ่อนที่ร้ายแรงมาก: ไม่สามารถกำหนดค่าความกว้างและความสูงได้ หากคุณไม่เชื่อ คุณสามารถลองใช้ได้ จะปรากฏเป็นความสูงและความกว้างเริ่มต้นของข้อความเท่านั้น โดยจะถูกซ่อนโดยอัตโนมัติหลังจากเกินค่าความกว้างและความสูงนี้ ด้วยวิธีนี้ ฉันมีภาพพื้นหลังที่นี่ เพื่อแสดงผลของภาพนี้ เราจำเป็นต้องให้ความกว้างและความสูง ซึ่งหมายความว่าเราไม่สามารถบรรลุผลสำเร็จได้ ซึ่งน่าหงุดหงิด! โชคดีที่มีคุณลักษณะอื่น: display:inline-block; ประสิทธิภาพของมันคือสิ่งที่เราต้องการ
แต่... คุณลักษณะนี้มีจุดอ่อนร้ายแรงเช่นกัน โดยเบราว์เซอร์ขั้นสูงเช่น FF3 เท่านั้นที่สามารถรับรู้ได้ เบราว์เซอร์อื่นๆ ทำได้เพียงเลี่ยงเท่านั้น เอ่อโอ้! ดังนั้นการรวมมาตรฐานเบราว์เซอร์เข้าด้วยกันจึงมีความสำคัญเพียงใด! ดูเหมือนว่า HACK จะเป็นหนทางบรรเทาทุกข์ที่เราไม่มีทางเลือกนอกจากต้องทำ
โชคดีที่ผู้เชี่ยวชาญบางคนพบวิธีแก้ปัญหาแล้ว โปรดอ่านบทความทั้งสองนี้ก่อน
บทช่วยสอนที่เกี่ยวข้อง:
" สองตัวอย่างของการใช้งาน display:inline-block " (Qin Ge)
เราทุกคนเข้าใจหลักการของ
" Inline-block Attributes for Simulating Compatible " (Yi Fei)
เราสามารถสร้างเมนูแบบปรับได้ตามเทคนิคที่ให้ไว้ในบทความทั้งสองข้างต้นขั้นแรกเรามาเขียนสไตล์ของรูปภาพทางด้านขวา ซึ่งใช้กับแท็กโหนดย่อย A ขององค์ประกอบ li
ขั้นแรกเราตั้งค่า display:inline-block จากนั้นเราใช้ช่องว่างภายในเพื่อขยายระยะห่างด้านข้าง ให้พื้นที่บางส่วนเพื่อเติมเต็มภาพ โปรดทราบว่าเส้นทางรูปภาพที่นี่จะถูกแทนที่ด้วยเส้นทางของคุณเอง จากนั้นตั้งค่าสไตล์อื่นๆ เช่น การลบขีดเส้นใต้ สีฟอนต์ ขนาดฟอนต์ ฯลฯ ตั้งค่ารูปภาพให้ชิดขวา
รูปภาพทางด้านซ้ายของปุ่มถูกวางไว้ในองค์ประกอบ SPAN รองรับมัน เปิดความกว้างและความสูง
จากนั้นตั้งค่ากลับเป็นโหมดอินไลน์อินไลน์ เพื่อทริกเกอร์คุณลักษณะ haslayout ของ IE
ในโค้ดข้างต้น เรายังเห็นแอปพลิเคชัน HACK *padding-bottom: 0; และ *padding-top: 0; ซึ่งใช้เพื่อแก้ไขเอฟเฟกต์ต่างๆ ของเบราว์เซอร์ เช่น IE และ FF หากคุณไม่เชื่อฉันคุณสามารถลบมันออกและดูว่ามันจะมีผลกระทบอะไรบ้าง
เอาล่ะ ถึงเวลาเขียนเอฟเฟกต์เมื่อเลื่อนเมาส์ไป
ต่อไปคือเอฟเฟกต์หลังจากคลิกเมาส์
ดูเหมือนว่าคุณจะทำเสร็จแล้ว ตรวจสอบในเบราว์เซอร์ที่แตกต่างกัน ดูเหมือนว่าจะสามารถบรรลุผลที่น่าพอใจได้ ด้านล่างเป็นภาพหน้าจอ:
รูปที่ 4
เมนูประตูบานเลื่อนเวอร์ชัน CSS ล้วนพร้อมแล้ว