เทคโนโลยีประตูบานเลื่อนใน CSS

ความก้าวหน้าที่มักกล่าวถึงกันใน CSS คือความสามารถในการซ้อนภาพพื้นหลัง เพื่อให้สามารถเลื่อนทับกันเพื่อสร้างเอฟเฟกต์พิเศษได้ ตามกฎปัจจุบันของ CSS 2.0 ภาพพื้นหลังแต่ละภาพต้องมีองค์ประกอบ HTML ของตัวเอง ในหลายกรณี มาร์กอัปทั่วไปได้จัดเตรียมองค์ประกอบต่างๆ ไว้ให้เราใช้เป็นส่วนประกอบอินเทอร์เฟซทั่วไปแล้ว

ด้วยดีไซน์ที่เรียบง่ายเราก็ทำได้

นวัตกรรมมาจากไหน?

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

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

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

เทคโนโลยีประตูบานเลื่อน

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

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

หากเป้าหมายมีขนาดใหญ่ขึ้นและเกินความกว้างที่แสดงด้านบน รูปภาพจะถูกขยายออกจากกันเนื่องจากการเปลี่ยนแปลงขนาดข้อความและแบบอักษร ทำให้เกิดช่องว่างที่ไม่น่าดู สิ่งที่เราต้องตัดสินคือการคาดการณ์ว่าความสามารถในการขยายขนาดนี้จะเป็นอย่างไร ถ้าฉันเปลี่ยนขนาดตัวอักษรในเบราว์เซอร์ เป้าหมายจะใหญ่ขึ้นหรือไม่ ในทางปฏิบัติ อย่างน้อยเราควรประมาณขนาดตัวอักษรให้เพิ่มขึ้นเป็น 300% ภาพพื้นหลังยังต้องรองรับการเติบโตนี้ด้วย สำหรับตัวอย่างข้างต้น เราตั้งค่ารูปภาพด้านล่าง (ขวา) เป็น 400*150 พิกเซล และรูปภาพด้านบนเป็น 9*150 พิกเซล

หากยืดป้ายออก รูปภาพจะเลื่อนออกไป ทางเข้าประตูจะกว้างขึ้น และมองเห็นรูปภาพได้มากขึ้น:

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

วิธีการเดียวกันนี้จะนำไปใช้กับป้ายกำกับที่เรียกว่า "ปัจจุบัน" เมื่อเรามีรูปภาพสี่รูปนี้แล้ว (1, 2, 3, 4) เราก็สามารถเริ่มสร้างป้ายกำกับด้วยมาร์กอัปและ CSS ได้

การสร้างฉลาก

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

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

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

เราเริ่มต้นด้วยมาร์กอัปต่อไปนี้:

<div id="ส่วนหัว">
<ul>
<li><a href="#">บ้าน</a></li>
<li id="current"><a href="#">ข่าว</a></li>
<li><a href="#">ผลิตภัณฑ์</a></li>
<li><a href="#">เกี่ยวกับ</a></li>
<li><a href="#">ติดต่อ</a></li>
</ul>
</div>

ในความเป็นจริง #header div อาจมีโลโก้และช่องค้นหาด้วย สำหรับตัวอย่างของเรา เราต้องการย่อค่าของแต่ละไฮเปอร์ลิงก์ในห่วงโซ่สมอให้สั้นลง แน่นอนว่าค่าเหล่านี้ควรมีตำแหน่งของไฟล์หรือไดเร็กทอรีอย่างถูกต้อง

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

#ส่วนหัว {
ลอย:ซ้าย;
ความกว้าง:100%;
พื้นหลัง:สีเหลือง;
ขนาดตัวอักษร:93%;
ความสูงของเส้น: ปกติ;
-

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

#header ul {
ระยะขอบ:0;
ช่องว่างภายใน:0;
รายการสไตล์: ไม่มี;
-
#ส่วนหัวหลี่ {
ลอย:ซ้าย;
ระยะขอบ:0;
ช่องว่างภายใน:0;
}ตั้งค่าห่วงโซ่สมอเพื่อบังคับให้เรนเดอร์เป็นวัตถุบล็อก และเราสามารถควบคุมสไตล์ทั้งหมดได้โดยไม่ต้องกังวล:

#ส่วนหัว ก {
จอแสดงผล:บล็อก;
-

ต่อไป เราจะเพิ่มภาพพื้นหลังทางด้านขวาให้กับรายการ (การเปลี่ยนแปลงแสดงด้วยตัวหนา):

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

#ส่วนหัว ก {
จอแสดงผล:บล็อก;
พื้นหลัง:url("norm_left.gif")
ไม่ซ้ำบนซ้าย;
การขยาย:5px 15px;
-

ด้วยวิธีนี้เราจะได้เอฟเฟกต์ 2 สังเกตว่าฉลากของเรามีรูปทรงอย่างไร ที่นี่ ผู้ใช้ IE5/Mac จะประหลาดใจทันทีว่า "โอ้พระเจ้า แท็บของฉันซ้อนกันในแนวตั้งและขยายออกไปทั้งหน้าจอ!" ไม่ต้องกังวล เราจะช่วยคุณแก้ไขปัญหานี้ทันที ในตอนนี้ ให้ลองทำตามขั้นตอนด้านล่าง หรือหากสะดวก ให้สลับไปใช้เบราว์เซอร์อื่นชั่วคราว แล้วปัญหาเกี่ยวกับเวอร์ชัน IE5/Mac จะได้รับการแก้ไขทันที

ตอนนี้ภาพพื้นหลังสำหรับป้ายกำกับทั่วไปเสร็จสมบูรณ์แล้ว เราจำเป็นต้องแทนที่รูปภาพสำหรับป้ายกำกับ "ปัจจุบัน" เราบรรลุเป้าหมายนี้โดยการเพิ่ม id="current" และ anchor chain ให้กับรายการเป้าหมาย เนื่องจากไม่จำเป็นต้องเปลี่ยนรูปลักษณ์ของพื้นหลังนอกเหนือจากรูปภาพ เราจึงใช้ฟีเจอร์ภาพพื้นหลัง:

เราวางรูปภาพลงในพื้นหลังของคอนเทนเนอร์ #header (แทนที่พื้นหลังสีเหลืองดั้งเดิม) ย้ายรูปภาพพื้นหลังไปที่ด้านล่าง และเพิ่มสีพื้นหลังที่เกี่ยวข้องลงในพื้นที่ว่างเหนือรูปภาพ ในเวลาเดียวกัน ให้ลบช่องว่างภายในที่สืบทอดมาจากเนื้อหา และเพิ่มช่องว่างภายใน 10 พิกเซลที่ด้านบน ด้านซ้าย และด้านขวาของ ul:

#ส่วนหัว {
ลอย:ซ้าย;
ความกว้าง:100%;
พื้นหลัง:#DAE0D2 url("bg.gif")
ทำซ้ำ-x ด้านล่าง;
ขนาดตัวอักษร:93%;
ความสูงของเส้น: ปกติ;
-
#header ul {
ระยะขอบ:0;
การขยาย:10px 10px 0;
รายการสไตล์: ไม่มี;
-

เราทำเช่นนี้โดยการลดค่าช่องว่างภายในด้านล่างของห่วงโซ่สมอเรือปกติลง 1 พิกเซล (5px-1px=4px) จากนั้นจึงเพิ่มช่องว่างภายในที่ลบออกไปยังห่วงโซ่สมอ "ปัจจุบัน"

สัมผัสการตกแต่ง

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

ตอนนี้มุมต่างๆ โปร่งใสแล้ว รูปภาพด้านซ้ายจะแสดงผ่านมุมของรูปภาพทางด้านขวา เพื่อชดเชย เราได้เพิ่มช่องว่างภายใน (9px) ให้กับรายการแบบฟอร์มที่ตรงกับความกว้างของรูปภาพทางด้านซ้าย ตอนนี้เราได้เพิ่มช่องว่างภายในให้กับรายการแบบฟอร์มแล้ว เราจำเป็นต้องลบความกว้างเดียวกันออกเพื่อจัดข้อความให้อยู่ตรงกลาง (15px-9px=6px):

#ส่วนหัวหลี่ {
ลอย:ซ้าย;
พื้นหลัง:url("right.gif")
ด้านบนขวาไม่ซ้ำ;
ระยะขอบ:0;
การขยาย:0 0 0 9px;
-
#ส่วนหัว ก {
จอแสดงผล: บล็อก;
พื้นหลัง:url("left.gif")
ไม่ซ้ำบนซ้าย;
การขยาย:5px 15px 4px 6px;
-

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

#ส่วนหัวหลี่ {
ลอย:ซ้าย;
พื้นหลัง:url("left.gif")
ด้านบนซ้ายไม่ซ้ำ;
ระยะขอบ:0;
การขยาย:0 0 0 9px;
-
#header a, #header strong, #header span {
จอแสดงผล:บล็อก;
พื้นหลัง:url("right.gif")
ด้านบนขวาไม่ซ้ำ;
การขยาย:5px 15px 4px 6px;
-
#header #ปัจจุบัน {
ภาพพื้นหลัง:url("left_on.gif");
-
#header #ปัจจุบัน {
ภาพพื้นหลัง:url("right_on.gif");
ช่องว่างภายใน: 5px;
-

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

สำหรับปัญหาที่เหลือ เราจะทำการเปลี่ยนแปลงทั้งหมดพร้อมกัน: ทำให้ข้อความป้ายกำกับหนักขึ้น, เปลี่ยนข้อความในป้ายกำกับปกติเป็นสีน้ำตาล, เปลี่ยนข้อความป้ายกำกับ "ปัจจุบัน" เป็นสีเทาเข้ม, ลบการขีดเส้นใต้ของลิงก์ และสุดท้ายก็เปลี่ยนสีข้อความโฮเวอร์ เปลี่ยนเป็นสีเทาเข้มเหมือนเดิม หลังจากการเปลี่ยนแปลงหลายครั้ง เราจะดูผลกระทบจนถึงตอนนี้ 5

โซลูชั่นที่สอดคล้องกัน
หลังจาก Effect 2 ปัญหาหนึ่งที่เราพบคือในโหมดการเรียกดู IE5/Mac แต่ละแท็บจะขยายและใช้พื้นที่ความกว้างทั้งหมดของเบราว์เซอร์ เพื่อให้แท็บซ้อนกันในแนวตั้ง นี่ไม่ใช่สิ่งที่เราต้องการ

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

ปัญหาเกิดขึ้นในรูปภาพใน IE5/Mac เมื่อมีการแทรกองค์ประกอบวัตถุบล็อกความกว้างอัตโนมัติลงในองค์ประกอบแบบลอย เบราว์เซอร์อื่นๆ ยังคงย่อจำนวนโฟลตให้เหลือน้อยที่สุดและละเว้นองค์ประกอบบล็อกภายในคอนเทนเนอร์ แต่ IE5/Mac ไม่ปฏิบัติตามลักษณะการทำงานนี้ แต่จะขยายองค์ประกอบลอยและบล็อกวัตถุให้กว้างที่สุดเท่าที่จะเป็นไปได้แทน เพื่อแก้ไขปัญหานี้ เราจะลอย Anchor Chain พร้อมกัน แต่สำหรับ IE5/Mac เท่านั้น เพื่อไม่ให้เบราว์เซอร์อื่นต้องเสียไป ขั้นแรก เรากำหนดกฎการลอยตัวสำหรับห่วงโซ่สมอ จากนั้น เราใช้วิธีแสดงความคิดเห็นแบบแบ็กสแลชเพื่อซ่อนกฎนี้เพื่อให้มีผลกับ IE5/Mac เท่านั้น และไม่สนใจเบราว์เซอร์อื่นๆ:

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

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

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

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