วิธีสร้างเมนูแบบเลื่อนลงใน Divi

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

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

ไปกันเถอะ!

แอบมอง

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

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังตัวสร้างธีม Divi ให้ไปที่ตัวสร้างธีม Divi

คลิกไอคอนการพกพา

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เทมเพลตส่วนจะปรากฏในตัวสร้างธีม Divi

ไปกวดวิชากันเถอะ

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

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

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

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

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

สิ่งนี้จะนำคุณไปสู่ตัวแก้ไขเค้าโครงส่วนหัวส่วนกลาง

เมื่อคุณอยู่ใน Global Header Layout Editor แล้ว ให้เลือกตัวเลือก “สร้างตั้งแต่เริ่มต้น

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

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

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

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

พื้นหลัง

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

การขยายความ

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

CSS Class

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

• CSS Class: et-push-menu

CSS ที่กำหนดเอง (แท็บเล็ต)

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

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

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

เพิ่มแถว 1

เมื่อตั้งค่าส่วนเสร็จแล้ว ให้สร้างแถวหนึ่งคอลัมน์ภายในส่วนนั้น

การตั้งค่าแถวที่ 1

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

ออกแบบ

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 1280px
• Padding: 3vh บน, 3vh ด้านล่าง
• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: rgba(255,255,255,0.2)

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

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

ภายใต้เดสก์ท็อป…

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

ภายใต้แท็บเล็ต…

display:flex;
flex-direction:column;
align-items:center;

การตั้งค่าคอลัมน์

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

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

สิ่งนี้จะจัดกึ่งกลางเนื้อหาของคอลัมน์ทั้งในแนวตั้งและแนวนอน

เพิ่มปุ่ม

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

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

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

เนื้อหา

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

ออกแบบ

• สีข้อความของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: หนัก
• ไอคอนปุ่ม: [ตัวเลือกของคุณ]
• ตำแหน่งไอคอนปุ่ม: ซ้าย

การทำซ้ำคอลัมน์

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

เพิ่มแถว2

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

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

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

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

การตั้งค่าแถวที่ 2

อัปเดตการตั้งค่าสำหรับแถวที่ 2 ดังนี้:

• ความกว้างสูงสุด: 1080px
• ความกว้างขอบล่าง: 0px

การตั้งค่าคอลัมน์

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

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

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

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

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

ทำซ้ำคอลัมน์

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

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

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

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

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

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

เพิ่มมาตรา

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

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

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

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

การขยายความ

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

เพิ่มแถว

หลังจากเพิ่มช่องว่างภายในส่วนแล้ว ให้เพิ่มแถวสามคอลัมน์ในส่วนนั้น

การตั้งค่าแถว

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

ขนาด

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

การขยายความ

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

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

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

display:flex;
align-items:center;

สิ่งนี้จะจัดกึ่งกลางคอลัมน์ภายในแถวในแนวตั้ง

เพิ่มปุ่ม

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

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

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

• ข้อความปุ่ม: ลงทะเบียน
• ขนาดข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #1a1e36
• แสดงไอคอนปุ่ม: ใช่
• ไอคอนปุ่ม: ลูกศรขวา (ดูภาพหน้าจอ)

เพิ่มโลโก้

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

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

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

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

• การจัดตำแหน่งภาพ: center
• ความสูงสูงสุด: 55px

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

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

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

ในการสร้างไอคอนเมนู เราจะใช้โมดูลข้อความที่มี 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

การออกแบบข้อความ

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

• ความกว้าง: 70px
• การจัดตำแหน่งโมดูล: right
• ส่วนสูง: 70px
• ช่องว่างภายใน: บน 20px ล่าง 20px ซ้าย 16px ขวา 16px

CSS Class

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

• CSS Class: 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 ของลิงก์

แค่นั้นแหละ!

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

อย่าลืมบันทึกการตั้งค่าเลย์เอาต์และตัวสร้างธีม

ผลสุดท้าย

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

ทำให้เหนียวหนึบ

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

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

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!