การใช้งานเมนูของ 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 ด้วยตัวเอง