การสร้างเมนูดรอปดาวน์ธีมที่หรูหราขั้นสูงด้วยตัวสร้างธีมของ Divi

นับตั้งแต่ตัวสร้างธีมของ Divi ออกมา วิธีที่เราออกแบบส่วนหัวและส่วนท้ายในเว็บไซต์ของเราด้วย Divi นั้นง่ายกว่าที่เคย ทุกอย่างสามารถกำหนดเองได้ และคุณสามารถรับเมนูที่คุณต้องการโดยไม่ต้องออกจากสภาพแวดล้อม Divi ที่ใช้งานง่าย ณ จุดหนึ่ง คุณอาจพบเมนูดรอปดาวน์ของธีมที่สง่างามบนเว็บไซต์ของเรา เมนูแบบเลื่อนลงนี้เป็นเมนูเมก้าขั้นสูงที่รวมไอคอน ข้อความ และ CTA เข้าด้วยกันอย่างสร้างสรรค์ ซึ่งช่วยให้ผู้เข้าชมสามารถนำทางผ่านผลิตภัณฑ์ต่างๆ ที่มีให้ด้วยสายตา นอกจากนี้ยังแปลเป็นเมนูที่ซ้อนกันอย่างสวยงามบนขนาดหน้าจอที่เล็กกว่า

ในบทช่วยสอนนี้ เราจะแสดงให้คุณเห็นถึงวิธีสร้างเมนูดรอปดาวน์ของธีมที่หรูหราขั้นสูงภายใน Divi's Theme Builder เราจะรวมเอาสิ่งที่ดีที่สุดของทั้งสองโลกเข้าด้วยกัน เราจะใช้องค์ประกอบ Divi ในตัวเพื่อสร้างรากฐานของดรอปดาวน์ของเรา และรวมเข้ากับโค้ดบางตัวที่วางดรอปดาวน์ในเมนู WordPress คุณจะสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน!

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงส่วนหัวของเมนูดรอปดาวน์ธีมขั้นสูงที่หรูหราฟรี

หากต้องการวางเค้าโครงส่วนหัวแบบฟรี คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

วิธีอัปโหลดไฟล์ JSON

เปิดเครื่องรูดโฟลเดอร์ซิปที่คุณสามารถดาวน์โหลดได้ด้านบน จากนั้นไปที่เว็บไซต์ WordPress > Divi > Divi Library แล้วอัปโหลด JSON

เมื่อเลย์เอาต์ของคุณถูกบันทึกในไลบรารี Divi คุณสามารถไปยัง Divi Theme Builder และนำเข้าเลย์เอาต์ที่บันทึกไว้โดยคลิกที่ 'Add Global Header' หรือ 'Add Custom Header' และเลือก 'Build Global/Custom Header' ไปที่แท็บ 'เลย์เอาต์ที่บันทึกไว้ของคุณ' ในไลบรารี Divi เลือกเลย์เอาต์ที่คุณได้อัปโหลดในขั้นตอนก่อนหน้า และบันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi ทั้งหมด

หากต้องการให้เมนูใช้งานได้ทันที คุณจะต้องอ่านส่วนแรกของบทช่วยสอนด้านล่างนี้ การเพิ่มคลาส CSS ให้กับรายการเมนูในแต่ละระดับ คุณจะต้องเปิดใช้งานคลาส CSS ตัวใดตัวหนึ่งภายใน Code Module ตามที่แสดงในส่วนที่ 5 ของบทช่วยสอนนี้

1. เพิ่มคลาส CSS ให้กับรายการเมนู

ไปที่เมนูในลักษณะที่ปรากฏ

ส่วนแรกของบทช่วยสอนนี้เน้นที่การตั้งค่ารายการเมนู WordPress ของคุณด้วยคลาส CSS ที่เหมาะสม โดยไปที่แดชบอร์ด WordPress > เมนู > สร้างเมนูใหม่หรือเปิดเมนูที่มีอยู่

เปิดใช้งานตัวเลือกคลาส CSS

จากนั้น ที่มุมบนขวาของหน้าจอ คุณจะสังเกตเห็น 'ตัวเลือกหน้าจอ' สลับตัวเลือกนี้และเปิดใช้งาน 'คลาส CSS' ในคุณสมบัติเมนูขั้นสูง ซึ่งจะทำให้เราสามารถเพิ่มคลาส CSS ให้กับรายการเมนูเฉพาะในแต่ละระดับได้

เพิ่มคลาส CSS ต่อเนื่องให้กับรายการเมนูที่ต้องการดรอปดาวน์

ตลอดบทช่วยสอนนี้ เราจะสร้างดร็อปดาวน์ที่แตกต่างกันสามรายการ และกำหนดแต่ละรายการให้กับรายการเมนูเฉพาะ เพื่อให้กระบวนการนั้นดำเนินต่อไป เราจะต้องกำหนดคลาส CSS สองคลาสที่แตกต่างกันให้กับรายการเมนูสามรายการที่เราต้องการให้มีเมนูดรอปดาวน์

• รายการเมนูแรกที่คุณต้องการกำหนดดรอปดาวน์ให้กับ: first-level first-level-1
• รายการเมนูที่สองที่คุณต้องการกำหนดดรอปดาวน์ให้กับ: first-level first-level-2
• รายการเมนูที่สามที่คุณต้องการกำหนดดรอปดาวน์ให้กับ: first-level first-level-3

2. สร้างส่วนหัวที่กำหนดเองด้วยตัวสร้างธีมของ Divi

ไปที่ตัวสร้างธีม Divi

เมื่อคลาส CSS ของรายการเมนูพร้อมแล้ว ก็ถึงเวลาเปลี่ยนไปใช้ Divi ไปที่ Divi Theme Builder และเลือก 'Add Global/Custom Header'

เริ่มสร้าง Global Header

จากนั้นเลือก 'สร้างส่วนหัวส่วนกลาง' เพื่อเปลี่ยนเส้นทางไปยังตัวแก้ไขเทมเพลต

การตั้งค่ามาตรา

สีพื้นหลัง

ภายในเทมเพลต คุณจะสังเกตเห็นส่วน เปิดส่วนนั้นและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #ffffff

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

กล่องเงา

และรวมเงาของกล่องที่บอบบางไว้ด้วย

• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 30px
• เงาสี: rgba(103,151,255,0.17)

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวแรกในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้างสูงสุด: 1440px

ระยะห่าง

เปลี่ยนค่าช่องว่างด้านบนและด้านล่างในการตั้งค่าระยะห่างถัดไป

• ช่องว่างภายในด้านบน: 10px
• ช่องว่างภายในด้านล่าง: 10px

เพิ่มโมดูลเมนูใน Row

เลือกเมนู

จากนั้น เพิ่มโมดูลเมนูลงในคอลัมน์ของแถวและเลือกเมนู WordPress ที่คุณแก้ไขในส่วนแรกของบทช่วยสอนนี้

อัพโหลดโลโก้

อัปโหลดโลโก้ต่อไป

การตั้งค่าข้อความเมนู

ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความของเมนูตามลำดับ:

• แบบอักษรของเมนู: Lato
• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• รูปแบบตัวอักษรของเมนู: ตัวพิมพ์ใหญ่
• เมนูข้อความสี: rgba(32,41,47,0.62)
• ขนาดข้อความของเมนู: 13px
• ระยะห่างระหว่างตัวอักษรของเมนู: 3px
• การจัดตำแหน่งข้อความ: ขวา

การตั้งค่าเมนูแบบเลื่อนลง

ทำการเปลี่ยนแปลงบางอย่างกับการตั้งค่าเมนูแบบเลื่อนลงต่อไป

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• เมนูแบบเลื่อนลง สีของเส้น: rgba(0,0,0,0)
• สีข้อความของเมนูแบบเลื่อนลง: #000000
• สีพื้นหลังของเมนูมือถือ: #f2f4f5
• สีข้อความเมนูมือถือ: #000000

การตั้งค่าไอคอน

เช่นเดียวกับการตั้งค่าไอคอน

• ไอคอนรถเข็นช็อปปิ้งสี: #000000
• ค้นหาไอคอนสี: #000000
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #ff4a9e

ขนาด

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยกำหนดความสูงสูงสุดของโลโก้ให้กับการตั้งค่าการปรับขนาด

• โลโก้ความสูงสูงสุด: 64px

3. สร้างองค์ประกอบแบบเลื่อนลง

เพิ่มแถวใหม่ให้กับ Section

โครงสร้างคอลัมน์ (จำนวนที่ตรงกันของเมนูแบบเลื่อนลงที่ต้องการ)

เมื่อเมนูเริ่มต้นของคุณพร้อมแล้ว ก็ถึงเวลาสร้างเมนูดรอปดาวน์ ในการทำเช่นนั้น เราจะเพิ่มแถวใหม่ที่มีสามคอลัมน์ที่มีขนาดเท่ากัน จำนวนคอลัมน์ตรงกับจำนวนเมนูแบบเลื่อนลงที่เราจะสร้าง

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดตามนั้น:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 86%
• ความกว้างสูงสุด: ไม่มี

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

CSS Class

และกำหนดคลาส CSS ให้กับแถว

• CSS Class: เมนูดรอปดาวน์แถว

คลาส CSS ของคอลัมน์ทั้งหมด

เมื่อคุณตั้งค่าแถวทั่วไปเสร็จแล้ว ให้เปิดแต่ละคอลัมน์แยกกันและกำหนดคลาส CSS ต่อไปนี้:

• CSS Class: เมนูแบบเลื่อนลงคอลัมน์

เพิ่ม Blurb Module #1 ให้กับคอลัมน์ 1

เพิ่มเนื้อหา

ได้เวลาเพิ่มโมดูลแล้ว! เราจะเริ่มต้นด้วยการสร้างเมนูแบบเลื่อนลงเมนูแรกในคอลัมน์แรก ในการแสดงผลิตภัณฑ์ที่แตกต่างกันทั้งหมด เราจะใช้โมดูล Blurb ของ Divi เพิ่มเนื้อหาบางส่วนที่คุณเลือก

เลือกไอคอน

จากนั้นเลือกไอคอนที่ตรงกัน

เพิ่มลิงค์

เพิ่มลิงค์ไปยังโมดูลด้วย

การตั้งค่าไอคอน

ไปที่แท็บออกแบบและกำหนดรูปแบบการตั้งค่าไอคอนดังนี้:

• สีไอคอน: #8f42ec
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 30px

การตั้งค่าข้อความชื่อเรื่อง

จากนั้นจัดรูปแบบข้อความชื่อเรื่อง

• แบบอักษรของชื่อเรื่อง: Lato
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• รูปแบบตัวอักษรของชื่อเรื่อง: ตัวพิมพ์ใหญ่
• ชื่อข้อความสี: #8f42ec
• ขนาดข้อความชื่อเรื่อง: 16px
• ระยะห่างของตัวอักษรชื่อเรื่อง: 2px

การตั้งค่าข้อความเนื้อหา

พร้อมกับข้อความเนื้อหา

• แบบอักษรของร่างกาย: Lato
• สีข้อความ: #999999

ขนาด

เรากำลังตรวจสอบให้แน่ใจว่าความกว้างของเนื้อหาเป็น '100%' ด้วย

• ความกว้างของเนื้อหา: 100%

ระยะห่าง

จากนั้น เราจะไปที่การตั้งค่าระยะห่างและใช้ค่าช่องว่างภายในที่แตกต่างกันในขนาดหน้าจอต่างๆ

• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 6% (เดสก์ท็อป), 2% (แท็บเล็ต), 3% (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 6% (เดสก์ท็อป), 2% (แท็บเล็ต), 3% (โทรศัพท์)

โฮเวอร์:

• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 8%
• ช่องว่างภายในด้านขวา: 4%

แอนิเมชั่น

เราจะลบแอนิเมชั่นไอคอนเริ่มต้นในการตั้งค่าแอนิเมชั่นต่อไป

• แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

CSS Class

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

• CSS Class: dropdown-menu-item

องค์ประกอบหลัก CSS

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

cursor: pointer;

โคลน Blurb โมดูล x3

เมื่อคุณสร้าง Blurb Module แรกเสร็จแล้ว ให้โคลนสามครั้ง

เปลี่ยนเนื้อหาและไอคอน

แก้ไขเนื้อหาและไอคอนทั้งหมดสำหรับแต่ละรายการที่ซ้ำกัน

เปลี่ยนลิงค์

พร้อมทั้งลิงค์ต่างๆ

โคลนโมดูล Blurb ล่าสุดครั้งเดียว

ดำเนินการต่อโดยโคลนโมดูล Blurb สุดท้ายในคอลัมน์หนึ่งครั้ง

เพิ่มสีพื้นหลัง

เปิดการตั้งค่า Blurb Module ที่ซ้ำกันและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #f9f9f9

เปลี่ยนการตั้งค่าไอคอน

แก้ไขการตั้งค่าไอคอนด้วย

• ไอคอนสี: #3b45eb
• ขนาดตัวอักษรของไอคอน: 22px

เปลี่ยนการตั้งค่าข้อความชื่อเรื่อง

พร้อมกับการตั้งค่าข้อความชื่อเรื่อง

• สีข้อความชื่อเรื่อง: #3b45eb
• ขนาดข้อความชื่อเรื่อง: 14px

เปลี่ยนเนื้อหา & ลิงค์

และแน่นอนเนื้อหาและลิงค์

ปิดการใช้งานบนแท็บเล็ตและโทรศัพท์

โมดูล Blurb ประเภทที่สองที่เรามีในรายการดรอปดาวน์นี้จะมองเห็นได้เฉพาะในขนาดหน้าจอที่ใหญ่ขึ้นเท่านั้น วิธีนี้จะช่วยให้เรามั่นใจว่าเมนูแบบเลื่อนลงจะไม่ทำให้หน้าจอเล็กลงมากเกินไป หากต้องการซ่อนโมดูลในขนาดหน้าจอที่เล็กกว่า ให้ไปที่แท็บขั้นสูงและปิดใช้งานโมดูลบนแท็บเล็ตและโทรศัพท์

โคลน Blurb โมดูล x3

เมื่อ Blurb Module ประเภทที่สองของคุณเสร็จสิ้น คุณสามารถโคลนได้สามครั้ง

เปลี่ยนเนื้อหาและไอคอน

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหาและไอคอนสำหรับแต่ละรายการที่ซ้ำกัน

เปลี่ยนลิงค์

พร้อมทั้งลิงค์ต่างๆ

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

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

สีพื้นหลัง

จากนั้นเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #3776ff

การตั้งค่าข้อความ

ไปที่แท็บออกแบบและแก้ไขการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: Lato
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #ffffff
• ระยะห่างของตัวอักษรข้อความ: 3px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• ขอบบน: 20px
• ขอบล่าง: 20px
• ระยะขอบซ้าย: 4%
• ระยะขอบขวา: 4%
• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px

ชายแดน

จากนั้น เพิ่มมุมโค้งมนให้กับการตั้งค่าเส้นขอบ

• ทุกมุม: 100px

กล่องเงา

เปิดใช้งานเงากล่องที่ละเอียดอ่อน

• ตำแหน่งแนวตั้งเงาของกล่อง: 14px
• เงาสี: rgba(0,0,0,0) (ค่าเริ่มต้น), rgba(0,0,0,0.09) (โฮเวอร์)

แปลงแปล

เมื่อวางเมาส์เหนือ เราต้องการให้ปุ่มสูงขึ้นเล็กน้อย เพื่อเพิ่มเอฟเฟกต์นั้น เราจะใช้การตั้งค่าการแปลการแปลงแบบกำหนดเองบนโฮเวอร์

• ขวา: -3px (โฮเวอร์)

CSS Class

เช่นเดียวกับโมดูลอื่นๆ ในรายการดรอปดาวน์ของเรา โมดูลนี้ต้องการคลาส CSS ต่อไปนี้:

• CSS Class: dropdown-menu-item

องค์ประกอบหลัก CSS

และเราจะทำการตั้งค่าโมดูลให้เสร็จโดยเปลี่ยนเคอร์เซอร์โดยใช้โค้ด CSS หนึ่งบรรทัดในองค์ประกอบหลัก

cursor: pointer;

ลบคอลัมน์ 2 & 3

เมื่อคุณทำคอลัมน์เมนูแบบเลื่อนลงคอลัมน์แรกเสร็จแล้ว คุณสามารถเปิดการตั้งค่าแถวและลบคอลัมน์ว่างสองคอลัมน์ในแถวนั้น

โคลนคอลัมน์แรกสองครั้ง

โคลนคอลัมน์แรกสองครั้ง

ปรับแต่งรายการ

และปรับแต่งรายการทั้งหมดในเมนูดรอปดาวน์อื่นๆ อีกสองเมนูตามที่คุณต้องการ

4. เพิ่ม CSS & JQuery Code

เพิ่มโมดูลโค้ดใหม่ให้กับแถว #1 คอลัมน์

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

ใส่โค้ด CSS

และใส่โค้ด CSS ต่อไปนี้:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

ใส่รหัส JQuery

เรากำลังใช้รหัส JQuery ด้วยเช่นกัน ตรวจสอบให้แน่ใจว่าคุณวางโค้ดนี้ ระหว่างแท็กสคริปต์ ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. เปิดใช้งานคลาส CSS เมื่อคุณปรับแต่งเมนูเสร็จแล้ว

ทันทีที่คุณปรับแต่งรายการดรอปดาวน์ทั้งหมดเสร็จแล้ว คุณจะเหลืออีกสิ่งหนึ่งที่ต้องทำ นั่นคือ การซ่อนทั้งแถวที่มีรายการเมนูดรอปดาวน์ เมื่อใช้ร่วมกับฟังก์ชันโหลดภายในโค้ดของเรา จะป้องกันไม่ให้เมนูดรอปดาวน์แสดงขึ้นเมื่อโหลดหน้าเว็บ เมื่อคุณเปิดใช้งานคลาส CSS นี้ คุณจะไม่เห็นแถวที่สองใน Visual Builder อีกต่อไป แต่คุณจะสามารถเข้าถึงได้ในโหมด wireframe และ/หรือปิดใช้งานคลาส CSS ชั่วคราวเมื่อทำการเปลี่ยนแปลงกับเมนูดรอปดาวน์ของคุณ หากต้องการเปิดใช้งานคลาส ให้ลบวงเล็บ '/* */' ที่จุดเริ่มต้นและจุดสิ้นสุดของคลาส CSS

• CSS Class: เมนูดรอปดาวน์แถว

6. การสร้างเมนูแบบเลื่อนลงมากกว่า 3 รายการ

เพิ่มคลาส CSS ให้กับรายการเมนูในลักษณะที่ปรากฏ

หากคุณกำลังมองหาวิธีเพิ่มเมนูแบบเลื่อนลงมากกว่า 3 เมนูในเมนูของคุณ คุณจะต้องกลับไปที่เมนูของคุณและเพิ่มคลาส CSS ที่ต่อเนื่องกันในรายการเมนูที่สี่

• รายการเมนูที่สี่ที่คุณต้องการกำหนดดรอปดาวน์ให้กับ: first-level first-level-4

โคลนคอลัมน์ที่ท้ายแถว

จากนั้นกลับไปที่ส่วนหัวและโคลนคอลัมน์สุดท้าย

ตรวจสอบให้แน่ใจว่าคลาส CSS ของคอลัมน์และโมดูลอยู่ในตำแหน่ง

ตรวจสอบให้แน่ใจว่าคลาส CSS ของคอลัมน์และโมดูลอยู่ในตำแหน่งสำหรับเมนูดรอปดาวน์ใหม่ และคุณทำเสร็จแล้ว! สิ่งสำคัญคือต้องอุทิศคอลัมน์ใหม่ให้กับเมนูดรอปดาวน์ใหม่เสมอ และทำตามลำดับคอลัมน์ของแถว ซึ่งหมายความว่าคอลัมน์ 1 จะเป็นรายการแบบเลื่อนลง 1 คอลัมน์ที่ 2 จะเป็นรายการแบบเลื่อนลง 2 เป็นต้น

• คลาส CSS ของคอลัมน์: dropdown-menu-column
• โมดูล CSS คลาส: dropdown-menu-item

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

ในบทช่วยสอนนี้ เราได้แสดงวิธีสร้างเมนูดรอปดาวน์ของธีมที่หรูหราขึ้นใหม่โดยใช้เครื่องมือสร้างธีมของ Divi เราได้รวมสิ่งที่ดีที่สุดของทั้งสองโลก และใช้องค์ประกอบในตัวของ Divi เพื่อจัดรูปแบบรายการทั้งหมดในเมนูแบบเลื่อนลงของเรา จากนั้นจึงใช้โค้ดบางส่วนเพื่อวางรายการแบบเลื่อนลงทั้งหมดในรายการเมนูที่ตรงกันภายในเมนู WordPress คุณสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง

หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับ Divi และรับ Divi freebies เพิ่มเติม อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้เป็นหนึ่งในคนกลุ่มแรกๆ ที่รู้จักและรับประโยชน์จากเนื้อหาฟรีนี้เสมอ