ทำลูกศรเฉพาะเมนูที่มีเมนูย่อย

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: ทำลูกศรเฉพาะเมนูที่มีเมนูย่อย

ทำลูกศรเฉพาะเมนูที่มีเมนูย่อย

โดย pond » 19/09/2016 5:01 pm

วิธีการทำ
เราจะสังเกตุได้ว่า li หรือ เมนู ที่มีซัพเมนูจะมีคลาส deeper อยู่
deep.png
deep.png (113.28 KiB) Viewed 837 times
ให้เราเพิ่ม css ส่วนนี้ใน index เพราะว่าจะสามารถฟิคสีได้จากหลังบ้านได้ไปแทรกที่ใน if ปล. ใช้ได้เฉพาะ Template ที่เขียนตามแบบ Template พื้นฐานอย่าง protostar แต่ถ้าเราสามารถสร้างคอนฟิคเองได้โดยรูปแบบฟอร์มที่เก็บค่านั้นสามารถอ่านได้จากกระทู้นี้เลยครับ สร้างฟอร์มxml Joomla จูมล่า part1 , สร้างฟอร์มxml Joomla part2 โดยไปสร้างที่ไฟล์ templateDetails.xml ของ Template นั้นๆ

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

if ($this->params->get('templateColor')) :
ใส่ css นี้ลงไปโดยมีความหมายว่า คลาส deeper จะสร้างเนื้อหา หรือ content หลังคลาส deeper ด้วยคำสั่ง before เรียกใช้ฟ้อน FontAwesome โดยสี นั้นจะเปลี่ยนแปลงไปตามคอนฟิคที่เทมเพลตสีเดียวกันกับเมนูนั่นเอง "\f0d7" นั้นคือรหัสเรียกใช้งาน Icon font (จะต้องมีฟ้อน FontAwesome ด้วยนะครับถ้าไม่มีก็ต้องดูว่าฟ้อนนั้นมีไอค่อนอะไรบ้าง)

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

.deeper:before{
 font-family:FontAwesome;
 content:"\f0d7";
 float: right;
 margin-top: 8px;
color: <?php echo $this->params->get('templateColor'); ?>;
ผลลัพธ์
sub.png
sub.png (209.89 KiB) Viewed 853 times

ข้างบน