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

Post a reply


This question is a means of preventing automated form submissions by spambots.
Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

วิธีการทำ 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 99 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 ของเราก็จะแสดงเมนูออกมาเป็นแนวนอนยาวไม่ยากอย่างที่คิดใช้ไหมล่ะครับก็หวั่งว่าทุกท่านที่เข้ามาอ่านบทความนี้จะเข้าใจวิธีที่ผมทำนะครับทางผู้เขียนบทความแชร์ความรู้นี้ก็หวังเป็นอย่างยิ่งผู้ที่ได้รับความรู้นี้จะนำความรู้นี้ส่งต่อความรู้ให้กับผู้ที่สนใจการพัฒนาเว็บไซต์เหมือนกับเรานะครับขอบคุณครับ

Top