เมนูแบบเลื่อนลงสไตล์ด้วย CSS และ Javascript

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

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

เลือก ... RedPurpleBlueYellowGreenBlackWhite

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

 $ (document) .ready (function () {$ (". selected"). เลือก ();}); 

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

เลือก ... RedPurpleBlueYellowGreenBlackWhite

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

ลองดูตัวอย่างด้านล่างหรือดาวน์โหลดตัวอย่างในซิป

ดูเพิ่มเติมที่