วิธีแก้ไขเมนูแบบเลื่อนลงในเทมเพลต X WordPress

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

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

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

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

ฉันจะแก้ไขเมนูแบบเลื่อนลงใน WordPress ได้อย่างไร

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

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

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

ฉันจะเปลี่ยนการออกแบบเมนูใน WordPress ได้อย่างไร

ที่ลักษณะที่ปรากฏ คลิกที่ลักษณะที่ปรากฏ เมื่อคลิกปุ่มตัวเลือกหน้าจอที่มุมบนขวา คุณจะสามารถเข้าถึงเมนูต่างๆ ได้ คุณจะเห็นเมนูแบบเลื่อนลงพร้อมช่องถัดจาก "คลาส CSS" เป็นบริบท หากต้องการแก้ไขรายการเมนูที่คุณต้องการขยาย คุณต้องเลื่อนลงและคลิกปุ่มเพื่อขยาย

รหัสเมนูแบบเลื่อนลงของ WordPress

เมนูดรอปดาวน์ของ WordPress เป็นวิธีที่ยอดเยี่ยมในการจัดระเบียบเนื้อหาของเว็บไซต์ของคุณ และทำให้ผู้เยี่ยมชมค้นหาสิ่งที่ต้องการได้ง่ายขึ้น มีหลายวิธีในการสร้างเมนูดรอปดาวน์ใน WordPress แต่วิธีที่พบบ่อยที่สุดคือการใช้ปลั๊กอิน มีปลั๊กอินต่างๆ มากมายที่จะช่วยให้คุณสร้างเมนูแบบเลื่อนลงได้ แต่เราขอแนะนำให้ใช้ปลั๊กอิน Mega Menu ปลั๊กอินนี้ใช้งานง่ายและมาพร้อมกับคุณสมบัติที่ยอดเยี่ยมมากมาย รวมถึงความสามารถในการสร้าง เมนูดรอปดาวน์ หลายระดับ เมื่อคุณติดตั้งปลั๊กอินแล้ว คุณจะต้องสร้างเมนูใหม่ ในการดำเนินการนี้ ไปที่หน้าเมนูในพื้นที่ผู้ดูแลระบบ WordPress และคลิกที่ปุ่ม "สร้างเมนูใหม่" ตั้งชื่อเมนูของคุณแล้วเริ่มเพิ่มรายการลงไป คุณสามารถเพิ่มรายการจากหน้าเว็บไซต์ โพสต์ และลิงก์ที่กำหนดเองได้ เมื่อคุณเพิ่มรายการทั้งหมดที่คุณต้องการแล้ว ให้คลิกที่ปุ่ม "บันทึกเมนู" เมื่อบันทึกเมนูของคุณแล้ว คุณจะต้องเพิ่มลงในเว็บไซต์ของคุณ ในการดำเนินการนี้ ให้ไปที่หน้า ลักษณะที่ปรากฏ > เมนู และเลือกเมนูใหม่ของคุณจากดรอปดาวน์ “เลือกเมนูที่จะแก้ไข” เมื่อคุณเลือกเมนูแล้ว คุณจะเห็นตัวเลือกมากมายที่คุณสามารถใช้เพื่อปรับแต่งเมนูได้ ตัวอย่างเช่น คุณสามารถเปลี่ยนลำดับของรายการในเมนูของคุณ เพิ่มรายการใหม่ และเปลี่ยนรูปลักษณ์ของเมนูของคุณ เมื่อคุณปรับแต่งเมนูเสร็จแล้ว ให้คลิกที่ปุ่ม "บันทึกเมนู" เพื่อบันทึกการเปลี่ยนแปลงของคุณ เมนูแบบเลื่อนลง WordPress ใหม่ของคุณพร้อมใช้งานแล้ว!

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

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

วิธีสร้างเมนูที่กำหนดเองใน Wp Admin

ในการสร้างเมนูแบบกำหนดเองใน WP Admin ให้ไปที่ ลักษณะที่ปรากฏ > เมนู และเลือก ใหม่ ในการสร้างเมนู ให้ตั้งชื่อเป็น "เมนูรอง" เลือก "เมนูกำหนดเองของฉัน" สำหรับตำแหน่ง จากนั้นคลิกปุ่ม "สร้างเมนู" สุดท้าย วางสองสามรายการบนเมนู (เช่น รายการเมนู 1 รายการเมนู 2 รายการเมนู 3) และบันทึก หากคุณต้องการสร้างเมนูแบบกำหนดเองโดยทางโปรแกรม คุณต้องเข้าถึงฟังก์ชัน WP_ menus() ก่อน ขั้นตอนนี้เกี่ยวข้องกับการแทรกบรรทัดต่อไปนี้ลงในไฟล์ functions.php: add_action ('WP_head, 'WP_add_menu'); *****br หากคุณต้องการสร้างเมนูแบบกำหนดเองใหม่หลังจากที่คุณได้เพิ่มบรรทัดแล้ว ให้ใช้ฟังก์ชัน WP_ menus() ก่อนที่คุณจะทำอย่างอื่นได้ คุณต้องเข้าใจชื่อเมนูก่อน คุณสามารถทำได้ด้วยฟังก์ชัน wp_ menu_get() คุณสามารถรับชื่อเมนูหลักโดยใช้รหัสต่อไปนี้: *br. WP_ menus() : //get_primary_menu() //รีเซ็ตเมนู ในเมนูปัจจุบัน คุณต้องป้อน ID ของรายการ เมื่อต้องการทำสิ่งนี้ คุณต้องใช้ฟังก์ชัน WP_ menu_get_item() ตัวอย่างเช่น ถ้าคุณต้องการ ID ของรายการแรกในเมนูหลัก คุณสามารถใช้รหัสต่อไปนี้ ในเมนู WP_ จะใช้วิธี br>>>get_item(0)>>br> ฟังก์ชัน wp_ menu_add() ช่วยให้คุณสามารถเพิ่มรายการจากเมนูปัจจุบันไปยังรายการที่กำหนดเองได้ ตัวอย่างเช่น หากคุณต้องการเพิ่มรายการชื่อ “รายการเมนู 1” ลงในเมนูแบบกำหนดเอง ให้ใช้รหัสต่อไปนี้ Add_item('รายการเมนู 1′,'เมนูรอง,'หลัก') หลังจากที่คุณเพิ่มรายการลงในเมนูที่กำหนดเองแล้ว ให้บันทึก สามารถทำได้โดยใช้ฟังก์ชัน WP_ menu_save() หากคุณต้องการบันทึกเมนูแบบกำหนดเอง “เมนูรอง” คุณจะต้องใช้รหัสต่อไปนี้: *br. Save() เป็นวิธีที่เหมาะสมในการดำเนินการนี้ มิฉะนั้น ฟังก์ชัน WP_ menus() จะถูกปิดใช้งาน

WordPress เมนูแบบเลื่อนลง Css

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

ในบทช่วยสอนนี้ ฉันจะอธิบายขั้นตอนต่างๆ ในการสร้างเมนูใน WordPress ปรับแต่งด้วย CSS แล้วพิมพ์โดยใช้ไฟล์ธีม บทช่วยสอนนี้อนุมานว่าคุณคุ้นเคยกับ HTML และ CSS รวมถึงความสามารถในการแก้ไขไฟล์ธีมของ WordPress บทช่วยสอนนี้จะใช้ธีม Twenty และ WordPress เวอร์ชัน 39 แต่ขั้นตอนทั้งหมดจะเหมือนกันสำหรับเว็บไซต์ WordPress 3 เมื่อเราใช้ container_id เป็น container_id แล้ว CSS ID จะถูกเพิ่มลงใน เมนู HTML ซึ่งจะใช้ในภายหลังในสไตล์ CSS ของเรา คลาสวอล์คเกอร์ WordPress แบบกำหนดเองของเราสั่งให้ฟังก์ชัน WP_nav_menu() พิมพ์ HTML ตามพารามิเตอร์ของ Walker ต้องวางโค้ด PHP นี้ในไฟล์ธีมเฉพาะ หากทุกอย่างถูกต้อง ธีมของคุณควรแสดงรายการ HTML ที่ไม่มีรูปแบบ

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

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

ใน CSS เพียงเพิ่มบรรทัดต่อไปนี้ในสไตล์ชีตของคุณ: ดรอปดาวน์ %22br%22 ความกว้างของรายการคือ 100%
บล็อก; br>; บล็อก; br>; บล็อก; br>; บล็อก; br> รายการนี้มีรายการดรอปดาวน์ในรูปแบบต่อไปนี้: *br. มันสัมพันธ์กับผู้อื่น
วัตถุที่ลอยอยู่ในอากาศ ลอยไปทางซ้าย
5px คือขนาดช่องว่างภายใน
ระยะขอบคือ 0xbr โดยมีขอบ *br Drop down-item:hover [dropdown-box]br[/dropdown] URL นี้สามารถพบได้ในกราฟิกต่อไปนี้: *br>%27

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

การเพิ่มเมนูดรอปดาวน์ลงในไซต์ WordPress ของคุณเป็นวิธีที่ยอดเยี่ยมในการจัดระเบียบเนื้อหาของคุณ และทำให้ผู้เยี่ยมชมค้นพบสิ่งที่พวกเขากำลังมองหาได้ง่ายขึ้น มีหลายวิธีในการเพิ่มเมนูแบบเลื่อนลงใน WordPress แต่เราจะใช้ปลั๊กอิน "Max Mega Menu" สำหรับบทช่วยสอนนี้ เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณจะต้องสร้างเมนูใหม่ในส่วน "ลักษณะที่ปรากฏ > เมนู" ของแดชบอร์ด WordPress ของคุณ ในการดำเนินการนี้ เพียงตั้งชื่อเมนูของคุณแล้วคลิกปุ่ม "สร้างเมนู" ถัดไป คุณจะต้องเพิ่มรายการลงในเมนูของคุณ สำหรับตัวอย่างนี้ เราจะเพิ่มหน้าสองสามหน้าจากไซต์ WordPress ของเรา ในการดำเนินการนี้ เพียงทำเครื่องหมายในช่องถัดจากหน้าที่คุณต้องการเพิ่ม แล้วคลิกปุ่ม "เพิ่มในเมนู" เมื่อคุณเพิ่มรายการทั้งหมดที่คุณต้องการลงในเมนูแล้ว ก็ถึงเวลาเริ่มกำหนดค่าเมนูดรอปดาวน์ของคุณ ในการดำเนินการนี้ เพียงคลิกที่แท็บ "Mega Menu" ในคอลัมน์ด้านซ้าย จากนั้นเลือกตัวเลือก "Dropdown" ใต้หัวข้อ "Menu Type" เมื่อคุณเลือกตัวเลือก "ดรอปดาวน์" แล้ว คุณจะต้องเลือกว่ารายการใดในเมนูของคุณที่จะแสดงในรายการดรอปดาวน์ ในการดำเนินการนี้ ให้ทำเครื่องหมายในช่องถัดจากรายการที่คุณต้องการรวมในรายการแบบเลื่อนลง จากนั้นคลิกปุ่ม "บันทึกเมนู" และนั่นคือทั้งหมดที่มี! คุณได้เพิ่ม เมนูแบบเลื่อนลงแบบไดนามิก ไปยังไซต์ WordPress เรียบร้อยแล้ว

การสร้างเมนูดรอปดาวน์ในธีม WordPress นั้นค่อนข้างง่าย ในบทความนี้ ผมจะแนะนำสองวิธีง่ายๆ สำหรับ WordPress ในการสร้าง HTML สำหรับเมนูแบบเลื่อนลง มีสองโพสต์ที่จะแนะนำคุณเกี่ยวกับการพัฒนาเมนูแบบเลื่อนลงหากคุณไม่คุ้นเคยกับหัวข้อนี้ เมนู Suckerfish ใช้ไฟล์ JavaScript ขนาดเล็กมากเมื่อใช้ Internet Explorer เวอร์ชันเก่า หลายคนพยายามโค้ด HTML ลงในไฟล์ header.php แต่ก็ไม่ได้ยืดหยุ่นและใช้งานได้ดีเป็นพิเศษ เนื่องจากฉันไม่สามารถเข้าสู่รายการโดยใช้ WP_list_pages() ฉันจึงสร้างแท็กของตัวเองและเพิ่ม id ของเราลงในรายการ แท็กแสดงรายการเฉพาะหน้าที่คุณสร้าง ดังนั้นฉันจึงรวมบรรทัดโค้ดเพื่อแสดงหน้า index.php ในเมนู เนื่องจากหน้าแรกของคุณมักเป็นหน้าที่ไม่ใช่ WordPress

ใน WordPress 2.75 มีโค้ดบรรทัดเดียวที่สามารถสร้างสิ่งที่เราทำด้านบนโดยใช้แท็กเทมเพลต WP_page_menu() รหัสจะมีป้ายกำกับดังนี้: *code type=html&code=code ลิงก์ทั้งหมดจะถูกรวมไว้ และรายการเมนูจะเรียกว่าหน้าที่ตั้งชื่อตามนั้น โดยการตั้งค่า show_home เป็น 1 นั้น WordPress ต้องการให้เรารวมโฮมเพจของเราไว้ในเมนู ไม่จำเป็นต้องใช้ div wrapper ใน เมนูแบบเลื่อนลง อย่างไรก็ตาม มักใช้ในการเข้ารหัส หากต้องการตั้งชื่อคลาสของคุณ ให้ใช้พารามิเตอร์ชื่อคลาส ไม่สามารถเพิ่มคลาส current_page_item ไปยังโฮมเพจได้ หากคุณต้องการจัดรูปแบบรายการเมนูปัจจุบัน ให้ใช้ wp_list_pages แทน

ฉันจะสร้างรายการดรอปดาวน์ที่กำหนดเองใน WordPress ได้อย่างไร

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

เมนูแบบเลื่อนลง

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

ปลั๊กอิน JavaScript ดรอปดาวน์ของ Bootstrap ทำให้ผู้ใช้สามารถโต้ตอบกับเมนูดรอปดาวน์ได้อย่างง่ายดาย การตัดสินใจออกแบบนี้ขึ้นอยู่กับข้อเท็จจริงที่ว่ามีการสลับโดยการคลิกแทนที่จะวางเมาส์ไว้ แม้ว่าจะไม่ต้องการการวางตำแหน่งแบบไดนามิก แต่ดรอปดาวน์จะไม่ถูกใช้เพื่อวางตำแหน่งในแถบนำทางโดยใช้ Popper.js ใน Bootstrap รองรับการโต้ตอบกับเมนูแป้นพิมพ์มาตรฐานส่วนใหญ่ ดรอปดาวน์ปุ่มปรับขนาดสามารถใช้ได้กับปุ่มทุกขนาด รวมถึงดรอปดาวน์เริ่มต้นและแบบแยกส่วน แทนที่จะใช้เพียง >a>s ในเมนูดร็อปดาวน์ของคุณ ให้ใช้องค์ประกอบ <button> เมื่อเมนูดรอปดาวน์มีส่วนหัว คุณสามารถใช้เพื่อติดป้ายกำกับส่วนต่างๆ ของการดำเนินการได้

เมนูประกอบด้วยรายการที่เกี่ยวข้องจำนวนหนึ่งซึ่งคั่นด้วยตัวแบ่ง ใช้ยูทิลิตี้ระยะขอบหรือช่องว่างภายใน หากคุณต้องการพื้นที่เชิงลบจำนวนเล็กน้อย ต้องเพิ่มรายการที่ปิดใช้งานข้อมูลในรายการในรายการแบบเลื่อนลงเพื่อปิดการใช้งาน Data-toggle=dropdown สามารถเพิ่มลงในลิงก์หรือปุ่มเพื่อสลับได้ เมื่อรายการเมนูแบบเลื่อนลงเริ่มทำงาน เหตุการณ์จะเริ่มจากองค์ประกอบหลัก ในแอตทริบิวต์ข้อมูล data-offset=' คือชื่อของตัวเลือกที่จะผนวกเข้ากับข้อมูล