เมนูแบบเลื่อนลง 30 สคริปต์ที่มีประโยชน์เพื่อปรับปรุงการนำทางส่วนหัว
เมนูแบบเลื่อนลง (เรียกอีกอย่างว่าเมนูแบบเลื่อนลง) เป็นสิ่งสำคัญในการออกแบบเว็บส่วนใหญ่ มันมีบทบาทสำคัญในการสร้างเว็บไซต์ที่มีประสิทธิภาพและเป็นมิตรกับผู้ใช้ มันเป็นทางออกที่ดีที่จะตัดทอนเมนูขนาดยาวที่ทำให้พื้นที่หน้าจอกว้างขึ้นทำให้พวกเขาแสดงในรูปแบบหมวดหมู่ย่อยหมวดหมู่ย่อยที่มีการจัดระเบียบมากขึ้น.
ในบทความนี้เราต้องการแสดงให้คุณเห็น สคริปต์เมนูแบบเลื่อนลงที่ดีที่สุด เรามารู้จัก เมนูแบบเลื่อนลงเหล่านี้แตกต่างกันไป CSS เท่านั้น, CSS & Javascripts และเมนูที่จะทำงานกับไลบรารี Javascript ปัจจุบันของคุณเช่น jQuery, MooTools และ แบบเดิม. รายการทั้งหมดหลังจากกระโดด.
นี่คือบทความที่เกี่ยวข้องที่เราคิดว่าคุณอาจสนใจ:
- สร้างตาราง HTML
- ชุดเริ่มต้นสำหรับนักออกแบบเว็บไซต์
- สคริปต์การนำทางที่อิงกับ CSS Tab
CSS (เท่านั้น)
หากคุณกังวลเกี่ยวกับการปิดการใช้งาน Javascript ในเบราว์เซอร์ของลูกค้าเมนูแบบเลื่อนลง css-only เหล่านี้จะไม่ทำให้คุณผิดหวัง.
CSS เมนูแบบเลื่อนลงกรอบงาน. ชื่อกล่าวมันทั้งหมด มันเป็นกรอบภายใต้ GNU General Public License เบราว์เซอร์ที่ใช้ร่วมกันได้มีน้ำหนักเบาและแปลงได้ง่ายเพื่อเลียนแบบเมนูแบบเลื่อนลงที่มีอยู่มากมาย ตัวอย่างเช่น Flickr, Adobe และ MTV.com.

สุดยอด CSS เมนูแบบเลื่อนลง

เมนูแบบเลื่อนลง CSS Express. ช่วยคุณสร้างเมนูแบบเลื่อนลง CSS ด่วน (ด่วน) โดยไม่มีข้อ จำกัด ที่พบในเมนู CSS "บริสุทธิ์" อื่น ๆ.

CSS + Javascripts
ด้วยความช่วยเหลือของ Javascript เมนูแบบเลื่อนลงเป็นแบบโต้ตอบมากขึ้นหรืออย่างน้อยพวกเขาได้รับภาพเคลื่อนไหวที่ละเอียดอ่อนที่ช่วยยกระดับประสบการณ์ผู้ใช้ CSS ในทางกลับกันตรวจสอบให้แน่ใจว่ารูปลักษณ์และความรู้สึกนั้นง่ายมาก.
เมนูการนำทางทุกระดับ (v2.2). เมนูตามรายการ CSS / HTML พร้อมรองรับเมนูย่อยระดับไม่ จำกัด มันมีน้ำหนักเบาและใช้งานง่าย.

แท็บแบบหล่นลง (5 รูปแบบ). ดร็อปดาวน์แท็บคือเมนูแท็บ CSS แนวนอนที่รองรับเมนูดร็อปดาวน์ระดับที่สองสำหรับแต่ละแท็บ มี 5 สไตล์ให้เลือก.

เมนูแบบเลื่อนลงของ CSS CSS. Chrome Menu เป็นเมนูแบบเลื่อนลง CSS และ JavaScript ไฮบริด ง่ายต่อการกำหนดค่าและเครื่องมือค้นหาที่เป็นมิตร แถบเมนูหลักประกอบด้วยรายการ CSS ในขณะที่เมนูแบบเลื่อนลงเป็นเพียงแท็ก DIV ปกติในหน้า.

jQuerys
หากคุณติดตั้ง jQuery Javascript Library บนเว็บไซต์ของคุณต่อไปนี้เป็นเมนูแบบเลื่อนลงที่น่าสนใจโดยคุณควรทราบ.
เมนูการนำทางที่ราบรื่น . Smooth Navigation Menu เป็นเมนูที่ใช้ CSS list หลายระดับขับเคลื่อนโดยใช้ jQuery ที่ทำให้การนำทางเว็บไซต์เป็นไปอย่างราบรื่น นี่คืออีกหนึ่งเมนูที่คล้ายกัน - เมนู CSS หลายระดับ jQuery.

Superfish. Superfish เป็นเมนูเสริมสไตล์ jQuery ที่ใช้ Suckerfish ซึ่งเป็นเมนูแบบเลื่อนลง CSS ที่มีอยู่เดิม [สาธิต | Download]

Mega เมนูแบบเลื่อนลง. เมนูแบบเลื่อนลงที่เก็บลิงค์มากกว่าหนึ่งบรรทัด นอกจากนี้ยังทำให้การเชื่อมโยงกลุ่มและทำให้ง่ายขึ้นมาก! [การสาธิต]

MooTools
เมนูแบบเลื่อนลง JavaScript โดยใช้ Mootools. วิธีที่ง่ายและไม่สร้างความรำคาญในการสร้างเมนูแบบเลื่อนลงด้วย Mootools 1.2 [สาธิต | Download]

เมนูแบบเลื่อนลง UvumiTools. เมนูหลายระดับอย่างง่ายที่สร้างจากรายการ unorderd HTML โดยใช้ Mootools Javascript Framework.

เมนูแบบเลื่อนลง Mootool ที่ไม่สร้างความรำคาญ

เลียนแบบ
การออกแบบส่วนหัว Digg. ทีละขั้นตอนการสอนเกี่ยวกับวิธีการสร้างเมนูแบบเลื่อนลงที่ดูเหมือน Digg จริงๆ [สาธิต | Download]

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

เมนู PureCSS. ฟรีกำเนิด CSS เมนูแบบเลื่อนลง
