ทำ Responsive Menu ง่าย ๆ ด้วย Flexbox

บทความนี้จะเป็นบทความสั้นๆ ที่ว่าด้วยเรื่องการนำเอา Flexbox มาลองประยุกใช้กันดูนะครับ มาเริ่มกันเลยดีกว่า

Flexbox คืออะไร

Flexbox หรือชื่อจริงของมันก็คือ Flexible Box ความหมายก็ตามชื่อล่ะครับ
มันคือ properties หนึ่งของ CSS3 ที่มีความยืดหยุ่นสูง มีความสามารถหลากหลาย เช่น การจัดเรียง item จะเรียงเป็นแนวนอน, เรียงในแนวตั้ง, เรียงจากซ้ายไปขวา, ขวาไปซ้าย หรือจะเป็นการสลับที่ของ item ก็ทำได้ครับ และความสามารถต่าง ๆ อีกมากมาย

แต่ในที่นี้ผมจะพูดถึงแค่การประยุกใช้การจัดแนวนอนเป็นแนวตั้งนะครับ
โดยเราจะมาลองทำเมนูด้วยคอนเสปง่ายๆครับ คือ เมนูจะเรียงกันในแนวนอน
แต่จะเรียงกันเป็นแนวตั้งเมื่อหน้าจอเล็กกว่า 600px ครับ
เพื่อไม่เป็นการเสียเวลา มาลองดูตัวอย่างกันดูดีกว่าครับ

ตัวอย่าง menu

ลองๆ ย่อๆ ยืดๆ ขยายๆ browser กันดูนะครับ

โค้ด HTML ก็จะลองทำเมนูแบบธรรมดาๆครับ

<ul class="menu">
  <a href="#"><li>Home</li></a>
  <a href="#"><li>Products</li></a>
  <a href="#"><li>About Us</li></a>
  <a href="#"><li>Contact</li></a>
</ul>

กำหนด class ชื่อ menu ที่มี item ด้านในเป็นลิงค์ต่างๆเหมือนเว็บทั่วๆไป

โค้ด CSS ที่สำคัญจะอยู่ที่ class menu ครับ

.menu {
  list-style: none;
  margin: 0;
  background: deepskyblue;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
}

โดยที่สำคัญคือตรง display เราจะกำหนดเป็น flex ครับ เพื่อประกาศให้โลกรู้ว่า item ใดๆก็ตาม ที่อยู่ภายใต้ class menu จะเป็น flexible item นะ นอกนั้นเป็นการตกแต่งทั่วไปครับ

โค้ด CSS ที่สำคัญอีกจุดคือ

@media all and (max-width: 600px) {
  .menu {
    -webkit-flex-flow: column ;
    flex-flow: column ;
    padding: 0;
  }

ตรงนี้จะบอกว่าเมื่อ หน้าจอมีขนาด 600px หรือเล็กกว่านั้น class menu จะเปลี่ยนไปครับ โดยให้ดูที่ flex-flow:column; ครับ ตรงนี้จะเป็นการสั่งให้ทุก item ใน class menu เรียงกันเป็นแนวตั้งแทน (โดยปกติ ค่าdefault มันจะเป็น row ครับเป็นเหตุผลที่ เมื่อเราไม่สั่งมัน มันจึงเรียงกันในแนวนอนครับ) นอกนั้นก็เป็นการตกแต่งทั่วไป เหมือนเดิมครับ

ข้อควรระวังนะครับ เป็นเรื่องปกติของ CSS3 ครับ ที่จะมี browser บางตัวที่จะแสดงผลแปลกๆ(น่าจะรู้กันเน๊าะ บราวเซอร์ที่คุณก็รู้ว่าใครน่ะ ฮ่าๆๆๆ ) เอาเป็นว่า browser ที่สามารถใช้งาน flex ได้อย่างไม่มีปัญหาก็ตามภาพด้านล่างล่ะครับ

browser ที่ใช้ได้

เท่านี่แหละครับ บทความสั้นๆเรื่องการประยุกใช้ความสามารถ flex ใน css3 ง่ายๆใช่มั้ยครับ หวังว่าท่านผู้อ่านจะได้รับประโยชน์ไม่มากก็น้อย สำหรับวันนี้ ขอบคุณและ สวัสดีครับ ^^