วิธีรวมแถบเลื่อนความคืบหน้ากับเมนูการนำทางคงที่ใน Divi

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

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

การออกแบบนี้จะสมบูรณ์แบบในการนำผู้ใช้ผ่านหน้า Landing Page ที่อธิบายขั้นตอนของกระบวนการ คุณจะเห็น

มาเริ่มกันเลย!

แอบมอง

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

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

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

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

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

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

ดาวน์โหลด

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

https://youtu.be/Kf-ciVKEZFI

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

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

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

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

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

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

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

ส่วนที่ 1: การสร้างเค้าโครงหน้าส่วนแบบเต็มหน้าจอ

ส่วนบนสุด

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

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ภายในแถว เพิ่มโมดูลข้อความ

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

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

ใต้แท็บออกแบบ ให้อัปเดตการจัดแนวข้อความให้อยู่ตรงกลาง

อัปเดตรูปแบบหัวเรื่อง H2 ต่อไปนี้:

• หัวข้อ 2 แบบอักษร: Roboto
• หัวเรื่อง 2 ขนาดข้อความ: 6vw

เปิดการตั้งค่าส่วนและอัปเดตความสูงเป็น 100vh (หรือ 100% ของความสูงของวิวพอร์ต/หน้าต่าง) เพื่อให้แน่ใจว่าส่วนนั้นเต็มหน้าจอ แล้วแกะเบาะออกดังนี้

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

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

display:flex;
flex-direction:column;
justify-content:center;

ขั้นตอนที่หนึ่งส่วน

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

หากต้องการสร้างส่วนขั้นตอนแรก ให้ทำซ้ำส่วนบนที่เราเพิ่งสร้างขึ้น

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

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

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

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

เปลี่ยนการจัดตำแหน่งข้อความเป็นจัดชิดซ้าย

จากนั้นอัปเดตสิ่งต่อไปนี้:

• หัวเรื่อง 2 สีข้อความ: #00a4e0
• ความกว้างสูงสุด: 40vh (เดสก์ท็อป), 80vh (แท็บเล็ต)
• การจัดตำแหน่งโมดูล: ศูนย์

ที่ดูแลขั้นตอนที่หนึ่งส่วน

ขั้นตอนที่สองส่วน

หากต้องการสร้างส่วนขั้นตอนที่สอง ให้ทำซ้ำขั้นตอนที่หนึ่งที่เราเพิ่งสร้างขึ้น

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

• สีพื้นหลังไล่ระดับด้านซ้าย: rgba(255,255,255,0.85)
• สีพื้นหลังไล่ระดับทางขวา: rgba(255,255,255,0.85)

จากนั้นอัปเดตสีของหัวเรื่อง:

• หัวเรื่อง 2 สีข้อความ: #ee4266

สีพื้นหลังและส่วนหัวของส่วนนี้จะตรงกับสีของปุ่มที่สัมพันธ์กับส่วนนี้ในเมนูที่เราจะสร้างในภายหลัง

ขั้นตอนที่สามส่วน

หากต้องการสร้างส่วนขั้นตอนที่ 3 ให้ทำซ้ำขั้นตอนที่ 2 แล้วลากไปที่ด้านล่างของหน้า

จากนั้นเปลี่ยนสีส่วนหัวของโมดูลข้อความ

• หัวเรื่อง 2 สีข้อความ: #26c485

ขั้นตอนที่สี่ส่วน

ขั้นตอนสุดท้ายของเราคือขั้นตอนที่สี่ ในการสร้างส่วนนี้ ให้ทำซ้ำขั้นตอนที่สองแล้วลากไปที่ด้านล่างของหน้า

จากนั้นอัปเดตส่วนหัวสำหรับโมดูลข้อความในส่วนนั้น

• หัวเรื่อง 2 สีข้อความ: #2a1e5c

ผลลัพธ์

นี่คือผลลัพธ์ของการจัดวางของเรา

ส่วนที่ 2: การสร้างแถบเลื่อนความคืบหน้าและเมนู

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

ในการเริ่มต้น ให้สร้างส่วนที่คงที่ที่ด้านบนของหน้า ไปข้างหน้าและสร้างส่วนปกติใหม่แล้วลากไปที่ด้านบนของเค้าโครงหน้า

เปิดการตั้งค่าส่วนและนำช่องว่างภายในออกดังนี้:

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

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

• ตำแหน่ง: คงที่
• ดัชนี Z: 999

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

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

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง
• ตำแหน่ง: Absolute

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

height: 100%;
display:flex;
align-items:center;

เพื่อให้แน่ใจว่าคอลัมน์มีความสูงเท่ากับส่วน นอกจากนี้ยังจะช่วยให้โมดูลมีความสูง 100% อีกด้วย นี่จะเป็นกุญแจสำคัญเพื่อให้แน่ใจว่าแถบความคืบหน้าจะเต็มส่วน

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

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

• แสดงตัวแบ่ง: NO
• สีพื้นหลัง: #222222

• ความกว้าง: 100%
• ส่วนสูง: 100%

หมายเหตุ: เราให้แถบความคืบหน้ากว้าง 100% ที่นี่ เพื่อให้คุณมองเห็นได้ภายในการออกแบบ เราจะเพิ่มและลดความกว้างของตัวแบ่ง/แถบความคืบหน้าด้วย JQuery

ใต้แท็บขั้นสูง เพิ่ม CSS ID และกำหนดตำแหน่งที่แน่นอน

• CSS ID: scrollBar
• ตำแหน่ง: Absolute

การเพิ่มตัวบ่งชี้ข้อความร้อยละ

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

ใต้ตัวแบ่ง ให้เพิ่มโมดูลข้อความ

จากนั้นวาง HTML ต่อไปนี้ลงในเนื้อหา:

<p><span></span></p>

JQuery ของเราจะเขียนข้อความเปอร์เซ็นต์ลงใน HTML นี้ (ระหว่างแท็กช่วง) คุณจะไม่สามารถดูอะไรได้เลย

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

• แบบอักษรของข้อความ: Roboto
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff
• ขนาดข้อความ: 16px
• ช่องว่างภายใน: 0.8em ด้านบน, 0.8 ด้านล่าง, 15px ซ้าย

ภายใต้แท็บขั้นสูง ให้กำหนดคลาส CSS แบบกำหนดเอง และปิดใช้งานบนโทรศัพท์และแท็บเล็ต

• CSS Class: et-progress-label
• ปิดการใช้งานบน: โทรศัพท์, แท็บเล็ต

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

หากต้องการเพิ่มโค้ด ให้เพิ่มโมดูลโค้ดด้านล่างโมดูลข้อความ

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

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

ที่ดูแลแถบความคืบหน้าและข้อความเปอร์เซ็นต์ ไปที่เมนูนำทางกัน

การสร้างปุ่มเมนูด้วย Anchor Links

ตอนนี้เราพร้อมที่จะสร้างเมนูการนำทางซึ่งจะมีปุ่มสี่ปุ่มที่ครอบคลุมความกว้างของเบราว์เซอร์ ฉันคิดว่ามันคงจะดีถ้าให้แถบเลื่อนเติมแต่ละปุ่มเมื่อผู้ใช้ไปถึงส่วนที่เกี่ยวข้องที่ลิงก์ไป นี่คือความคิด แต่ละปุ่มจะมีความกว้าง 25% ของความกว้างทั้งหมดของเบราว์เซอร์ และเนื่องจากสี่ส่วนของเราทั้งหมดมีความสูงเท่ากัน (100vh) แต่ละส่วนทั้งสี่จึงแสดงถึง 25% ของพื้นที่ที่เลื่อนได้ทั้งหมดของเค้าโครงหน้า ซึ่งจะทำให้แถบความคืบหน้าถึงจุดสิ้นสุดของแต่ละปุ่มได้อย่างแม่นยำเมื่อส่วนที่เกี่ยวข้องเติมวิวพอร์ต คุณจับที่? ถ้าไม่หวังว่ามันจะสมเหตุสมผลมากขึ้นในภายหลัง

แถวและคอลัมน์

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

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

display:flex;
flex-wrap:nowrap;

ขั้นตอนที่หนึ่งปุ่ม

ในการสร้างปุ่มแรก ให้เพิ่มโมดูลปุ่มในคอลัมน์ซ้ายสุด

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

• ข้อความปุ่ม: ขั้นตอนที่ 1
• URL ลิงก์ของปุ่ม: #one
  (ลิงก์สมอนี้จะข้ามส่วนที่มีรหัส CSS ที่เกี่ยวข้องที่เราจะเพิ่มในภายหลัง)

ถัดไป อัปเดตลักษณะปุ่มดังนี้:

• การจัดตำแหน่งปุ่ม: กึ่งกลาง
• ขนาดข้อความของปุ่ม: 20px (เดสก์ท็อป), 14px (แท็บเล็ต)
• ปุ่มสีพื้นหลัง: โปร่งใส
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.2em
• แบบอักษรของปุ่ม: Roboto
• รูปแบบตัวอักษรของปุ่ม: TT
• ช่องว่างภายใน: 0.8em ด้านบน, 0.8em ด้านล่าง, 0 ซ้าย, 0 right

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

display:block !important;
width: 100%;

ขั้นตอนที่ 2 ปุ่ม

ในการสร้างปุ่มสำหรับขั้นตอนที่สอง ให้ทำซ้ำปุ่มในคอลัมน์ที่หนึ่งแล้วลากไปไว้ในคอลัมน์ 2

จากนั้นอัปเดตสิ่งต่อไปนี้:

• สีข้อความของปุ่ม: #ee4266
• สีพื้นหลังของปุ่ม: rgba(255,255,255,0.85)

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

จากนั้นอัปเดต URL ลิงก์ของปุ่มดังต่อไปนี้:

• URL ลิงก์ของปุ่ม: #two

ขั้นตอนที่ 3 ปุ่ม

ในการสร้างปุ่มขั้นตอนที่ 3 ให้ทำซ้ำปุ่มขั้นตอนที่ 1 (มีสี bg เหมือนกัน) แล้วลากลงในคอลัมน์ 3

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

• สีข้อความของปุ่ม: #26c485

จากนั้นอัปเดต URL ลิงก์ของปุ่มดังต่อไปนี้:

• URL ลิงก์ของปุ่ม: #three

ขั้นตอนที่ 4 ปุ่ม

ในการสร้างปุ่มขั้นตอนที่ 3 ให้ทำซ้ำปุ่มขั้นตอนที่ 2 (มีสี bg เหมือนกัน) แล้วลากลงในคอลัมน์ 4

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

• สีข้อความของปุ่ม: #2a1e5c

จากนั้นอัปเดต URL ลิงก์ของปุ่มดังต่อไปนี้:

• URL ลิงก์ของปุ่ม: #four

การเพิ่มรหัส CSS ของส่วนที่สอดคล้องกันสำหรับ Anchor Links

เมื่อปุ่มต่างๆ เสร็จสิ้นและทุกปุ่มมี URL ของลิงก์ Anchor เราสามารถเพิ่ม CSS ID ของส่วนที่เกี่ยวข้องลงในแต่ละส่วนที่เราต้องการให้แต่ละปุ่มข้ามไปที่หน้าได้

ขั้นตอนหนึ่ง CSS ID

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

• CSS ID: one

ขั้นตอนที่สอง CSS ID

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

• CSS ID: two

ขั้นตอนที่ 3 ส่วน CSS ID

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

• CSS ID: สาม

ขั้นตอนที่สี่ CSS ID

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

• CSS ID: สี่

ผลสุดท้าย

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

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

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

ไชโย!