การแปลงรายการที่มีลิงก์กราฟิกเป็นรายการแนวอินไลน์

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

ทำความเข้าใจกับการตั้งค่าเริ่มต้น

อันดับแรก มาดูโครงสร้าง HTML และ CSS ที่คุณอาจมีอยู่

โครงสร้าง HTML ตัวอย่าง

<ul id="topnav">
    <li id="topnav_galleries"><a href="#">แกลเลอรี</a></li>
    <li id="topnav_information"><a href="#">ข้อมูล</a></li>
</ul>

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

สไตล์ CSS ตัวอย่าง

#topnav_galleries a, #topnav_information a {
    background-repeat: no-repeat;
    text-indent: -9000px;
    padding: 0;
    margin: 0 0;
    overflow: hidden;
    height: 46px;
    width: 136px;
    display: block;
}
#topnav { list-style-type: none; }
#topnav_galleries a { background-image: url('image1.jpg'); }
#topnav_information a { background-image: url('image2.jpg'); }

ข้อกำหนดปัญหา

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

วิธีแก้ปัญหาทีละขั้นตอน

1. ปรับ CSS สำหรับการแสดงผลแบบอินไลน์

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

CSS ที่อัปเดตแล้ว

ด้านล่างนี้คือโค้ด CSS ที่จำเป็นที่จะต้องนำไปใช้:

#topnav {
    overflow: hidden; /*clearfix สำหรับองค์ประกอบที่ลอยอยู่*/
}
#topnav li {
    float: left; /* จัดรายการให้อยู่ในแนวนอน */
}

• คำอธิบาย: กฎ float: left; ให้อนุญาตให้แต่ละรายการในรายการ ‘ลอย’ อยู่ติดกันแทนที่จะจัดเรียงซ้อนกัน
• Overflow Hidden: คุณสมบัตินี้ถูกเพิ่มให้กับ #topnav เพื่อให้แน่ใจว่าภาชนะรับรู้ถึงองค์ประกอบลูกที่ลอยอยู่ในลักษณะที่ถูกต้อง

2. แก้ไขปัญหาความเข้ากันได้ใน Internet Explorer

หากคุณต้องการเบราว์เซอร์ที่รองรับในวงกว้างยิ่งขึ้น โดยเฉพาะสำหรับเวอร์ชันเก่าของ Internet Explorer ควรพิจารณาเพิ่มคุณสมบัติ zoom:

CSS เพิ่มเติมสำหรับความเข้ากันได้

#topnav {
    zoom: 1; // กระตุ้น hasLayout ใน IE
}

• ทำไม??: คุณสมบัติ zoom: 1; จะกระตุ้น ‘hasLayout’ ซึ่งช่วยแก้ไขปัญหาเกี่ยวกับรายการที่ลอยออกนอกภาชนะ

สรุปผลงานของคุณ

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

#topnav {
    overflow: hidden;
    zoom: 1; /* ตัวเลือกสำหรับการแปลง IE */
}
#topnav li {
    float: left;
}
``

## สรุป

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

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