[CSS] Equal Width Menu (ทำเมนูให้กว้างเท่ากัน)

Equal Width Menu หรือการทำให้เมนูกว้างเท่ากันนั้น แต่ละคนคงมีวิธีทำที่แตกต่างกันไป ผมก็ไปเจอมาวิธีนึงซึ่งง่ายๆ เลย ใช้แค่ CSS ก็เรียบร้อยแล้ว

ใช้ display: table

วิธีนี้ก็เป็น 1 ในผลพลอยได้ที่เราไม่ต้องไปห่วงอีเจ้า IE6 ดูได้จาก Can I use : CSS Table display เจ้าตัว display: table เนี่ย มันสนับสนุนแบบเต็มรูปแบบใน IE8 ขึ้นไป โดยเราจะนำมาประยุกต์ใช้งานกับการทำเมนู

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”AJDfh” default_tab=”result”]See the Pen Equal Width Menu by Sittipong Wiboonsirichai (@rabbitinblack) on CodePen.[/codepen_embed]

การทำเมนูด้วยวิธีนี้ เป็นการประยุกต์คุณสมบัติการแสดงผลของตารางมาใช้งาน เพียงแค่เราไม่ได้ใช้ tag <table> เท่านั้นเอง

โดย display: table เปรียบเสมือน <table>
และ display: table-cell เปรียบเสมือน <td>

อีกตัวที่สำคัญคือ table-layout: fixed โดยปรกติแล้ว tag <table> จะมีค่าพื้นฐานเป็น table-layout: auto โดยทั้งสองอย่างแตกต่างกันที่

table-layout: auto จะปรับความกว้างของแต่ละช่องตามเนื้อหาในช่องนั้นๆ
table-layout: fixed ความกว้างแต่ละช่องจะถูกแบ่งให้อย่างเท่าๆ กัน ถ้าเนื้อหาในช่องนั้นมีความยาวมากกว่าความกว้างของช่อง ช่องนั้นจะถูกเพิ่มความสูงแทน

แต่วิธีนี้เองก็มีข้อเสียตรงที่ ถ้าเมนูของเรามีช่องไหนที่สูงมากกว่าช่องอื่น ตอน hover จะเจอช่องว่างในช่องที่สูงน้อยกว่า