วิธีแก้ไขเมนูมือถือใน Webflow

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

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

วิธีเพิ่มแถบนำทาง

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

ใน Webflow เมนูนี้และฟังก์ชันต่างๆ ถูกสร้างขึ้นภายในองค์ประกอบ NavBar การเพิ่มองค์ประกอบนี้ในการออกแบบของคุณต้องมีขั้นตอนง่ายๆ สี่ขั้นตอน:

1. แตะไอคอน "+" ที่ด้านบนของแผงด้านซ้ายเพื่อเปิดแผง "เพิ่ม"
   
2. เลื่อนลงไปที่ส่วน "ส่วนประกอบ"
   
3. คลิกองค์ประกอบ “NavBar” ค้างไว้
   
4. ลากองค์ประกอบไปที่ส่วนหัวของหน้า
   

วิธีแก้ไขเมนูมือถือ

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

วิธีเพิ่มลิงค์เพิ่มเติมในเมนู

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

ทำตามขั้นตอนเหล่านี้เพื่อเพิ่มลิงก์การนำทางเพิ่มเติม:

1. คลิกที่องค์ประกอบใดๆ ภายใน NavBar
   
2. ไปที่แผง "การตั้งค่าองค์ประกอบ" ทางด้านขวา
   
3. กดไอคอนรูปเฟืองเพื่อเปิด "การตั้งค่า"
   
4. เลื่อนไปที่ส่วน "การตั้งค่า NavBar"
   
5. แตะปุ่ม "เพิ่มลิงค์"
   

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

1. เลือกลิงค์นำทาง
2. ไปที่แผง "การตั้งค่าองค์ประกอบ"
   
3. ค้นหาส่วน "การตั้งค่าลิงก์"
   
4. ป้อน URL ของหน้าเว็บที่กำหนดลงในช่อง "URL"
   

วิธีเปลี่ยนแอนิเมชั่นเมนู

ใน Webflow คุณยังสามารถเปลี่ยนวิธีแสดงเมนูมือถือเมื่อผู้เยี่ยมชมคลิกปุ่มเมนู คุณสามารถเลือกระหว่างสามประเภทของภาพเคลื่อนไหวเหล่านี้:

• ดร็อปดาวน์ – ตามค่าเริ่มต้น เมนูมือถือจะเลื่อนลงมาจาก NavBar เมื่อผู้เยี่ยมชมแตะปุ่มเมนู มันจะใช้ความกว้างของหน้าต่างเบราว์เซอร์ทั้งหมด
• ด้านขวา – หากคุณเลือกการแสดงภาพเคลื่อนไหว เมนูมือถือของคุณจะปรากฏขึ้นจากด้านขวาของหน้าจอ เมนูนี้จะใช้ความสูงของหน้าต่างเบราว์เซอร์ทั้งหมด
• Over Left – ประเภทเมนูนี้จะเหมือนกับ Over Right ยกเว้นว่าเมนูการนำทางจะย้ายจากด้านซ้ายของหน้าจอ

ในการตั้งค่าภาพเคลื่อนไหวการเปิดเผยที่คุณต้องการ ให้ทำดังต่อไปนี้:

1. เลือกองค์ประกอบใดก็ได้ภายใน NavBar
   
2. ไปที่แผง "การตั้งค่าองค์ประกอบ" ทางด้านขวาของหน้าจอ
   
3. แตะไอคอนรูปเฟืองเพื่อเปิด "การตั้งค่า"
   
4. ไปที่ส่วน "การตั้งค่า NavBar"
   
5. คลิกที่ตัวเลือก "ประเภท"
   
6. เลือกสไตล์ที่ต้องการจากเมนูแบบเลื่อนลง
   

ในส่วน "การตั้งค่า NavBar" คุณยังสามารถควบคุมสิ่งต่อไปนี้:

• การค่อยๆ เปิด: ประเภทเส้นโค้งที่ใช้เพื่อทำให้การเปลี่ยนผ่านเปิดเคลื่อนไหว
• การค่อยๆ ปิด: ประเภทของเส้นโค้งที่ใช้เพื่อทำให้ช่วงการเปลี่ยนภาพใกล้เคลื่อนไหว
• ระยะเวลา: ใช้เวลานานเท่าใดกว่าที่เมนูจะปรากฏ

โปรดทราบว่าระยะเวลาการเปลี่ยนแปลงจะวัดเป็นมิลลิวินาที

วิธีเปลี่ยนรูปแบบเมนู

Webflow ทำให้ง่ายต่อการจัดรูปแบบส่วนใดๆ ของแถบการนำทาง ช่วยให้คุณปรับเมนูมือถือเข้ากับการออกแบบเว็บไซต์ของคุณได้อย่างลงตัว

เมื่อต้องการจัดรูปแบบปุ่มเมนู ให้ทำดังต่อไปนี้:

1. เลือกปุ่มเมนู
   
2. ไปที่แผง "สไตล์" ทางด้านขวา (ไอคอนแปรง)
   

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

ในการเปลี่ยนสีพื้นหลัง ให้ทำดังนี้:

1. ไปที่ส่วน "พื้นหลัง"
   
2. แตะไอคอนปล่อยสีเพื่อเปิด "ตัวเลือกสี"
   
3. เลือกสีที่ต้องการ
   

หากคุณต้องการเปลี่ยนขนาดของไอคอนแฮมเบอร์เกอร์ ให้ทำตามขั้นตอนเหล่านี้:

1. ไปที่ส่วน "การพิมพ์"
   
2. เพิ่มหรือลดขนาดไอคอนในช่อง “Aa”
   

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

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

การนำทางบนมือถือทำได้ง่าย

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

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

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