50+ البرامج النصية المستندة إلى علامة التبويب CSS النظيفة النظيفة
واحدة من أهم المهام لمصمم تجربة المستخدم هو التأكد من أن التنقل في الموقع بسيط وسهل الاستخدام. وما الطريقة الأخرى لجعل هذا ممكنًا من خلال علامات تبويب التنقل.
لا تساعد علامات تبويب التنقل المصممة جيدًا المستخدمين على معرفة إلى أين يذهبون فحسب ، بل إنها مهمة لجذب الزيارات إلى الصفحات الداخلية لموقع الويب الخاص بك أو المدونة أيضًا.
لذلك ، لأصدقائي مصمم الويب ، وهنا قائمة طويلة من البرامج النصية الملاحة المستندة إلى علامة التبويب CSS لطيفة ونظيفة. كل خيار لديه عرض توضيحي مباشر مع مصدر التنزيل الخاص به. لذا تابع وإلقاء نظرة على نفسك.
التمهيد علامات التبويب-X - ملحق علامات تبويب ممتدة مبني على الجزء العلوي من علامات تبويب التمهيد. يمكن محاذاة علامات التبويب ، تدوير العناوين ، تحميل المحتوى عبر AJAX, والعديد من الميزات. [تجريبي]
علامات CSS الصافية مع المؤشر - مكتبة علامات تبويب حديثة ومباشرة مبنية بدون جافا سكريبت. وهذا يعني ، هو عليه سريع وجميل كذلك - جميلة كما ترى في أكثر المواقع شعبية. [تجريبي]
مبرقع - يتيح لك Tabby إنشاء علامات تبويب بسيطة ، والتي يمكن أن تعرض أي محتوى بما في ذلك مقاطع الفيديو. ويقدم مختلف خيارات متقدمة ويدعم NPM و Bower جدا. [تجريبي]
استجابة كلفه الملاحة - نظام ملاحة عصري سهل الاستخدام يدعمه JS و CSS ، والذي تم تصميمه مع مراعاة المحمول أولاً يدعم أنماط تحديد المواقع الأفقية والرأسية. [تجريبي]
Toggler - Toggler هو مكون جافا سكريبت خالص لإنشاء عناصر قابلة للتبديل بما في ذلك الأكورديونات وعلامات التبويب. أيضًا ، يمكنك إظهار / إخفاء أي عنصر فقط على الصفحة. [تجريبي]
علامات CSS الصافية - ا مقتطف علامات تبويب بسيطة تم إنشاؤها باستخدام CSS و JS. على الرغم من أن رمز المثال يعرض علامات تبويب واضحة ، إلا أنه يمكنك تجميل علامات التبويب عن طريق تغيير التصميم باستخدام CSS. [تجريبي]
Tabsy CSS - مكتبة CSS فقط لإنشاء مكونات تبديل بسيطة مثل علامات التبويب. هذه المكتبة ، على عكس القليل منها أعلاه ، لا تحتاج إلى تبعيات - ولا حتى أي رمز JS. [تجريبي]
Tabbis.js - Tabbis هو مكون بسيط ولكنه متقدم. باستخدام خيارات التكوين المتقدمة ، يمكنك ذلك إنشاء علامات تبويب متداخلة وتحديد عمليات الاسترجاعات جدا. [تجريبي]
استجابة علامات التبويب المغلق الصرفة [تجريبي]
علامات التبويب CSS [تجريبي]
علامات التبويب باستخدام Pitaya - علامات التبويب باستخدام Pitaya تساعدك على إنشاء علامات التبويب الانتقال المتحركة بسهولة. ومع ذلك ، يجب عليك تضمين Pitaya ، وهي مكتبة في حد ذاتها وتزيد من وقت التحميل. [تجريبي]
jTabs - jTabs عبارة عن مكتبة علامات تبويب تم إنشاؤها باستخدام جافا سكريبت خالص. وهذا يعني أنها بنيت مع لا التبعيات الخارجية مثل مسج ويدعم عدد قليل من خيارات التكوين أيضا. [تجريبي]
استجابة علامات التبويب Flexbox [تجريبي]
علامات التبويب الأكورديون [تجريبي]
tabs.js - tabs.js هي مكتبة علامات تبويب جافا سكريبت خالصة مستوحاة من أكورديون / علامات تبويب عبوات بوربون. أنها تستجيب مثل هذا علامات التبويب تتغير إلى الأكورديون على شاشات صغيرة. [تجريبي]
WellTabber - WellTabber هو مكون آخر بسيط لجافا سكريبت مثل Tabby. مثل الأخير ، هو يدعم خيارات مختلفة لتكوين علامات التبويب. أيضًا ، يمكنك إظهار أسهم التنقل. [تجريبي]
3D مكعب كلفه واجهة [تجريبي]
وحدة علامات التبويب ل ES6 [تجريبي]
مرتفعات متغيرة مع علامات تبويب CSS [تجريبي]
علامات تبويب مواد التصميم - مقتطف علامات تبويب مستوحى من تصميم المواد باستخدام Vanilla JavaScript. أنه سهلة الاستخدام وقابلة للتخصيص كذلك. ومع ذلك ، فإنه لا يتميز بالخيارات المتقدمة. [تجريبي]
علامات التبويب CSS المتحركة - علامات تبويب CSS المتحركة هي نظام علامات تبويب CSS فقط يتيح لك إنشاء علامات تبويب خفيفة بسيطة. على عكس Tabby أو WellTabber ، فإنه لا تقدم أي تكوين متقدم. [تجريبي]
pureTabs [تجريبي]
جافا سكريبت يمكن الوصول إليها علامات التبويب [تجريبي]
Scifi على غرار علامات التبويب المتحركة [تجريبي]
النقي المغلق bootstrap علامات التبويب - نظام علامات تبويب مستوحى من Bootstrap مبني باستخدام CSS فقط وليس جافا سكريبت. ما الميزة الفريدة التي يجلبها هو يتم نقل علامات التبويب overfitting في الشاشة إلى قائمة منسدلة. [تجريبي]
شريط التبويب قابلة للطي - أداة علامات تبويب تستند إلى CSS3 خالٍ وليس جافا سكريبت ، مثل الإضافات المختلفة في هذه القائمة. ما يجعلها مثيرة للاهتمام هو علامات التبويب لها لطيفة تبحث الانتقال طوي. [تجريبي]
رهيبة CSS المتحركة علامات التبويب [تجريبي]
جافا سكريبت Tabifier - مكون إضافي لعلامة تبويب متقدمة تم تصميمه باستخدام JavaScript فقط. يتيح لك تعيين علامة تبويب افتراضية وتغيير علامة التبويب ديناميكيًا و إضافة onLoad و onClick الحدث رد الاتصال الوظائف. [تجريبي]
علامات التبويب الهيكل العظمي [تجريبي]
Tabtastic - Tabtastic هو مكون إضافي سهل لتنفيذ علامات التبويب باستخدام CSS و JS. هذا يستخدم العلامات الدلالية ، يمكن الوصول إليها لقارئات الشاشة, ويدعم علامات التبويب المتداخلة على الصفحة. [تجريبي]
CSS3 & jQuery Folder Tabs - يشارك هذا البرنامج التعليمي السهل (مع رمز قابل للتنزيل) حوله إنشاء علامات تبويب المجلد باستخدام CSS3 و jQuery. يذكرني بعلامات التبويب المعروضة في المتصفحات مثل Google Chrome. [تجريبي]
كلفه المحتوى [تجريبي]
علامات تبويب التنقل متساوية العرض - مقتطف شفرة ، يعرض استخدام CSS العادي لإنشاء علامات تبويب متساوية العرض. يمكنك قم بتخصيص المظهر ، لكنه لا يوفر خيارات متقدمة خارج الصندوق. [تجريبي]
كلفه المحتوى مع مسج & المغلق [تجريبي]
التغريد Bootstrap معالج - يعتبر Twitter Bootstrap Wizard مكونًا إضافيًا لإنشاء معالجات لهيكل قابل للضبط. لقد لاحظت أنه يمكنك إنشاء علامات تبويب فقط عن طريق إخفاء أو إزالة الأزرار التالية والسابقة. [تجريبي]
علامات CSS الصافية [تجريبي]
استجابة CSS علامات التبويب [تجريبي]
مجرد علامات تبويب CSS أخرى - بنية علامة تبويب رائعة التصميم مبنية على CSS فقط ، والتي يعمل على المتصفحات الحديثة. ومع ذلك ، على عكس بعض الإضافات القوية المقدمة أعلاه ، فإنه لا يوجد لديه خيارات متقدمة. [تجريبي]
استجابة الأكورديون إلى علامات التبويب - الأكورديون المستجيب إلى علامات التبويب ، كما يوحي الاسم ، يعمل كأكورديون أو علامات تبويب بناءً على عرض الشاشة. هذا يعرض علامات التبويب إذا كان ذلك ممكنًا الأكورديون إذا كان الحجم صغيرًا. [تجريبي]
CardTabs - CardTabs هو علامات التبويب فائقة ضوء على أساس مسج, الذي يأتي مع مواضيع متعددة. يمكنك أيضًا إنشاء سمات جديدة وتعيين علامة التبويب النشطة ديناميكيًا. [تجريبي]
الأغنية علامات التبويب [تجريبي]
علامات التبويب الحد الأدنى ومثير - مقتطف علامات تبويب جديد جميل متاح في اثنين من أنظمة الألوان - الضوء والظلام. إنه مصمم باستخدام jQuery ، لذا فهو ليس خفيفًا مثل بعض الإضافات الأخرى المذكورة أعلاه. [تجريبي]
كلفه القطعة [تجريبي]
علامات التبويب التكيفية - علامات التبويب التكيفية عبارة عن مقتطف علامات تبويب بسيط وجميل. بصرف النظر عن التصميم الحديث ، فإنه لا يحتوي على المزيد من الميزات مثل تلك المتوفرة في بعض المكونات الإضافية المتقدمة المذكورة أعلاه. [تجريبي]
شجرة نمط التبويب [تجريبي]
Tabulous.js [تجريبي]
علامات مسج - علامات مسج jQuery هو مكون بسيط لإنشاء علامات التبويب. كما يوحي اسمها ، هو عليه بنيت باستخدام jQuery ، على عكس بعض الإضافات المذكورة أعلاه التي بنيت مع CSS النقي أو جافا سكريبت. [تجريبي]
مسج rTabs [تجريبي]
ملحوظة المحرر: نُشر هذا المنشور في الأصل في يونيو 2008 وتم تحديثه في أبريل 2018 على أساس محتوى جديد.
