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

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

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

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1365
Joined: 21/05/2019 10:45 am

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

Post by jamepiyawat » 21/08/2019 6:34 pm

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

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

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

Code: Select all

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

Code: Select all

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

Code: Select all

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

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

Code: Select all

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

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

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: facebook.com [Crawler] and 19 guests