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

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

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

ภาพประจำตัวสมาชิก
pond
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 571
ลงทะเบียนเมื่อ: 25/05/2016 9:44 am

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

โพสต์โดย pond » 19/09/2016 5:01 pm

วิธีการทำ
เราจะสังเกตุได้ว่า li หรือ เมนู ที่มีซัพเมนูจะมีคลาส deeper อยู่
deep.png
deep.png (113.28 KiB) เปิดดู 122 ครั้ง

ให้เราเพิ่ม 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) เปิดดู 138 ครั้ง

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน