การใช้งานเมนูของ GCMS

GCMS มีเมนูมาตรฐานอยู่ 3 แบบ ซึ่งสามารถนำมาใช้งานได้ แต่เนื่องจาก GCMS มีการใช้งานร่วมกับ GCSS (CSS Frame Work) ดังนั้น เราจึงสามารถใช้งานคำสั่งของ GCSS ในการกำหนดรูปแบบของเมนูให้เป็นไปตามมาตรฐานได้ โดยที่อาจไม่ต้องเขียน CSS เพิ่ม

<nav class="topmenu|sidemenu responsive">
    <ul>
        <li><a href="url1"><span>เมนู 1</span></li>
        <li><a class=menu-arrow><span>มีเมนูย่อย</span>
            <ul>
                <li><a href="url2"><span>เมนูย่อย 1</span></li>
            </ul>
           </li>
    </ul>
</nav>

เมนูที่ GCSS สนับสนุนมีทั้งหมด 2 แบบ ครับ ได้แก่ เมนูแบบแถบ (เหมาะสำหรับแสดงที่ส่วนหัวของเว็บไซต์) และเมนูแบบกล่อง ที่นิยมใช้แสดงบน Sidebar และนอกจากนี้เมนูทั้งสองแบบ ยังสนับสนุนการแสดงผลแบบ Responsive อยู่แล้วด้วย ซึ่งโครงสร้างของเมนูทั้งสองแบบ จะมีลักษณะเหมือนๆกัน ต่างกันแค่ class ที่นำมากำหนดเพื่อให้รู้ว่าเป็นเมนูไหนเท่านั้น และยังสนับสนุนเมนูที่มีเมนูย่อยอีกด้วย

• topmenu ชื่อก็บอกว่าเป็นเมนูระดับบนสุดครับ เมนูนี้จะสนับสนุน Responsive เต็มรูปแบบ โดยเมื่ออยู่บนมือถือ จะถูกปรับให้เป็นเมนูแบบ Dropdown โดยอัตโนมัติ (เมนูแบบ Responsive ต้องใช้ร่วมกับ Javascript เพื่อให้มันสามารถแสดงผลได้สมบูรณ์)
• sidemenu เหมาะสำหรับใช้ทำเมนูข้างครับ (เมนูทั้งสองแบบสามารถใช้แทนกันได้ เพราะบางคนอาจดีไซน์ไม่ให้เว็บไซต์มีเมนูด้านบน) โดยปกติแล้วเมนูข้างถ้าไม่มีเมนูย่อยก็ไม่จำเป็นต้องสนับสนุน Responsive เพราะมันสามารถแสดงผลได้อย่างไม่มีปัญหา
• responsive ใช้สำหรับระบุให้เมนูทั้งสองแบบตามด้านบน แสดงผลในแบบ Responsive ได้

สำหรับเมนูบนสุด หากต้องการให้เป็น Responsive สมบูรณ์แบบ ต้องใส่คำสั่ง Javasctipt ที่ท้ายเว็บก่อนปิด body ตามนี้ด้วย

<script>
    new GDDMenu('nav_id');
</script>

โดยที่ nav_id จะต้องแทนที่ด้วย id ของ nav ของเมนูที่ต้องการให้เป็น responsive

นอกจากนี้หากเมนูเท่าที่เตรียมไว้ให้ยังไม่เพียงพอกับความต้องการ ยังสามารถใช้ Widget Textlinks ในการสร้างเมนูเพิ่มเติมได้อีกด้วย (โดยเลือกประเภทของลิงค์เป็น menu, สนับสนุนตั้งแต่ 9.2.0 ขึ้นไปเท่านั้น)

นอกจากนี้เรายังสามารถใช้คำสั่ง CSS เพิ่มเติม เพื่อกำหนดรูปแบบ สีสัน ให้เป็นไปตามที่ต้องการได้ด้วย โดยสามารถศึกษาเพิ่มเติมได้จาก http://gcss.goragod.com/menus.html

ในกรณีของเมนูที่ตำแหน่งอื่นๆหรือ เมนูที่กำหนดเอง หากไม่ได้กำหนด class ให้เป็น topmenu หรือ sidemenu แล้ว จะต้องกำหนดรูปแบบของ CSS ด้วยตัวเอง