สร้างเมนูเมก้าด้วย Ultimeu และ Bootstrap ใน Drupal 8

ลูกค้ารายหนึ่งของเราถามถึงวิธีการสร้างเมนูเมก้าใน Drupal 8

เมนูเมก้าคือเมนูที่มีการนำทางหลายคอลัมน์ พวกเขากำลังกลายเป็นเทรนด์ในการออกแบบเว็บอย่างรวดเร็ว

โมดูล Ultimeu ช่วยให้คุณสามารถแทรกบล็อก Drupal ลงในเมนูได้ คุณสามารถใช้เพื่อสร้างเค้าโครงเมนูที่ค่อนข้างซับซ้อนได้อย่างง่ายดาย

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างเมนูขนาดใหญ่อย่างง่ายโดยใช้โมดูล Ultimenu และ Bootstrap

ลูกค้าตั้งเป้าที่จะสร้างเมนูเมก้าที่คล้ายกับภาพด้านล่าง:

เมนูแบบเลื่อนลงเมก้าควรมีความกว้าง 100% เนื้อหาของพวกเขาจะต้องเป็นบล็อกของ Drupal

แนวทาง Ultimenu

โมดูล Ultimenu สร้างบล็อกสำหรับแต่ละเมนูที่คุณเพิ่มในหน้าเมนูของการติดตั้ง Drupal (ผู้ดูแลระบบ/โครงสร้าง/เมนู)

คุณสามารถวางบล็อกนี้ในหน้าจอเค้าโครงบล็อกได้เหมือนกับบล็อกอื่นๆ โมดูลจะเปลี่ยนรายการเมนูเป็นขอบเขตไดนามิกในหน้าเค้าโครงบล็อก

ด้วยวิธีนี้ คุณสามารถแทรกบล็อค (บล็อกแบบกำหนดเอง มุมมอง ฯลฯ) ลงในพื้นที่เหล่านี้

บล็อกที่มีพื้นที่ที่มีบล็อก:

ขั้นตอนที่ 1. ติดตั้งโมดูล

• ติดตั้งโมดูลด้วย ผู้แต่ง:

composer require drupal/ultimenu

• หลังจากดาวน์โหลด ให้คลิก ขยาย และเปิดใช้งานโมดูล ไม่จำเป็นต้องมีการพึ่งพาเพิ่มเติม:

ขั้นตอนที่ 2. สร้างเมนู

• คลิก โครงสร้าง > เมนู
• มองหา การนำทางหลัก
• คลิก แก้ไข เมนู

• คลิกปุ่ม เพิ่มลิงค์
• เพิ่ม รายการเมนูระดับแรก:

ลิงก์ การเดินทาง ชี้ไปที่ route:<nolink> องค์ประกอบหลักนี้มีเฉพาะเพื่อให้มีองค์ประกอบอื่นๆ เท่านั้น:

ขั้นตอนที่ #3 กำหนดค่า Ultimenu block

• คลิก โครงสร้าง > Ultimeu
• แท็บเลือก การนำทางหลัก ในบล็อก Ultimeu แนวตั้ง
• คลิก บันทึกการกำหนดค่า :

• คลิก ขอบเขต Ultimenu
• เลือก Ultimeu:main: Travel

Ultimeu จะสร้างพื้นที่นี้แบบไดนามิกในหน้า Block Layout เพื่อให้คุณสามารถวางบล็อคได้

• คลิก บันทึกการกำหนดค่า :

แท็บ สินค้า Ultimeu มีตัวเลือกการกำหนดค่าเพิ่มเติม ฉันจะไม่ตรวจสอบตัวเลือกเหล่านี้ โปรดอ่านเอกสารประกอบของโมดูลเพื่อทำความเข้าใจว่าตัวเลือกเหล่านี้ทำงานอย่างไร โดยเฉพาะอย่างยิ่ง หากคุณกำลังสร้างไซต์หลายภาษา

ขั้นตอนที่ #4 บล็อกรูปภาพ

ในการวางรูปภาพในบล็อก คุณต้องสร้างประเภทบล็อกแบบกำหนดเองด้วยฟิลด์ รูปภาพ

• คลิก โครงสร้าง > เค้าโครงบล็อก > ไลบรารีบล็อกแบบกำหนดเอง > ประเภทบล็อก
• คลิกปุ่ม เพิ่มประเภทบล็อกที่กำหนดเอง :

• ตั้ง ชื่อบล็อกให้ถูกต้อง
• คลิก บันทึก:

• คลิก จัดการฟิลด์
• ลบ ฟิลด์ เนื้อหา
• คลิก เพิ่มฟิลด์
• เพิ่ม ฟิลด์ รูปภาพ
• บันทึก ด้วยค่าเริ่มต้น
• คลิก จัดการการแสดงผล
• ซ่อน ป้ายกำกับ บล็อก :

• คลิก โครงสร้าง > เค้าโครงบล็อก > ไลบรารีบล็อกที่กำหนดเอง > เพิ่มบล็อกที่กำหนดเอง :

• คลิก บล็อกด้วยรูปภาพ :

• อัปโหลด รูปภาพ
• คลิก บันทึก:

ขั้นตอนที่ #5 ลิงค์บล็อค

มีหลายวิธีในการรับบล็อกที่มีลิงก์ในสี่คอลัมน์ เช่น ด้วย มุมมอง

ฉันกำลังทำงานกับธีมย่อย Bootstrap ในบทช่วยสอนนี้ ฉันจะใช้บล็อกพื้นฐานที่มีมาร์กอัปและคลาส Bootstrap

ดูบทช่วยสอนนี้เพื่อเรียนรู้วิธีสร้างธีมย่อย Bootstrap ใน Drupal

• คลิก เพิ่มบล็อกที่กำหนดเอง อีกครั้ง
• เลือก บล็อกพื้นฐาน ในครั้งนี้
• ตั้ง ชื่อบล็อกให้ถูกต้อง
• เลือก HTML แบบเต็ม เป็นรูปแบบข้อความในตัวแก้ไข
• คลิก ปุ่ม แหล่งที่มา
• วาง รหัสต่อไปนี้ในหน้าต่างตัวแก้ไข:

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

• คลิก บันทึก

ขั้นตอนที่ #6 วาง Ultimenu block

• คลิก โครงสร้าง > เค้าโครงบล็อก
• ปิดใช้งาน บล็อก การนำทางหลัก เริ่มต้น
• วาง Ultimeu: การนำทางหลัก ในส่วน การนำทาง (พับได้)
• ยกเลิกการเลือก แสดงชื่อ
• คลิก บันทึกบล็อก

ขั้นตอนที่ #7 วางบล็อคในพื้นที่ "การเดินทาง"

• เลื่อนลง ไปที่ด้านล่างของหน้า

คุณจะเห็นพื้นที่ที่สร้างขึ้นแบบไดนามิกที่คุณกำหนดเมื่อกำหนดค่า Ultimeu ของคุณ

• คลิก วางบล็อค :

• วาง บล็อกรูปภาพที่กำหนดเองในภูมิภาคนี้
• ยกเลิกการเลือก แสดงชื่อ
• คลิก บันทึก บล็อก
• ทำซ้ำ ขั้นตอนด้วยบล็อก มาร์กอัป Bootstrap :

• จัดเรียง ลำดับของบล็อกใหม่หากจำเป็น
• คลิก บันทึกบล็อก :

ไปที่หน้าแรกของไซต์ของคุณและดูที่เมนู จำเป็นต้องมีการปรับแต่ง CSS สองสามอย่าง

ขั้นตอนที่ #8 CSS

ตามค่าเริ่มต้น ไฟล์ไลบรารีของธีมย่อยจะชี้ไปที่ไฟล์ style.css ภายในโฟลเดอร์ css/ ภายในธีมย่อย Bootstrap

• เพิ่ม รหัสต่อไปนี้ในไฟล์นั้น:

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

ถึงตอนนี้ คุณน่าจะสังเกตเห็นวิธีปรับแต่งเมนูด้วยตัวเองแล้ว:

สรุป

คุณเพิ่งเรียนรู้วิธีสร้างเมกะเมนูใน Drupal โดยใช้โมดูล Ultimenu, Bootstrap และแนวทาง "Drupal block" ที่เข้าใจง่าย

ขอบคุณที่อ่าน!