[ตอนที่ 5] เวิร์คช้อปการสร้างเว็บไซต์อย่างง่ายด้วยคชสาร

ในตอนที่ 4 เราได้ทำการสร้างเมนูเป็นที่เรียบร้อยแล้ว แต่เมนูมันยังดูไม่เหมือนเมนูสักเท่าไร เพราะเรายังไม่ได้กำหนค่าให้มันแสดงผลเป็นเมนูเลย ซึ่งวิธีกำหนดค่าสามารถทำได้โดยการระบุว่ามันเป็นเมนูใน HTML และ GCSS จะทำการแปลงให้มันเป็นเมนูเอง

เปิดไฟล์ index.html มาแก้ไข
<nav class="topmenu"><ul><li>{TOPMENU}</li></ul></nav>
<div>{CONTENT}</div>

คำสั่งที่เราจะเพิ่มลงไปเพื่อให้มันแสดงผลเป็นเมนูคือ class=topmenu ซึ่งต้องใส่ไว้ที่ nav เท่านั้นนะครับ เสร็จแล้วลองเรียกเว็บไซต์ดู
จะเห็นว่ามันแสดงผลเป็นเมนูแล้ว แต่ตอนนี้เมนูของเรายังไม่เป็น Responsive ซึ่งการที่จะเป็น Responsive ที่สมบูรณ์ได้จะต้องประกอบด้วย 3 ส่วน
  1. เว็บไซต์ต้องเป็น Responsive ก่อน ซึ่งคำสั่งให้คชสารแสดงผลเว็บไซต์แบบ Responsive คือการกำหนดค่า class=responsive ให้กับ body
  2. อย่างที่สอง กำหนดค่า class=responsive ให้กับเมนูด้วย
  3. อย่างที่สาม เมนูแบบ Responsive จะสมบูรณ์ต้องใช้ร่วมกับ GAjax และ GDDMenu ซึ่งเป็น Javascript หลักของคชสารที่ติดตั้งมาพร้อมแล้ว
<!DOCTYPE html>
<html>
  <head>
    <title>{TITLE}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{WEBURL}js/gajax.js"></script>
    <script src="{WEBURL}js/ddmenu.js"></script>

  </head>
  <body class="responsive">
    <nav id=topmenu class="topmenu responsive"><ul>{TOPMENU}</ul></nav>
    <div>{CONTENT}</div>
    <script>
      new GDDMenu('topmenu');
    </script>

  </body>
</html>
  • จากโค้ดจะเห็นว่าผมได้เขียนคำสั่งเพื่อแทรก Javascript โดยตรง ซึ่งจริงๆแล้วเราสามารถแทรกด้วย View ก็ได้ เหมือนคำสั่ง $view->addCSS() โดยใช้ $view->addJavascript() แทน
  • new GDDMenu('topmenu'); เป็นคำสั่งสร้างเมนูแบบ Responsive ซึ่งอาร์กิวเมนต์ที่ต้องระบุคือ id ของเมนู (topmenu)
เสร็จแล้วลองเปิดเว็บไซต์ดูอีกที พร้อมกับย่อเว็บไซต์ลงให้เหลือขนาดของมือถือด้วย
0SHAREFacebookLINE it!