50 + נחמד נקי CSS מבוססי Tab ניווט סקריפטים

אחת המשימות החיוניות ביותר של מעצב חוויית המשתמש היא לוודא כי ניווט של האתר הוא פשוט וידידותי למשתמש. ואיזו דרך אחרת לעשות את זה אפשרי מאשר באמצעות כרטיסיות ניווט.

תוכנן היטב כרטיסיות ניווט לא רק לעזור למשתמשים לדעת לאן ללכת, הם חשובים כדי תנועה אל הדפים הפנימיים של האתר או הבלוג שלך, כמו גם.

אז, עבור החברים שלי מעצב אינטרנט, הנה רשימה ארוכה של נחמד נחמד ונקי CSS מבוסס כרטיסייות ניווט. לכל אפשרות יש הדגמה חיה יחד עם מקור ההורדה שלה. אז תמשיך ותסתכל בעצמך.

כרטיס האתחול-כרטיסיות-x - תוסף כרטיסיות המורחבת בנוי על החלק העליון של כרטיסיות Bootstrap. זה יכול ליישר כרטיסיות, לסובב כותרות, לטעון תוכן באמצעות AJAX, ועוד תכונות רבות יותר. [הדגמה]

טהור CSS כרטיסיות עם מחוון - ספריית טאבים מודרנית פשוטה אך פשוטה ללא JavaScript. כלומר, זה מהיר ויפה כמו גם - יפה כמו שאתה רואה על אתרי אינטרנט פופולריים ביותר. [הדגמה]

טבי - Tabby מאפשר לך ליצור כרטיסיות פשוטות לעבור, אשר יכול להציג כל תוכן, כולל קטעי וידאו. הוא מציע מגוון אפשרויות מתקדמות ותומכת NPM ו Bower מדי. [הדגמה]

ניווט באמצעות כרטיסיות - ניווט מודרני, שימושי בשוניות מגובה על ידי JS ו CSS, אשר בנוי עם הנייד הראשון בראש ו תומך אופקי או סגנונות מיקום אנכי. [הדגמה]

טוגלר - טוגלר הוא תוסף JavaScript טהור ליצירת רכיבים מסוגלת לעבור אקורדיונים וכרטיסיות. כמו כן, אתה יכול להראות / להסתיר רק כל פריט בדף. [הדגמה]

טהור CSS כרטיסיות - א מקטע כרטיסיות פשוט שנוצר באמצעות CSS ו- JS. למרות קוד לדוגמה להציג כרטיסיות רגיל עדיין אתה יכול לייפות את הכרטיסיות על ידי שינוי הסטיילינג שלהם באמצעות CSS. [הדגמה]

Tabsy CSS - ספריית CSS בלבד ליצירת רכיבי מעבר פשוטים כגון כרטיסיות. ספריה זו, שלא כמו כמה מן הנ"ל, אינה זקוקה לתלות - אפילו לא קוד JS. [הדגמה]

Tabbis.js - Tabbis הוא תוסף פשוט אך מתקדם. באמצעות אפשרויות התצורה המתקדמות שלה, אתה יכול ליצור כרטיסיות מקוננות ולהגדיר התקשרות מדי. [הדגמה]

תגובה טהור טהור CSS כרטיסיות [הדגמה]

כרטיסיות CSS [הדגמה]

כרטיסיות באמצעות Pitaya - כרטיסיות באמצעות Pitaya עוזרות לך ליצור כרטיסיות המעבר אנימציה בקלות. עם זאת, עליך לכלול את Pitaya, שהיא ספריה בפני עצמה ומגדילה את זמן הטעינה. [הדגמה]

jTabs - jTabs היא ספריית כרטיסיות שנבנתה באמצעות JavaScript טהור. זה אומר שזה בנוי עם אין תלות חיצונית כמו jQuery ותומך כמה אפשרויות תצורה מדי. [הדגמה]

כרטיסיית Flexbox מגיבים [הדגמה]

כרטיסיות אקורדיון [הדגמה]

tabs.js - tabs.js הוא טהור JavaScript כרטיסיות הספרייה בהשראת אקורדיון / כרטיסיות של בורבון מילוי. היא מגיבה כך כרטיסיות לשנות אקורדיונים על מסכים קטנים. [הדגמה]

וולטבר - WellTabber הוא עוד תוסף JavaScript פשוט כמו טאבי. כמו האחרון, זה תומך אפשרויות שונות כדי להגדיר את הכרטיסיות. כמו כן, ניתן להציג חיצי ניווט. [הדגמה]

3D ממשק קוביית [הדגמה]

מודול כרטיסיות עבור ES6 [הדגמה]

משתנה גבהים עם CSS כרטיסיות [הדגמה]

חומר עיצוב כרטיסיות - עיצוב חומר בהשראת כרטיסיות קטע נבנה באמצעות ונילה JavaScript. זה פשוט לשימוש להתאמה אישית גם כן. עם זאת, הוא אינו כולל אפשרויות מתקדמות. [הדגמה]

כרטיסיות CSS מונפשות - כרטיסיות CSS מונפשות היא מערכת כרטיסיות CSS בלבד המאפשרת לך ליצור כרטיסיות פשוטות, קלות. שלא כמו טאבי או וולטבר, זה אינו מציע תצורה מתקדמת. [הדגמה]

טהור [הדגמה]

וניל JavaScript נגישים כרטיסיות [הדגמה]

Scifi בסגנון אנימציה כרטיסיות [הדגמה]

Pure CSS Bootstrap כרטיסיות מסתגלות - מערכת הכרטיסייה בהשראת Bootstrap שנבנו באמצעות CSS בלבד ולא JavaScript. מה תכונה ייחודית זה מביא כרטיסיות overfitting במסך מועברות לרשימה נפתחת. [הדגמה]

סרגל הכרטיסייה מתקפל - יישומון כרטיסיות מבוסס על CSS3 טהור ולא JavaScript, כמו תוספים שונים ברשימה זו. מה שעושה את זה מעניין יש כרטיסיות שלה נעים למראה המעבר מתקפל. [הדגמה]

מדהים [הדגמה]

מתאם - תוסף מתקדם הכרטיסייה נבנה רק עם JavaScript. זה מאפשר לך להגדיר כרטיסיית ברירת המחדל, לשנות את הלשונית באופן דינמי, ו הוסף onLoad ו- onClick פונקציות התקשרות חזרה. [הדגמה]

שלד טאבים [הדגמה]

Tabtastic - Tabtastic הוא תוסף קל ליישם כרטיסיות באמצעות CSS ו- JS. זה משתמש בסימון סמנטי, נגיש לקוראי מסך, ותומך בכרטיסיות מקוננות בדף. [הדגמה]

CSS & jQuery תיקיות כרטיסיות - זה קל הדרכה (עם קוד להורדה) על יצירת כרטיסיות התיקייה באמצעות CSS3 ו jQuery. הוא מזכיר לי כרטיסיות שמוצגות בדפדפנים כמו Google Chrome. [הדגמה]

תוכן עם כרטיסיות [הדגמה]

כרטיסיות ניווט ברוחב שווה - קטע קוד, המציג את השימוש ב- CSS רגיל כדי ליצור כרטיסיות ניווט ברוחב שווה. אתה יכול להתאים אישית את המראה, אבל זה לא מציע אפשרויות מתקדמות מהקופסה. [הדגמה]

תוכן עם כרטיסיות עם jQuery & CSS [הדגמה]

טוויטר - טוויטר Bootstrap אשף הוא תוסף לבנות מכשפים של מבנה tabbable. שמתי לב שאתה יכול ליצור רק כרטיסיות על ידי הסתרה או הסרת הבא ואת הכפתורים הקודמים. [הדגמה]

טהור CSS כרטיסיות [הדגמה]

כרטיסיית תגובה גמישה [הדגמה]

רק עוד כרטיסיות - מבנה טאב בעל מבנה יפה שנבנה עם CSS בלבד, אשר עובד על דפדפנים מודרניים. עם זאת, שלא כמו כמה תוספים חזקים נתן מעל, אין לו אפשרויות מתקדמות. [הדגמה]

תגובה אקורדיון לשוניות - אקורדיון תגובה לשוניות, כפי שהשם מרמז, עובד כמו אקורדיון או כרטיסיות מבוסס על רוחב המסך. זה מראה כרטיסיות אם אקורדיון אחר אפשרי אם גודל קטן. [הדגמה]

CardTabs - CardTabs הוא Ultra- כרטיסיות תוסף מבוסס על jQuery, אשר מגיע עם נושאים מרובים. ניתן גם ליצור ערכות נושא חדשות ולהגדיר את הלשונית הפעילה באופן דינמי. [הדגמה]

אריה כרטיסיות [הדגמה]

מינימלי & כרטיסיות סקסי - מקטע כרטיסיות יפה, חדש זמין בשני צבעים - אור וחושך. הוא נבנה באמצעות jQuery, כך שזה לא קל כמו כמה תוספים אחרים המפורטים לעיל. [הדגמה]

כרטיסיות עם כרטיסיות [הדגמה]

כרטיסיות מסתגלות - כרטיסיות מסתגלות הוא מקטע כרטיסיות פשוט ויפה. מלבד העיצוב המודרני, אין לו תכונות יותר כמו זה זמין כמה תוספים מתקדמים שניתנו לעיל. [הדגמה]

הכרטיסייה סגנון עץ [הדגמה]

Tabulous.js [הדגמה]

כרטיסיות jQuery - jQuery כרטיסיות הוא תוסף פשוט ליצירת כרטיסיות. כפי שהשם מרמז, זה שנבנה באמצעות jQuery, שלא כמו כמה תוספים המפורטים לעיל אשר בנויים עם CSS טהור או JavaScript. [הדגמה]

jQuery rTabs [הדגמה]

הערת העורך: הודעה זו פורסמה לראשונה ביוני 2008 ועודכנה באפריל 2018 על בסיס תוכן חדש.