การสร้างเว็บไซต์ให้รองรับการใช้งานจากอุปกรณ์หลากหลายรูปแบบมีความสำคัญมากในปัจจุบันนีั เพราะผู้ใช้งานไม่ได้ใช้งานคอมพิวเตอร์ตั้งโต๊ะในการใช้เว็บเพียงอย่างเดียวแล้ว แต่ผู้ใช้งานยังมีอุปกรณ์อื่นๆอีก เช่น Smart Phone และ Tablet เป็นต้น และอุปกรณ์พวกนี้มีปริมาณเพิ่มขึ้นอย่างมาก เมื่อเทียบกับคอมพิวเตอร์ตั้งโต๊ะ เพราะไม่ว่าใครๆก็สามารถมี Smart Phone ได้ ดังนั้นผู้พัฒนาเว็บไซต์ที่ดีจะต้องให้ความสำคัญเรื่อง Responsive (เว็บหน้าตาพอเหมาะเมื่อใช้บนอุปกรณ์ที่แตกต่างกันไป)
นอกจากการออกแบบหน้าตาเว็บให้พอเหมาะกับอุปกรณ์ที่ใช้แล้ว เรื่องเมนูก็สำคัญมาก เพราะบางที่หน้าเว็บที่เราออกแบบ Responsive ก็จริง แต่พอไปใช้บน Smart Phone เมนูต่างๆกับไม่ Responsive ตามหน้าตา ดังนั้นเราก็ต้องให้ความสำคัญตรงส่วนนี้ด้วย ซึ่งหากเรายังเป็นมือใหม่ ไม่เชี่ยวชาญ CSS อาจจะไม่สามารถทำ Menu มาใช้เองได้ ก็สามารถศึกษาจาก Opensource และดาวน์โหลดมาใช้งานได้ ซึ่งโพสนี้ผมได้นำมาเสนอถึง 8 แนวทางในการทำ Responsive Navigation Menu ดังนี้
1.Responsive Nav JS library like jQuery for it to work. Demo
2. Bootstrap Navs and Navbar | Examples
3. menu-aim | Demo ตัวนี้คล้ายกับเมนูของ amazon.com
5. FlexNav | Demo ตัวนี้ซัพพอร์ตตั้งแต่ IE7
6. TinyNav.js | Demo
7. Pushy | Demo support old browsers like IE7 to IE9.
ชอบแบบไหนเลือกใช้กันดูให้เหมาะสมกับเว็บไซต์ของเราครับ
