การสร้าง Tab Navigation ด้วย CSS

ในบทเรียนนี้ เราจะมาเรียนรู้วิธีการสร้าง Tab Navigation อย่างง่ายด้วย CSS Tab Navigation เป็นส่วนประกอบ UI ที่ช่วยให้ผู้ใช้สามารถสลับระหว่างเนื้อหาที่แตกต่างกันภายในพื้นที่เดียวกัน ทำให้หน้าเว็บดูเป็นระเบียบและใช้งานง่ายขึ้น โดยในบทนี้ เราจะเน้นวิธีการสร้าง Tab Navigation แบบพื้นฐานโดยใช้ HTML และ CSS เท่านั้น

ก่อนที่เราจะเริ่มเขียนโค้ด เรามาทบทวนกันก่อนว่า Tab Navigation ทำงานอย่างไร โดยทั่วไปแล้ว Tab Navigation จะประกอบไปด้วย:

Tab Headers: ส่วนที่ผู้ใช้คลิกเพื่อเลือกเนื้อหาที่ต้องการดู
Tab Content: ส่วนที่แสดงเนื้อหาที่เกี่ยวข้องกับ Tab Header ที่เลือก

ในบทเรียนนี้ เราจะใช้ radio buttons และ :checked pseudo-class ในการควบคุมการแสดงผลของ Tab Content วิธีนี้เป็นวิธีที่ง่ายและไม่ต้องใช้ JavaScript (ในกรณีพื้นฐาน) มาเริ่มกันเลย!

โครงสร้าง HTML

เริ่มต้นด้วยการสร้างโครงสร้าง HTML สำหรับ Tab Navigation ของเรา เราจะใช้ <input type="radio"> สำหรับ Tab Headers และ <div> สำหรับ Tab Content แต่ละส่วน

<div class="tab-container">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab 1</label>

  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab 2</label>

  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tab 3</label>

  <div id="content1" class="tab-content">
    <p>เนื้อหาของ Tab 1</p>
  </div>

  <div id="content2" class="tab-content">
    <p>เนื้อหาของ Tab 2</p>
  </div>

  <div id="content3" class="tab-content">
    <p>เนื้อหาของ Tab 3</p>
  </div>
</div>

คำอธิบาย:

<div class="tab-container">: เป็น container หลักที่ห่อหุ้ม Tab Navigation ทั้งหมด
<input type="radio">: เป็น radio button ที่ใช้สำหรับเลือก Tab แต่ละอัน สังเกตว่าเราใช้ name="tabs" เพื่อให้ radio buttons ทั้งหมดอยู่ในกลุ่มเดียวกัน (เลือกได้เพียงอันเดียว) และ checked attribute ใน radio button แรกเพื่อให้ Tab แรกถูกเลือกเป็นค่าเริ่มต้น
<label for="tab[number]">: เป็น label ที่เชื่อมโยงกับ radio button แต่ละอัน เมื่อคลิกที่ label จะเป็นการเลือก radio button นั้น
<div id="content[number]" class="tab-content">: เป็น container สำหรับเนื้อหาของ Tab แต่ละอัน

การจัดรูปแบบด้วย CSS

ตอนนี้เรามีโครงสร้าง HTML แล้ว เราจะมาจัดรูปแบบ Tab Navigation ของเราด้วย CSS

.tab-container {
  width: 500px; /* ปรับขนาดตามต้องการ */
  margin: 20px auto; /* จัดกึ่งกลาง */
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden; /* ป้องกัน content ล้น */
}

input[type="radio"] {
  display: none; /* ซ่อน radio button */
}

label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #eee;
  border-right: 1px solid #ccc;
  cursor: pointer;
  text-align: center;
  width: calc(100% / 3); /* แบ่งความกว้างเท่าๆ กัน */
  box-sizing: border-box; /* รวม padding และ border ใน width */
}

label:last-child {
  border-right: none; /* ไม่ต้องมี border ด้านขวาสำหรับ tab สุดท้าย */
}

.tab-content {
  padding: 20px;
  display: none; /* ซ่อน content ทั้งหมดเริ่มต้น */
}

/* แสดง content ที่เกี่ยวข้องเมื่อ tab ถูกเลือก */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

/* เปลี่ยนสีพื้นหลังของ label เมื่อถูกเลือก */
#tab1:checked + label[for="tab1"],
#tab2:checked + label[for="tab2"],
#tab3:checked + label[for="tab3"] {
  background-color: #ddd;
}

คำอธิบาย:

.tab-container: กำหนดขนาด, margin, border, และ overflow: hidden; เพื่อป้องกัน content ล้น container
input[type="radio"]: ซ่อน radio buttons จริงๆ เพราะเราจะใช้ labels เป็นตัวควบคุม
label: จัดรูปแบบ labels ให้ดูเหมือน tabs โดยกำหนด display: inline-block;, padding, background color, border, และ cursor: pointer;
.tab-content: ซ่อน content ทั้งหมดเริ่มต้นด้วย display: none;
#tab[number]:checked ~ #content[number]: นี่คือส่วนที่สำคัญที่สุด ใช้ :checked pseudo-class เพื่อตรวจสอบว่า radio button ถูกเลือกหรือไม่ และใช้ ~ (general sibling selector) เพื่อเลือก .tab-content ที่อยู่หลัง radio button ที่ถูกเลือก
#tab[number]:checked + label[for="tab[number]"]: ใช้ + (adjacent sibling selector) เพื่อเปลี่ยนสีพื้นหลังของ label ที่ถูกเลือก

ตัวอย่างการใช้งานจริง

ลองนำ Tab Navigation ไปใช้ในสถานการณ์จริง เช่น การแสดงข้อมูลเกี่ยวกับสินค้า:

<div class="tab-container">
  <input type="radio" id="description" name="product-tabs" checked>
  <label for="description">รายละเอียด</label>

  <input type="radio" id="specifications" name="product-tabs">
  <label for="specifications">สเปค</label>

  <input type="radio" id="reviews" name="product-tabs">
  <label for="reviews">รีวิว</label>

  <div id="content-description" class="tab-content">
    <p>รายละเอียดสินค้า: ... </p>
  </div>

  <div id="content-specifications" class="tab-content">
    <p>สเปคสินค้า: ... </p>
  </div>

  <div id="content-reviews" class="tab-content">
    <p>รีวิวสินค้า: ... </p>
  </div>
</div>

และ CSS ที่เกี่ยวข้อง (เพิ่มเติมจาก CSS ก่อนหน้า):

/* ปรับแต่งเพิ่มเติมตามความเหมาะสม */
.tab-container {
  width: 700px;
}

label {
  font-weight: bold;
}

ข้อผิดพลาดที่พบบ่อย

ลืมกำหนด name attribute ให้กับ radio buttons: ทำให้สามารถเลือก tabs ได้มากกว่าหนึ่งอัน
Id และ for attribute ไม่ตรงกัน: ทำให้การคลิกที่ label ไม่ได้เลือก radio button ที่ถูกต้อง
ลืมกำหนด display: none; ให้กับ .tab-content: ทำให้ content ทั้งหมดแสดงผลพร้อมกัน
CSS selector ไม่ถูกต้อง: ทำให้ content ไม่แสดงผลเมื่อเลือก tab

สรุป

ในบทเรียนนี้ เราได้เรียนรู้วิธีการสร้าง Tab Navigation อย่างง่ายด้วย CSS โดยใช้ radio buttons และ :checked pseudo-class วิธีนี้เป็นวิธีที่ง่ายและไม่ต้องใช้ JavaScript ในการควบคุมการแสดงผล อย่างไรก็ตาม หากต้องการฟังก์ชันการทำงานที่ซับซ้อนมากขึ้น เช่น การเปลี่ยน animation หรือการรองรับ accessibility ที่ดีขึ้น อาจจะต้องใช้ JavaScript เข้ามาช่วย

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน CSS Filters เพื่อปรับแต่งภาพและองค์ประกอบต่างๆ บนเว็บไซต์