ใครที่เคยทำเว็บให้รองรับมือถือ (Responsive) น่าจะเคยเจอปัญหาว่า การกดลิงก์ต่างๆ บนเว็บในมือถือนั้น จะมีการหน่วงเวลา 300 ms (0.3 วินาที) เพื่อป้องกันกรณีเผลอไปโดนลิงก์ในขณะที่รูดหน้าจออยู่ ทำให้การสร้างระบบเมนูบนมือถือ ไม่สามารถทำให้ลื่นได้เหมือนการกดเมนูในแอพต่างๆ
ระดับโลกเองก็ยังแก้ปัญหานี้กันไม่ได้เยอะนัก ทั้ง Bootstrap ที่ยังหน่วงอยู่ หรือแม้แต่ jQuery Mobile ที่แทบไม่เห็นใครใช้แล้ว
มี Foundation ที่เร็วใช้ได้ เพราะว่าใช้เทคนิค FastClick ที่ทำให้ลิงก์ทุกที่ในเว็บ ไม่หน่วง 300ms – แต่เมื่อก่อนผมเจอปัญหา เวลาเผลอรูดหน้าจอแล้วมันดันนับเป็นคลิกเลยไม่ได้ใช้ต่อ (แม้ว่าโค้ดล่าสุดนี้จะแก้แล้ว โดยให้เราระบุว่าอะไรคือ Element ที่ต้องการ FastClick)
ส่วนทางอื่น ถ้าใช้เป็นปุ่ม Select กดแล้วมีให้เลือกเมนู ก็พอได้ แต่มันปรับแต่งหน้าตาไม่ได้ แต่ละ OS ก็แสดงผลไม่เหมือนกัน และเวลาต้องการปิดเฉยๆ (ไม่เลือกซักเมนู) ก็ไม่ง่ายนัก
เลยไปไล่ดูว่า มีเจ้าไหนที่ทำแบบที่ต้องการได้บ้าง ค้นคำว่า Responsive Menu ก็จะเจอ ลิงก์นี้ ที่รวมไว้เยอะโพดๆ กับเจอ ลิงก์นี้ ที่นำเสนอแนวทางการใช้แบบต่างๆ อ่านเพลินยิ่งนัก (แนะนำๆ)
ลองไปลองมา มาประทับใจสุด ที่ Responsive-Nav ซึ่งขนาดเล็กจิ๋ว (6K ถ้า Gzip ด้วยก็ 1K) ไม่ต้องพึ่ง jQuery ด้วย เร็วปรู๊ดปร๊าดและดีไซน์ได้ดั่งใจ ก็เลยเอามาใช้กับ MennStudio แห่งนี้ก่อนเรย อยากรู้ว่าเป็นยังไง ลองเปิดเว็บนี้บนมือถือ เทียบกับเว็บอย่าง Time หรือ Bootstrap ดูก็ได้ครับ (ขี้อวดเนาะ :P)
จบบล็อกด้านเทคนิคประจำวันพฤหัสไว้แต่เพียงเท่านี้ พอเจอโค้ดที่ใช่ มันก็สั้นๆ ง่ายๆ นะ แต่ตอนไม่เจอนี่ หามาเป็นแรมปีเลย
