วิธีสร้างเมนูซ้อนกันแบบยุบมือถือด้วยตัวสร้างธีมของ Divi

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

• การตั้งค่าเมนูของคุณและกำหนดคลาสที่ถูกต้องให้กับรายการเมนูของคุณ
• การสร้างเมนูของคุณโดยใช้ตัวสร้างธีมและโมดูลเมนู
• การเพิ่มโค้ดที่กำหนดเองภายใน Theme Builder

คุณจะสามารถดาวน์โหลดไฟล์เทมเพลต JSON ได้ฟรีเช่นกัน! ไปกันเถอะ

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

ดาวน์โหลด Global Header Design ฟรี

สำคัญ: หลังจากดาวน์โหลดและอัปโหลดไฟล์ JSON ไปยังตัวสร้างธีมแล้ว คุณจะต้องตั้งค่าเมนูด้วยตนเองด้วยคลาส CSS ที่ถูกต้อง + เพิ่มโค้ดโมดูลด้วยโค้ด CSS และ JQuery (ขั้นตอนที่ 1 และ 3 ของโพสต์นี้) .

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

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

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

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

1. ตั้งค่าเมนูของคุณ

เพิ่มรายการเมนู & รายการเมนูย่อย

สิ่งแรกที่คุณต้องทำคือสร้างเมนูของคุณ เพิ่มรายการย่อยที่คุณเลือก

เพิ่มตัวเลือกคลาส CSS

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

เพิ่มคลาส CSS ให้กับรายการเมนูระดับแรกที่มีรายการเมนูย่อย

ดำเนินการต่อโดยเพิ่มคลาส CSS ให้กับรายการเมนูระดับแรกที่มีรายการเมนูย่อย ในตัวอย่างนี้ หมายถึงการเพิ่มคลาส CSS ในรายการเมนู 'บริการ' และ 'ผลงาน'

• คลาส CSS: ระดับแรก

เพิ่มคลาส CSS ให้กับรายการเมนูระดับที่สอง & บันทึกเมนู

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

• คลาส CSS: ระดับที่สอง

2. ไปที่ตัวสร้างธีม Divi และเริ่มสร้างส่วนหัวส่วนกลาง

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

ส่วนถัดไปของบทช่วยสอนนี้เน้นที่การสร้างการออกแบบส่วนหัว หากคุณต้องการใช้เทคนิคที่ซ้อนกันกับส่วนหัวที่คุณได้สร้างไว้แล้ว (โดยใช้โมดูลเมนู) คุณสามารถข้ามขั้นตอนนี้และไปที่ส่วนสุดท้ายของบทช่วยสอน หากคุณต้องการสร้างการออกแบบใหม่ ให้ทำตามขั้นตอนต่อไป ไปที่ตัวสร้างธีม Divi

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

เริ่มสร้างส่วนหัวส่วนกลางของคุณต่อไป

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

ระยะห่าง

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

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

ดัชนี Z

เพิ่มดัชนี z ของส่วนด้วย

• ดัชนี Z: 99999

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

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

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

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

ตรวจสอบให้แน่ใจว่าโมดูลทั้งหมดปรากฏติดกันบนหน้าจอขนาดเล็กโดยเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถวด้วย

display: flex;

คอลัมน์ 1

ระยะห่าง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเอง

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

ชายแดน

เพิ่มรัศมีเส้นขอบด้วย

• ขวาบน: 100px
• ล่างขวา: 100px

กล่องเงา

และทำการตั้งค่าคอลัมน์ 1 ให้สมบูรณ์โดยเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ตำแหน่งแนวนอนของกล่องเงา: 20px
• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.15)

คอลัมน์ 2

ระยะห่าง

เปิดการตั้งค่าของคอลัมน์ที่สองถัดไป และเพิ่มช่องว่างภายในด้านบนและด้านล่าง

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

คอลัมน์ 3

พื้นหลังไล่โทนสี

ไปยังคอลัมน์ถัดไปและคอลัมน์สุดท้าย เพิ่มพื้นหลังไล่ระดับสี

• สี 1: #26c699
• สี 2: #abe02f
• ทิศทางการไล่ระดับสี: 116deg

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างที่กำหนดเองต่อไป

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

ชายแดน

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

• ซ้ายบน: 100px
• ล่างซ้าย: 100px

กล่องเงา

ตั้งค่าคอลัมน์ให้สมบูรณ์โดยเพิ่มเงาของกล่อง

• ตำแหน่งแนวนอนของกล่องเงา: -26px
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• สีเงา: #d2ff0c

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

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

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลรูปภาพในคอลัมน์ 1 อัปโหลดโลโก้ของคุณ

การจัดตำแหน่ง

เปลี่ยนการจัดแนวภาพของโมดูลต่อไป

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

ตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนความกว้างตามขนาดหน้าจอต่างๆ

• ความกว้าง: 120px (เดสก์ท็อป), 80px (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลเมนูไปที่คอลัมน์ 2

เลือกเมนู

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

ลบสีพื้นหลัง

ลบสีพื้นหลังของโมดูลถัดไป

เค้าโครง

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

• สไตล์: กึ่งกลาง
• ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง

ข้อความเมนู

จัดรูปแบบข้อความเมนูด้วย

• แบบอักษรของเมนู: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของเมนู: ปานกลาง
• สีข้อความของเมนู: #000000
• ขนาดข้อความของเมนู: 13px
• ระยะห่างระหว่างตัวอักษรของเมนู: 1px

เมนูแบบเลื่อนลง

ดำเนินการต่อโดยเปลี่ยนสีบางส่วนในการตั้งค่าเมนูแบบเลื่อนลง

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• สีของเมนูดร็อปดาวน์: #000000

ไอคอน

และตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ในการตั้งค่าไอคอน

• ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000

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

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

ไปยังโมดูลถัดไปและโมดูลสุดท้าย ซึ่งเป็นโมดูลข้อความในคอลัมน์ 3 เพิ่มสำเนาที่คุณเลือก

เพิ่มลิงค์

เพิ่มลิงก์ไปยังโมดูลถัดไป

• โมดูลลิงค์ URL: #

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

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

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 16px
• ความสูงของบรรทัดข้อความ: 1em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ระยะห่าง

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มขอบบน

• ขอบบน: 10px

3. เพิ่มฟังก์ชันการทำงานให้กับเมนูโดยใช้โค้ดโมดูล

เพิ่มโมดูลโค้ดลงในคอลัมน์ 2

เมื่อคุณออกแบบส่วนหัวเสร็จแล้ว ก็ถึงเวลาเพิ่มโค้ดที่กำหนดเองที่จะเปลี่ยนเมนูมือถือให้เป็นเมนูที่ซ้อนกันแบบยุบ เพิ่ม Code Module ลงในคอลัมน์ที่สอง (หรือที่อื่น)

แทรก CSS & JQuery Code

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

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

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

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

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