50+ Nice นำทาง CSS-based สคริปต์แท็บ CSS

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

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

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

บูตแท็บ-X - ปลั๊กอินเสริมของแท็บเพิ่มเติมที่อยู่ด้านบนของ Bootstrap Tabs มันสามารถ จัดเรียงแท็บหมุนชื่อเรื่องโหลดเนื้อหาผ่าน AJAX, และคุณสมบัติอื่น ๆ อีกมากมาย [การสาธิต]

แท็บ CSS บริสุทธิ์พร้อมตัวบ่งชี้ - ไลบรารีแท็บที่ทันสมัยและตรงไปตรงมาซึ่งสร้างขึ้นโดยไม่มี JavaScript นั่นหมายความว่ามันเป็น รวดเร็วและสวยงาม เช่นกัน - สวยงามเหมือนที่คุณเห็นในเว็บไซต์ยอดนิยมส่วนใหญ่ [การสาธิต]

แมวลาย - Tabby ให้คุณสร้างแท็บสลับง่าย ๆ ซึ่งสามารถแสดงเนื้อหาใด ๆ รวมถึงวิดีโอ มันมีหลากหลาย ตัวเลือกขั้นสูงและรองรับ NPM และ Bower เกินไป. [การสาธิต]

การนำทางแบบแท็บตอบสนอง - การนำทางแบบแท็บที่มีประโยชน์และทันสมัยซึ่งสนับสนุนโดย JS และ CSS ซึ่งสร้างขึ้นโดยคำนึงถึงอุปกรณ์พกพาเป็นอันดับแรกและ รองรับรูปแบบการวางตำแหน่งแนวนอนและแนวตั้ง. [การสาธิต]

toggler - Toggler เป็นปลั๊กอิน JavaScript บริสุทธิ์สำหรับการสร้างองค์ประกอบสลับได้รวมถึง หีบเพลงและแท็บ. นอกจากนี้คุณสามารถแสดง / ซ่อนเฉพาะรายการใดก็ได้บนหน้าเว็บ [การสาธิต]

แท็บ CSS แท้ - ตัวอย่างแท็บอย่างง่ายที่สร้างโดยใช้ CSS และ JS. แม้ว่าโค้ดตัวอย่างจะแสดงแท็บธรรมดา แต่คุณสามารถตกแต่งแท็บได้โดยเปลี่ยนสไตล์โดยใช้ CSS [การสาธิต]

CSS Tabsy - ไลบรารี CSS-only สำหรับการสร้างส่วนประกอบสลับอย่างเช่นแท็บ ไลบรารี่นี้แตกต่างจากสองสามข้อข้างต้นโดยไม่จำเป็นต้องพึ่งพา - แม้แต่โค้ด JS [การสาธิต]

Tabbis.js - Tabbis เป็นปลั๊กอินที่เรียบง่าย แต่ทันสมัย คุณสามารถใช้ตัวเลือกการกำหนดค่าขั้นสูงได้ สร้างแท็บที่ซ้อนกันและกำหนดการโทรกลับ เกินไป. [การสาธิต]

แท็บ CSS บริสุทธิ์ที่ตอบสนอง [การสาธิต]

แท็บ CSS [การสาธิต]

แท็บที่ใช้พิทยา - แท็บที่ใช้ Pitaya ช่วยคุณสร้าง แท็บการเปลี่ยนภาพเคลื่อนไหวได้อย่างง่ายดาย. อย่างไรก็ตามคุณต้องรวมพิทยาซึ่งเป็นห้องสมุดในตัวเองและเพิ่มความเร็วในการโหลด [การสาธิต]

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

แท็บ Flexbox ที่ตอบสนอง [การสาธิต]

หีบเพลงแบบแท็บ [การสาธิต]

tabs.js - tabs.js เป็นไลบรารีแท็บ JavaScript บริสุทธิ์ที่ได้รับแรงบันดาลใจจาก Accordion / Tabs ของ Bourbon Refills มันตอบสนองเช่นนั้น แท็บเปลี่ยนเป็นหีบเพลงบนหน้าจอขนาดเล็ก. [การสาธิต]

WellTabber - WellTabber เป็นปลั๊กอิน JavaScript อย่างง่ายอย่าง Tabby เช่นเดียวกับหลังมัน รองรับตัวเลือกต่าง ๆ เพื่อกำหนดค่าแท็บ. นอกจากนี้คุณสามารถแสดงลูกศรนำทาง [การสาธิต]

ส่วนต่อประสานแท็บ 3D Cube [การสาธิต]

แท็บโมดูลสำหรับ ES6 [การสาธิต]

ความสูงของตัวแปรที่มีแท็บ CSS [การสาธิต]

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

แท็บ CSS เคลื่อนไหว - Animated CSS Tabs เป็นระบบแท็บ CSS-only ที่ให้คุณสร้างแท็บแสงที่เรียบง่าย ไม่เหมือน Tabby หรือ WellTabber เลย ไม่เสนอการกำหนดค่าขั้นสูงใด ๆ. [การสาธิต]

pureTabs [การสาธิต]

แท็บที่เข้าถึงได้ของ Vanilla JavaScript [การสาธิต]

แท็บภาพเคลื่อนไหวแบบ Scifi [การสาธิต]

แท็บ Bootstrap Adaptive CSS บริสุทธิ์ - ระบบแท็บแรงบันดาลใจ Bootstrap สร้างขึ้นโดยใช้เพียง CSS และไม่มี JavaScript คุณลักษณะเฉพาะที่นำมาใช้คืออะไร แท็บที่ overfitting ในหน้าจอจะถูกย้ายไปยังรายการแบบหล่นลง. [การสาธิต]

แถบพับได้ - วิดเจ็ตแท็บที่ใช้ CSS3 แท้ๆและไม่มี JavaScript เช่นปลั๊กอินต่าง ๆ ในรายการนี้ สิ่งที่ทำให้มันน่าสนใจคือแท็บมี การเปลี่ยนแปลงพับได้ดูดี. [การสาธิต]

CSS Animated Tabs ที่ยอดเยี่ยม [การสาธิต]

ตัวสร้างจาวาสคริปต์ - ปลั๊กอินแท็บขั้นสูงที่สร้างขึ้นด้วย JavaScript ช่วยให้คุณตั้งค่าแท็บเริ่มต้นเปลี่ยนแท็บแบบไดนามิกและ เพิ่มฟังก์ชั่นการโทรกลับของเหตุการณ์ onLoad และ onClick. [การสาธิต]

โครงกระดูกแท็บ [การสาธิต]

Tabtastic - Tabtastic เป็นปลั๊กอินที่ใช้งานง่ายสำหรับแท็บโดยใช้ CSS และ JS มัน ใช้มาร์กอัปความหมายซึ่งสามารถเข้าถึงได้สำหรับโปรแกรมอ่านหน้าจอ, และสนับสนุนแท็บที่ซ้อนกันบนหน้า [การสาธิต]

แท็บโฟลเดอร์ CSS3 & jQuery - บทแนะนำที่ง่าย (พร้อมรหัสที่สามารถดาวน์โหลดได้) แบ่งปันเกี่ยวกับ สร้างแท็บโฟลเดอร์โดยใช้ CSS3 และ jQuery. มันทำให้ฉันนึกถึงแท็บที่แสดงในเบราว์เซอร์เช่น Google Chrome [การสาธิต]

เนื้อหาแบบแท็บ [การสาธิต]

แท็บการนำทางที่มีความกว้างเท่ากัน - ข้อมูลโค้ดแสดงการใช้ CSS ธรรมดาเพื่อสร้างแท็บการนำทางที่มีความกว้างเท่ากัน คุณสามารถ ปรับแต่งรูปลักษณ์ แต่ไม่มีตัวเลือกขั้นสูงออกจากกล่อง. [การสาธิต]

เนื้อหาที่แท็บด้วย jQuery & CSS [การสาธิต]

ตัวช่วยสร้างการบูต Twitter - Twitter Bootstrap Wizard เป็นปลั๊กอินสำหรับสร้างวิซาร์ดของโครงสร้างแบบแท็บ ฉันสังเกตเห็นว่าคุณสามารถสร้างแท็บได้โดยซ่อนหรือลบปุ่มถัดไปและปุ่มก่อนหน้า [การสาธิต]

แท็บ CSS แท้ [การสาธิต]

แท็บ CSS ตอบสนอง [การสาธิต]

อีกแค่แท็บ CSS - โครงสร้างแท็บที่สร้างขึ้นอย่างสวยงามที่สร้างด้วย CSS เพียงอย่างเดียว ทำงานบนเบราว์เซอร์ที่ทันสมัย. อย่างไรก็ตามไม่เหมือนปลั๊กอินที่ทรงพลังบางตัวที่ให้ไว้ข้างต้น แต่ก็ไม่มีตัวเลือกขั้นสูง [การสาธิต]

หีบเพลงที่ตอบสนองต่อแท็บ - การตอบสนองการตอบสนองต่อแท็บตามชื่อแนะนำจะใช้เป็นหีบเพลงหรือแท็บตามความกว้างของหน้าจอ มัน แสดงแท็บถ้าเป็นไปได้ถ้าเป็นไปได้ถ้ามีขนาดเล็ก. [การสาธิต]

CardTabs - CardTabs เป็น ปลั๊กอินแท็บเบาพิเศษขึ้นอยู่กับ jQuery, ซึ่งมาพร้อมกับหลายธีม คุณยังสามารถสร้างธีมใหม่และตั้งค่าแท็บที่ใช้งานอยู่แบบไดนามิก [การสาธิต]

แท็บ Aria [การสาธิต]

แท็บที่น้อยที่สุดและเซ็กซี่ - ตัวอย่างแท็บใหม่ที่สวยงาม มีอยู่ในสองโทนสี - แสงและมืด. มันถูกสร้างขึ้นโดยใช้ jQuery ดังนั้นจึงไม่เบาเหมือนกับปลั๊กอินอื่น ๆ ที่ระบุไว้ข้างต้น [การสาธิต]

วิดเจ็ตแบบแท็บ [การสาธิต]

Adaptive Tabs - Adaptive Tabs เป็นตัวอย่างข้อมูลแท็บที่เรียบง่ายและสวยงาม นอกเหนือจากการออกแบบที่ทันสมัยแล้วมันไม่ได้มีคุณสมบัติเพิ่มเติมเช่นที่มีอยู่ในปลั๊กอินขั้นสูงบางอย่างที่ระบุข้างต้น [การสาธิต]

แท็บสไตล์ต้นไม้ [การสาธิต]

Tabulous.js [การสาธิต]

แท็บ jQuery - jQuery Tabs เป็นปลั๊กอินง่าย ๆ สำหรับการสร้างแท็บ ตามชื่อของมันบ่งบอกว่ามันเป็น สร้างโดยใช้ jQuery ซึ่งแตกต่างจากปลั๊กอินที่ระบุไว้ข้างต้น ที่สร้างขึ้นด้วย CSS บริสุทธิ์หรือ JavaScript [การสาธิต]

jQuery rTabs [การสาธิต]

หมายเหตุจากบรรณาธิการ: โพสต์นี้ถูกเผยแพร่ครั้งแรกในเดือนมิถุนายน 2008 และได้รับการปรับปรุงในเดือนเมษายน 2018 บนพื้นฐานของเนื้อหาใหม่.