Divi: วิธีสร้างเมนูเลื่อนและกด

คุณต้องการสร้าง เมนูเลื่อนและดัน ในDIVI ที่ไม่ซ่อนองค์ประกอบของหน้าของคุณ?

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

อย่างไรก็ตาม เมนูแบบเลื่อนจะทำงานแตกต่างออกไปเล็กน้อย เอฟเฟกต์การเลื่อนแบบเลื่อนมีลักษณะเฉพาะตรงที่เมนูเลื่อนเข้ามาจากด้านบนของหน้าพร้อมกับกดไปพร้อมกัน เนื้อหา จากหน้าไปด้านล่างจึงไม่มีอะไรถูกซ่อนจากการมองเห็น

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างเมนูพุชแบบเลื่อนตั้งแต่เริ่มต้นโดยใช้ Divi Theme Builder

Let 's go!

การสำรวจ

ต่อไปนี้คือภาพรวมคร่าวๆ ของเมนูพุชแบบเลื่อนที่เราจะสร้างในบทช่วยสอนนี้

สร้างเมนูพุชแบบเลื่อนด้วยตัวสร้างธีม Divi

การสร้างเมนูสากลใหม่

ในการสร้างเมนู เราจะสร้างส่วนหัวส่วนกลางใหม่ภายใน Divi Theme Builder

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

อ่าน: วิธีสร้างส่วนหัวส่วนกลางด้วยแบบฟอร์มเข้าสู่ระบบใน DIVI

จากนั้นคลิกที่พื้นที่ "เพิ่มส่วนหัวส่วนกลาง" ใน เทมเพลตเว็บไซต์ โดยค่าเริ่มต้น. จากรายการดรอปดาวน์ เลือก "สร้างส่วนหัวส่วนกลาง"

การสร้างเมนูพุช

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

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

เปิดการตั้งค่าส่วนเริ่มต้นและอัปเดตการตั้งค่าดังต่อไปนี้:

พื้นหลัง

• พื้นหลัง: #1a1e36

ระยะขอบภายใน

• ระยะขอบภายใน: 0px บนสุด 0px ล่างสุด

ชั้น CSS

ใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้ซึ่งจะใช้ในโค้ด JS ของเราในภายหลัง

• คลาส CSS: et-push-menu

เพิ่มบรรทัด 1

เมื่อกำหนดพารามิเตอร์ของส่วนแล้ว ให้สร้างแถวหนึ่งคอลัมน์ในส่วน

บรรทัดที่ 1 พารามิเตอร์

ถัดไป อัพเดตพารามิเตอร์บรรทัดดังนี้:

ปรับขนาด

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

การเว้นวรรค

• ระยะขอบ: บน 3vh ล่าง 3vh

ชายแดน

• ความกว้างขอบด้านล่าง: 1px
• สีขอบล่าง: rgba(255,255,255,0.2)

CSS ที่กำหนดเอง

ใต้แท็บขั้นสูง เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

display:flex;
justify-content:center;
align-items:center;

พารามิเตอร์คอลัมน์

เมื่อกำหนดการตั้งค่าแถวแล้ว ให้เปิดการตั้งค่าคอลัมน์และเพิ่มข้อมูลโค้ด CSS ที่กำหนดเองลงในองค์ประกอบหลัก:

display:flex;
align-items:center;
justify-content:center;

สิ่งนี้จะตั้งศูนย์ เนื้อหา ของคอลัมน์ทั้งแนวตั้งและแนวนอน

เพิ่มปุ่ม

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

ดูคำแนะนำของเราเกี่ยวกับ: วิธีสร้างเมนูการนำทางแนวตั้งใน DIVI

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

ถัดไป อัปเดตการตั้งค่าปุ่มดังนี้:

เนื้อหา

• ข้อความปุ่ม: การออกแบบ

• URL ลิงก์ของปุ่ม: # (แทนที่ภายหลังด้วย URL ที่คุณกำหนดเอง)

สไตล์

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: YES
• สีข้อความของปุ่ม: #ffffff

• ความกว้างของขอบปุ่ม: 0 พิกเซล
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• ปุ่มไฟอ่อน: หนัก

• ปุ่มไอคอน: ใช่
• ปุ่มไอคอน: [ตัวเลือกของคุณ]
• แสดงเฉพาะไอคอนบนปุ่มโฮเวอร์: NO
• ตำแหน่งไอคอนปุ่ม: ซ้าย

คอลัมน์ซ้ำ

ตอนนี้ เพื่อสร้างปุ่มเพิ่มเติมสำหรับเมนู เราสามารถทำซ้ำคอลัมน์ได้ สำหรับการออกแบบนี้ ให้ทำซ้ำคอลัมน์ 4 ครั้งเพื่อให้เรามีรายการเมนู/ปุ่มทั้งหมด 5 รายการในแถวละห้าคอลัมน์

เพิ่มบรรทัด 2

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

อ่าน: วิธีเพิ่มแบบฟอร์มการติดต่อไปยังส่วนหัวส่วนกลางใน DIVI

หากต้องการสร้างบรรทัดถัดไป ให้ทำซ้ำบรรทัดที่ 1

ลบคอลัมน์ทั้งหมดยกเว้นหนึ่ง

จากนั้นลบทั้งหมดยกเว้นหนึ่งคอลัมน์ในแถวที่ซ้ำกัน

บรรทัดที่ 2 พารามิเตอร์

อัปเดตพารามิเตอร์บรรทัดที่ 2 ดังนี้:

• ความกว้างสูงสุด: 1 พิกเซล

• ความกว้างขอบด้านล่าง: 0px

พารามิเตอร์คอลัมน์

จากนั้นเพิ่มเส้นขอบให้กับคอลัมน์ดังนี้:

• ความกว้างของเส้นขอบด้านขวา: 1px
• สีขอบขวา: rgba(255,255,255,0.2)

อัปเดตการตั้งค่าปุ่ม

เมื่อคอลัมน์มีเส้นขอบด้านขวาแล้ว ให้เปิดการตั้งค่าปุ่มและอัปเดตสิ่งต่อไปนี้:

• ขนาดข้อความของปุ่ม: 14px

• ปุ่ม Soft Light: ข้อความตัวหนา
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2 px
• รูปแบบการคัดลอกปุ่ม: TT
• ปุ่มไอคอน: NO

คอลัมน์ซ้ำ

อย่างที่เราทำก่อนหน้านี้ ให้ทำซ้ำคอลัมน์เพื่อสร้างปุ่มและคอลัมน์เพิ่มเติม สำหรับการออกแบบนี้ ให้ทำซ้ำคอลัมน์ 3 ครั้งเพื่อให้ได้ปุ่มทั้งหมด 4 ปุ่มในแถว 4 คอลัมน์

ลบเส้นขอบออกจากคอลัมน์สุดท้าย

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

• ความกว้างของเส้นขอบด้านขวา: 0px

การสร้างแถบส่วนหัวหลัก

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

เพิ่มส่วน

ก่อนเพิ่มส่วนใหม่ เป็นความคิดที่ดีที่จะอัปเดตป้ายกำกับของส่วนก่อนหน้าเป็น "ส่วนเมนูพุช"

ดูเพิ่มเติม: วิธีสร้าง Global Header ด้วย Theme Builder ใน DIVI

จากนั้นสร้างส่วนใหม่ใต้ส่วนแรก

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

ตอนนี้อัปเดตป้ายกำกับของส่วนใหม่เป็น "ส่วนหัว" จากนั้นเปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

การเว้นวรรค

• ระยะขอบภายใน: 0px บนสุด 0px ล่างสุด

เพิ่มแถว

เมื่อตั้งค่าการเติมส่วนแล้ว ให้เพิ่มแถวสามคอลัมน์ในส่วนนั้น

การตั้งค่าสาย

เปิดพารามิเตอร์แถวและอัปเดตสิ่งต่อไปนี้:

ปรับขนาด

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 90%
• ส่วนสูง: 70px

การเว้นวรรค

• ระยะขอบภายใน: 0px บนสุด 0px ล่างสุด

CSS ที่กำหนดเอง

ใต้แท็บขั้นสูง เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

display:flex;
align-items:center;

ซึ่งจะทำให้คอลัมน์ในแถวอยู่ตรงกลางแนวตั้ง

เพิ่มปุ่ม

ในการสร้าง CTA หลักในส่วนหัว เราสามารถใช้ปุ่มแถวที่สองในส่วนบนสุด คัดลอกปุ่มจากคอลัมน์ 1 ของแถว 2 ของส่วนบนสุด แล้ววางลงในคอลัมน์ 1 ของแถวของส่วนหัว

อัปเดตการตั้งค่าปุ่ม

จากนั้นเปิดการตั้งค่าปุ่มที่ซ้ำกันและอัปเดตสิ่งต่อไปนี้:

• ข้อความปุ่ม: การลงทะเบียน

• ขนาดข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #1a1e36

• ปุ่มไอคอน: ใช่
• ปุ่มไอคอน: ลูกศรขวา (ดูภาพหน้าจอ)

เพิ่มโลโก้

ในคอลัมน์กลาง ให้เพิ่มโมดูลรูปภาพ นี่จะเป็นวิธีที่เราเพิ่มโลโก้ไซต์แบบไดนามิก

วางเมาส์เหนือพื้นที่รูปภาพแล้วคลิกไอคอน "ใช้เนื้อหาแบบไดนามิก" จากเมนูแบบเลื่อนลง ให้เลือก "โลโก้เว็บไซต์"

การตั้งค่ารูปภาพ

จากนั้น ภายใต้แท็บ สไตล์ ให้อัปเดตสิ่งต่อไปนี้:

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

• ความสูงสูงสุด: 55 พิกเซล

เพิ่มไอคอนแฮมเบอร์เกอร์แบบกำหนดเอง

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

เพิ่มโมดูลข้อความ

ในการสร้างไอคอนเมนู เราจะใช้โมดูลข้อความที่มีโค้ด HTML ที่กำหนดเองซึ่งจะถูกจัดรูปแบบด้วย CSS ภายนอก

ไปข้างหน้าและเพิ่มโมดูลข้อความในคอลัมน์ 3

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

จากนั้นเพิ่มโค้ด HTML ต่อไปนี้ในเนื้อหาของโมดูลข้อความ:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

พื้นหลัง

กำหนดสีพื้นหลังให้กับโมดูลข้อความ:

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

การจัดรูปแบบข้อความ

ถัดไป อัปเดตการตั้งค่ารูปแบบดังนี้:

• ความกว้าง: 70 พิกเซล
• การจัดตำแหน่งโมดูล: right
• ส่วนสูง: 70px

• ระยะขอบภายใน: บนสุด 20px, ล่าง 20px, ซ้าย 16px, 16px ขวา

ชั้น CSS

ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้:

• คลาส CSS: et-push-menu-toggle

ใส่โค้ด

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

ไปข้างหน้าและเพิ่มโมดูลรหัสลงในคอลัมน์ 3 ใต้โมดูลข้อความ

จากนั้นวางรหัสต่อไปนี้ (หมายเหตุ: ห่อรหัสนี้ในแท็ก สไตล์ เพื่อให้ทำงานได้อย่างถูกต้อง):

.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}

จากนั้นคัดลอกและวางรหัสนี้โดยตรงด้านล่าง (สำคัญ: ห่อรหัสนี้ในแท็กสคริปต์เพื่อให้ทำงานได้อย่างถูกต้อง):

(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );

อัปเดตข้อความปุ่มและลิงก์

สุดท้าย เราสามารถอัปเดตปุ่มทั้งหมดด้วยข้อความปุ่มที่จำเป็นและ URL ของลิงก์

เสร็จแล้ว!

บันทึกการตั้งค่า

อย่าลืมบันทึกเลย์เอาต์และการตั้งค่า Theme Builder

ผลสุดท้าย

หากต้องการดูผลลัพธ์สุดท้าย ให้ตรวจสอบที่หน้าของคุณ เว็บไซต์.

ทำให้เหนียว

หากคุณต้องการเมนูเวอร์ชัน "เหนียว" เพียงเพิ่มข้อมูลโค้ด CSS ต่อไปนี้ลงในโมดูลโค้ด (ระหว่างแท็กรูปแบบ):

header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
  overflow-y: visible !important;
}

นี่คือผลลัพธ์

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...