ปุ่มเมนูสามแท่ง สำหรับ Joomla3x เทมเพลต Protostra ดูผ่านมือถือแสดงหน้าตาประมาณนี้
ปุ่มเมนูสามแท่ง หรือ เมนู Dropdown แสดงบนมือถือ Joomla3 ซ่อนเมนูทุกเมนูมาภายในปุ่มนี้แล้ว หน้าตาเรียบง่ายแต่ใช้งานไม่สะดวก ไม่รู้ปุ่มนี้มีคืออะไรหรือใช้อย่างไร ผู้เขียนแก้ไขปรับแต่งปุ่มเมนูไอคอนนี้ให้ใหม่ เพื่อความสวยสะดุดตาใช้งานง่ายและสื่อความหมายในตัว
บทความสอนวิธีการเปลี่ยนรูปลักษณ์ปุ่มไอคอนเมนู Dropdown แสดงผลบนมือถือ Joomla-3x ด้วยวิธีการดังต่อไปนี้
1.คลิกเข้าสู่พื้นที่เว็บไชต์ของเราด้วยโปรแกรม FTP คลิกปุ่ม เชื่อมต่อหรือตกลง
2.ค้นหาไฟล์เว็บไชต์ Joomla ของเรา ที่ชื่อว่า index.php ซึ่งจะอยู่ในเทมเพลตที่เราใช้ มันคือ Protostra นั่นเอง
3.คลิกโหลดไฟล์เว็บ Index.php ดังกล่าวโหลดเก็บไว้ในเครื่องเราก่อนกันผิดพลาด จากนั้นคลิกขวาไฟล์เว็บนี้อีกครั้งในพื้นที่ทำเว็บไชต์ด้วยโปรแกรม FTP ด้วยคำสั่ง View edit
4.หากโปรแกรม FTP ถามว่าจะใช้โปรแกรมอะไรแก้ไขไฟล์เว็บ ก็กำหนดให้ใช้ Dreamweaver ซึ่งผู้เขียนติดตั้งในเครื่องไว้ก่อนแล้ว หรือตั้งค่าตามตัวอย่างได้เลย
5.ค้นหาโค้ดไฟล์เว็บ ที่เขียนคำสั่งว่า <nav class="navigation" role="navigation"> เป็นคำสั่งเกี่ยวกับการเปิดใช้ปุ่มไอคอน ดรอบดาวน์เมนู จะแสดงทุกครั้งเมื่อดูเว็บบนมือถือและจะหายไปทุกครั้งเมื่อเปิดดูด้วยคอมพิวเตอร์PC
6.ลบชุดคำสั่งโค้ดเว็บ<span class="icon-bar"></span> ทั้งหมด แล้วเพิ่ม คำว่า MENU ลงไปแทนที่ เพื่อเขียนทับเหนือปุ่มสามแท่ง และให้ปรากฏชื่อ MENU ในปุ่มนี้
7.คลิกปุ่ม File และปุ่ม save โปรแกรม Dreamweaver CS3 เพราะขณะนี้เราใช้โปรแกรมนี้แก้ไขอยู่และเชื่อมต่อกับโปรแกรม FTP คือการแก้ไขไฟล์เว็บไชต์บนโฮสนั่นเอง
8.หากสังเกตดีๆโปรแกรม FTP จะทำงานร่วมกันกับ Dreamweaver ให้เราคลิกยืนยันการแก้ไขไฟล์เว็บไชต์Joomla ด้วยโปรแกรม FTP ของเค้าอีกครับ เป็นอันเสร็จการ Save การแก้ไขไฟล์เว็บ Joomla ของเราแล้วดูเว็บไชต์ในมือถืออีกครั้ง
เมนูสำหรับแสดงผลบนมือถือเว็บไชต์ Joomla3 เขียนชื่อทับไว้เหนือปุ่มไอคอนเรียบร้อยแล้ว แต่ก็ยังไม่สวยเท่าที่ควร ก็ต้องมีการแก้ไขเพิ่มสีสันให้ดูดีกว่าเดิม เพื่อสะดวกในการใช้งานของเราและผู้เยี่ยมเยียนเว็บไชต์ของเราด้วยเช่นกัน
9.กลับไปที่การแก้ไขไฟล์เว็บไชต์ Joomla3 ของเราเหมือนครั้งก่อน ไฟล์เว็บ index.php ในเทมเพลต protostar
วิธีการเปลี่ยนสีพื้นหลังของปุ่ม MENU Dropdown Joomla3 แสดงผลบนหน้าจอมือถือ แท็บเล็ตฯลฯ
แก้ไขครั้งเดียวแล้วจะใช้ได้ตลอดไป
ค้นหาโค้ดเว็บ ที่เขียนว่า .btn-primary แล้วเพิ่มคำสั่งลงไปต่อท้าย , .navigation a.btn ก็จะได้โค้ดชุใหม่ต่อท้ายเข้ามาดังภาพ
10. saveไฟล์เว็บแล้วค้นหาชื่อไฟล์เว็บที่ชื่อว่า template.cssจะอยู่เทมเพลต protostar ของเราอีกครั้ง จะพบว่าโค้ดเว็บเขียนคำสั่งเยอะแยะมากมาย แต่จะมีคำสั่งที่แก้ไขสีพื้นหลังปุ่มกดแค่บรรทัดเดียวคำสั่งอื่นอย่าไปยุ่งกับเค้า หากแม่มั่นใจโหลดไฟล์เว็บ template.css ลงเครื่องไว้ก่อน แล้วทำการแก้ไขโค้ดสี จากนั้นบันทึก Save ออกมาดูเว็บไชต์ของเราในมือถือ แท็บเล็ตก็จะเปลี่ยนไปตามที่เราแก้ไขทันที
ปุ่มเมนู Dropdown ไอคอนบนเว็บไชต์ Joomla3 แสดงผลออกมาให้เห็นเมื่อเปิดดูเว็บไชต์ในมือถือหรืออุปกรณ์ ITได้ทุกประเภท และจะซ่อนเมนูทุกเมนูภายใต้ ปุ่มเมนูไอคอน Dropdown เท่านั้น หากไม่ต้องแสดงเมนูปุ่มไอคอน Dropdown ก็สามารถลบทิ้งได้เช่นกัน โดยการลบคำสั่ง หมายเลข 6 ตามภาพด้านบนทิ้งไป แล้วตั้งค่าโมดูล Menu Meanager ให้อยู่ตำแหน่ง Position P0 ขวาบนสุดเว็บไชต์ Joomla3 เมนูทั้งหมดจะปรากฎแทนที่ ปุ่มเมนู Dropdown ไอคอนแทนทันที
