วิธีสร้างเมนู Sticky แบบขยายบน Hover ด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ขั้นตอนทั่วไป

ปิดใช้งานการนำทางคงที่

ไปที่ตัวเลือกธีม Divi

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

หากคุณกำลังวางแผนที่จะใช้เมนู Sticky แบบขยายที่ด้านล่างของหน้า คุณอาจต้องการเว้นแถบเมนูหลักที่ด้านบน ในการทำเช่นนั้น คุณจะต้องไปที่ตัวเลือกธีมของ Divi

ปิดใช้งานการนำทางคงที่

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

• แถบนำทางคงที่: ปิดการใช้งาน

ซ่อนแถบเมนูหลักในหน้า

เปิดการตั้งค่าหน้า

ไปที่หน้าที่คุณต้องการเพิ่มเมนู Sticky แบบขยายและเปิดการตั้งค่าหน้า

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

ซ่อนเมนูหลักโดยเพิ่มบรรทัดโค้ด CSS ต่อไปนี้ในหน้าของคุณ

#main-header {
display: none;
}

เพิ่มส่วนใหม่ไปที่ท้ายหน้า

ไม่ว่าคุณต้องการสร้างตัวอย่างใด ขั้นตอนพื้นฐานบางอย่างยังคงเหมือนเดิม ขั้นตอนแรกคือการเพิ่มส่วนปกติที่ด้านล่างของหน้า

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

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

bottom: 0px;
position: fixed;

ดัชนี Z

และเราจะตรวจสอบให้แน่ใจว่าแถว (และโมดูลข้อความที่เราเพิ่มในขั้นตอนที่จะเกิดขึ้น) ยังคงอยู่ที่ด้านบนของเนื้อหาหน้าทั้งหมดโดยเพิ่มดัชนี Z ในการตั้งค่าการมองเห็นของแถว

• ดัชนี Z: 99

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

เพิ่มโค้ด CSS ระหว่างแท็กสไตล์

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

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

สร้างตัวอย่างใหม่ #1

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

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

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

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

ไปที่การตั้งค่าพื้นหลังของโมดูลและเปลี่ยนสีพื้นหลัง

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

โฮเวอร์สีพื้นหลัง

แก้ไขสีพื้นหลังนี้เมื่อวางเมาส์เหนือ

• สีพื้นหลัง: rgba(255,255,255,0.83)

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

และเพิ่มพื้นหลังการไล่ระดับสีเริ่มต้นด้วย

• สี 1: rgba(255,255,255,0)
• สี 2: #ffffff
• ตำแหน่งสุดท้าย: 60%

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

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

• แบบอักษรของข้อความ: Khand
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #021827
• ขนาดตัวอักษร: 3vh
• การวางแนวข้อความ: ศูนย์

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

แก้ไขการตั้งค่าข้อความบางส่วนเมื่อวางเมาส์เหนือ

• สีข้อความ: rgba(255,255,255,0)
• ขนาดตัวอักษร: 0vh

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

จากนั้นไปที่การตั้งค่าข้อความลิงก์และเปลี่ยนสีข้อความลิงก์

• ลิงค์สีข้อความ: #000000

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

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

• แบบอักษรของรายการที่ไม่เรียงลำดับ: Khand
• รูปแบบตัวอักษรของรายการที่ไม่เรียงลำดับ: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความรายการที่ไม่เรียงลำดับ: Center
• สีข้อความของรายการที่ไม่เรียงลำดับ: rgba(255,255,255,0)
• ขนาดข้อความรายการที่ไม่เรียงลำดับ: 0px
• รายการที่ไม่เรียงลำดับ ความสูงของบรรทัด: 0em
• ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายใน

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

จากนั้น แก้ไขค่าบางค่าบนโฮเวอร์เพื่อให้รายการเมนูปรากฏขึ้น

• สีข้อความของรายการที่ไม่เรียงลำดับ: #000000
• ขนาดข้อความรายการที่ไม่เรียงลำดับ: 2vh
• ความสูงของเส้นที่ไม่เรียงลำดับ: 2.1em

ระยะห่างเริ่มต้น

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

• ระยะขอบซ้าย: 45vw (เดสก์ท็อป), 39vw (แท็บเล็ต), 33vw (โทรศัพท์)
• ระยะขอบขวา: 45vw (เดสก์ท็อป), 39vw (แท็บเล็ต), 33vw (โทรศัพท์)
• ด้านบน: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• Padding ด้านล่าง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)

โฮเวอร์ระยะห่าง

แก้ไขค่าเดียวกันเหล่านี้เมื่อวางเมาส์เหนือ

• ระยะขอบซ้าย: 14vw
• ระยะขอบขวา: 14vw
• ช่องว่างภายในด้านบน: 8vw
• แผ่นรองด้านล่าง: 8vw

เส้นขอบเริ่มต้น

ไปที่การตั้งค่าเส้นขอบ และตรวจดูให้แน่ใจว่ามุมโค้งมนแต่ละมุมมีค่า '0px'

โฮเวอร์ชายแดน

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

• ซ้ายบน: 50vw
• ขวาบน: 50vw

กล่องเงา

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

• ความแรงเงาของกล่องเงา: 1000ms
• เงาสี: rgba(0,0,0,0.68)

CSS Class

เรากำลังเพิ่มคลาส CSS ให้กับโมดูลด้วย

• CSS Class: dt-menu

การเปลี่ยนผ่าน

สุดท้ายแต่ไม่ท้ายสุด ให้ลดระยะเวลาการเปลี่ยนภาพในการตั้งค่าการเปลี่ยน

• ระยะเวลาการเปลี่ยนภาพ: 100ms

สร้างตัวอย่างใหม่ #2

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

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

สู่ตัวอย่างที่สอง! ที่นี่ เราจะเพิ่ม '≡ Menu' อีกครั้งโดยใช้รูปแบบข้อความในย่อหน้าและรายการเมนูโดยใช้รายการที่ไม่เรียงลำดับ นอกจากนี้ เราจะเพิ่มลิงก์ไปยังรายการเมนูแต่ละรายการด้วย

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

ไปที่การตั้งค่าพื้นหลังและเปลี่ยนสีพื้นหลัง

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

โฮเวอร์สีพื้นหลัง

แก้ไขสีพื้นหลังบนโฮเวอร์

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

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

จากนั้นไปที่แท็บออกแบบและทำการเปลี่ยนแปลงลักษณะที่ปรากฏของสำเนาย่อหน้า

• แบบอักษรของข้อความ: Khand
• สีข้อความ: #021827
• ขนาดตัวอักษร: 3vh

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

แก้ไขการตั้งค่าเหล่านี้เมื่อวางเมาส์เหนือ

• สีข้อความ: rgba(255,255,255,0)
• ขนาดตัวอักษร: 0vh

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

ไปที่การตั้งค่าข้อความและเปลี่ยนสีข้อความลิงก์

• สีของข้อความลิงก์: #ffffff

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

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

• แบบอักษรของรายการที่ไม่เรียงลำดับ: Khand
• รูปแบบตัวอักษรของรายการที่ไม่เรียงลำดับ: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งข้อความรายการที่ไม่เรียงลำดับ: Center
• สีข้อความของรายการที่ไม่เรียงลำดับ: rgba(255,255,255,0)
• ขนาดข้อความรายการที่ไม่เรียงลำดับ: 0px
• รายการที่ไม่เรียงลำดับ ความสูงของบรรทัด: 0em
• ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายใน

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

และแก้ไขค่าเหล่านี้บางส่วนเมื่อวางเมาส์ไว้

• สีข้อความของรายการที่ไม่เรียงลำดับ: #ffffff
• ขนาดข้อความรายการที่ไม่เรียงลำดับ: 2vh
• ความสูงของบรรทัดรายการที่ไม่เรียงลำดับ: 2.1em

ระยะห่างเริ่มต้น

จากนั้นไปที่การตั้งค่าระยะห่างและให้พื้นที่โมดูลบางส่วน

• ระยะขอบขวา: 88vw (เดสก์ท็อปและแท็บเล็ต), 71vw (โทรศัพท์)
• ด้านบน: 6vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 18vw (โทรศัพท์)
• ช่วงล่าง: 4vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 12vw (โทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 1vw

โฮเวอร์ระยะห่าง

แก้ไขค่าเมื่อโฮเวอร์

• ระยะขอบขวา: 59vw
• แผ่นรองด้านบน: 13vw
• แผ่นรองด้านล่าง: 8vw
• ช่องว่างภายในด้านซ้าย: 1vw
• ช่องว่างภายในด้านขวา: 13vw

ชายแดน

และเพื่อสร้างการออกแบบวงกลมสี่เหลี่ยมนี้ เราจะเปลี่ยนเส้นขอบบนขวาในการตั้งค่าเส้นขอบ

• ขวาบน: 50vw

กล่องเงา

เราจะเพิ่มเงาของกล่องเพื่อสร้างความลึกให้กับหน้า

• ความชัดเจนของกล่องเงาเบลอ: 1000px
• เงาสี: rgba(0,0,0,0.68)

CSS Class

จากนั้น เราจะเพิ่มคลาส CSS ในแท็บขั้นสูง

• CSS Class: dt-menu

การเปลี่ยนผ่าน

และลดระยะเวลาการเปลี่ยนในแท็บขั้นสูงเพื่อสร้างการเปลี่ยนแปลงอย่างรวดเร็ว

• ระยะเวลาการเปลี่ยนภาพ: 100ms

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

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

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

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