วิธีการทำ Module: Menu แสดงเมนูเป็นแนวยาว

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
jamepiyawat
PHP VIP Members
PHP VIP Members
โพสต์: 2008
ลงทะเบียนเมื่อ: 21/05/2019 10:45 am

วิธีการทำ Module: Menu แสดงเมนูเป็นแนวยาว

โพสต์ที่ยังไม่ได้อ่าน โดย jamepiyawat »

หลายคนที่ทำเว็บไซต์โดยใช้ joomla ก็คงจะต้องเคยทำเมนูหลาย ๆ เมนูใน Module เดียวกันมาบ้างแล้วแต่ที่เราเคยทำกันมาบ้างแล้วแต่ว่าส่วนใหญ่เมนูก็จะแนวดิ่งลงมาซ่ะมากกว่าแต่ว่าถ้าเราต้องการจะทำให้ Module: Menu ของเราแสดงเป็นแนวยาววันนี้ผมก็มีิวิธีที่จะทำให้ ่joomia Module: Menu ของเราแสดงเป็นแนวนอนกันจะเป็นอย่างไรลองไปดูกันเลย

เมนูของเรา
Selection_999(518).png
ถ้าเรานำเมนูนี้ไปแสดงใน Module ก็จะออกมาเป็นแบบนี้
Selection_999(418).png
Selection_999(418).png (9.71 KiB) Viewed 2286 times
อันดับแรกเราก็ทำการ overrides Module: Menu ของเราออกมาก่อน โดยจุดประสงของเราก็คือเราจะต้องให้คำสั่ง css ที่ชื่อว่า display:inline-block เพื่อให้เราเมนูแต่ละเมนูแสดงในบรรนทัดเดียวกัน

ให้เราลองสังเกตุที่การเมนูของเราขึ้นบรรทัดใหม่เพราะว่าเมนูแต่ละเมนูจะมีแท็ก li อยู่ให้เราลองดูที่โค้ดก็จะมีการใช้ class เป็นตัวแปลอยู่แบบนี้

โค้ด: เลือกทั้งหมด

echo '<li class="' . $class . '">';
จะเห็นได้ว่ามีการเรียกใช้ class ตามตัวแปล $class อยู่ให้เราลองทำการหาโด้ดที่เก็บค่า $class มาดูว่าเก็บอะไร

โค้ด: เลือกทั้งหมด

$class = 'item-' . $item->id;
ก็จะเห็นได้ว่า $class จะเก็บคำว่า item-แล้วตัวด้วยตัวเลข ID เมื่อเรารู้แบบนี้แล้วเราก็ทำการสร้างชือ class ของเราต่อได้เลยแบบบนี้

โค้ด: เลือกทั้งหมด

$class = 'item-' . $item->id . ' inline-manu';
จะเป็นได้ว่าผมต่อ class ใหม่ชื่อว่า inline-manu

จากนั้นให้ไปที่หน้า css ของเราแล้วใช่คำสั่ง display:inline-block โดยการเลือก css แบบนี้

โค้ด: เลือกทั้งหมด

.moduletable .inline-manu{
  display:inline-block;
}
ก็จะเป็นการอ้างอิงทั้ง 2 class เพี่อจะได้ไม่ให้ Module ตัวอื่นได้ผมกระทบไปด้วย

ผลลัธท์ที่ได้
Selection_999(421).png
เท่านี้ joomla Module: Menu ของเราก็จะแสดงเมนูออกมาเป็นแนวนอนแล้ว

เป็นอย่างไรบ้าครับสำหรับวิธีนี้ที่จะทำให้ joomla Module: Menu ของเราก็จะแสดงเมนูออกมาเป็นแนวนอนยาวไม่ยากอย่างที่คิดใช้ไหมล่ะครับก็หวั่งว่าทุกท่านที่เข้ามาอ่านบทความนี้จะเข้าใจวิธีที่ผมทำนะครับทางผู้เขียนบทความแชร์ความรู้นี้ก็หวังเป็นอย่างยิ่งผู้ที่ได้รับความรู้นี้จะนำความรู้นี้ส่งต่อความรู้ให้กับผู้ที่สนใจการพัฒนาเว็บไซต์เหมือนกับเรานะครับขอบคุณครับ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 23