50+ Scripturi de navigare bazate pe tabelul CSS de la Nice

Una dintre cele mai importante sarcini ale unui designer de experiență este să vă asigurați că navigarea pe site este simplă și ușor de utilizat. Și ce alt mod de a face acest lucru posibil decât prin filele de navigare.

Filtrele de navigare bine concepute nu numai că ajută utilizatorii să știe unde să meargă, ci și că sunt importante pentru a direcționa traficul către paginile interne ale site-ului sau blogului dvs..

Deci, pentru prietenii mei de web designer, aici este o listă lungă de scripturi de navigare pe bază de fișiere CSS frumoase și curate. Fiecare opțiune are a live demo împreună cu sursa de descărcare. Deci, continuați și căutați-vă singur.

bootstrap-file-x - Un plugin extensie tab-uri construit pe partea de sus a filelor Bootstrap. Poate aliniați filele, rotiți titlurile, încărcați conținutul prin AJAX, și multe alte caracteristici. [Demo]

Fișe CSS pure cu indicator - O bibliotecă tabelă modernă și simplă, construită fără JavaScript. Asta înseamnă că este rapid și frumos precum și - pe cât de frumoase vedeți pe cele mai populare site-uri web. [Demo]

Tabinet - Tabby vă permite să creați tab-uri simple de comutare, care pot afișa orice conținut, inclusiv videoclipuri. Oferă diverse avansate și sprijină NPM și Bower de asemenea. [Demo]

Navigare sensibilă cu file - O navigație modernă, la îndemână, susținută de JS și CSS, care este construită pe primul plan în minte și pe mobil sprijină stilurile de poziționare orizontală și verticală. [Demo]

Toggler - Toggler este un plug-in JavaScript strict pentru crearea de elemente de tip switchable inclusiv acordeoane și file. De asemenea, puteți afișa / ascunde doar orice element de pe pagină. [Demo]

Cărți pure CSS - A fragment simplu de file create folosind CSS și JS. Deși exemplul de cod afișează filele simple, puteți înfrumuseța filele schimbând stilul folosind CSS. [Demo]

Tabs CSS - O bibliotecă numai pentru CSS pentru a crea componente simple de comutare, cum ar fi filele. Această bibliotecă, spre deosebire de câteva din cele de mai sus, nu are nevoie de dependențe - nici măcar nici un cod JS. [Demo]

Tabbis.js - Tabbis este un plugin simplu dar avansat. Folosind opțiunile avansate de configurare, puteți creați filele imbricate și definiți apelurile de apel de asemenea. [Demo]

Tabele responsabile CSS pure [Demo]

CSS Tabs [Demo]

Taburi folosind Pitaya - Taburile care utilizează funcția Pitaya vă ajută să creați fișiere de tranziție animate cu ușurință. Cu toate acestea, trebuie să includeți Pitaya, care este o bibliotecă în sine și crește timpul de încărcare. [Demo]

jTabs - jTabs este o bibliotecă tabs construit folosind JavaScript pur. Asta înseamnă că este construit cu nu există dependențe externe cum ar fi jQuery și acceptă și câteva opțiuni de configurare. [Demo]

Tabbe flexibile responsabile [Demo]

Taburi Accordion [Demo]

tabs.js - tabs.js este o bibliotecă curată JavaScript tabs inspirată de Accordion / Tabs de Bourbon Refills. Este receptiv astfel încât filele se transformă în acordeoane pe ecrane mici. [Demo]

WellTabber - WellTabber este un alt plugin simplu de tip JavaScript, cum ar fi Tabby. Ca și cea din urmă, ea acceptă diverse opțiuni pentru a configura filele. De asemenea, puteți afișa săgețile de navigare. [Demo]

Interfață cu interfață cu interfață 3D Cube [Demo]

Tabs Module pentru ES6 [Demo]

Variabile înălțimi cu filele CSS [Demo]

Tabele de design material - Un fragment de fișă inspirat din designul materialului, construit folosind JavaScript de la Vanilla. Este simplu de utilizat și personalizabil, de asemenea. Cu toate acestea, nu include opțiuni avansate. [Demo]

Tabele CSS animate - Tabelele animate CSS sunt un sistem de file-uri CSS care vă permite să creați file simple, luminoase. Spre deosebire de Tabby sau WellTabber nu oferă nici o configurație avansată. [Demo]

pureTabs [Demo]

Fisierele accesibile din Javile JavaScript [Demo]

Știri animate în stil Scifi [Demo]

Pure CSS Bootstrap Adaptive Tabs - Un sistem de filme inspirat de Bootstrap, construit folosind doar CSS și fără JavaScript. Ce caracteristică unică aduce filele suprapunerii în ecran sunt mutate într-o listă derulantă. [Demo]

Bara de tab pliabilă - Un widget de tab-uri bazat pe CSS3 pur și fără JavaScript, cum ar fi diverse pluginuri din această listă. Ceea ce îl face interesant este faptul că filele sale au a frumos-pliant tranziție. [Demo]

Cuburi animate minunate CSS [Demo]

Tabelul JavaScript - Un plugin avansat de tab, construit doar cu JavaScript. Vă permite să setați o filă prestabilită, să modificați dinamic tabul, și adăugați funcțiile OnLoad și onClick de apel invers. [Demo]

Scheletul Tabele [Demo]

Tabtastic - Tabtastic este un plugin simplu pentru implementarea filelor utilizând CSS și JS. Aceasta folosește marcajul semantic, este accesibil cititorilor de ecran, și acceptă filele imbricate pe o pagină. [Demo]

CSS3 & jQuery Folder Tabs - Acest tutorial ușor (cu codul descărcabil) se referă la crearea fișierelor de foldere utilizând CSS3 și jQuery. Îmi amintește de filele afișate în browsere, cum ar fi Google Chrome. [Demo]

Tabbed Content [Demo]

Plase de navigare cu o lățime egală - Un fragment de cod, prezentând utilizarea CSS simplu pentru a construi tab-uri de navigare cu o lățime egală. Poti personalizați aspectul, dar nu oferă opțiuni avansate din cutie. [Demo]

Conținut cu file cu jQuery & CSS [Demo]

Expertul Bootstrap de pe Twitter - Twitter Bootstrap Wizard este un plugin pentru a construi vrăjitori de o structură tabbable. Am observat că puteți crea doar filele prin ascunderea sau eliminarea butoanelor următoare și anterioare. [Demo]

Cărți pure CSS [Demo]

Tabele CSS responsabile [Demo]

Doar alte file CSS - O structură de filete artizanală, construită cu doar CSS, care funcționează pe browserele moderne. Cu toate acestea, spre deosebire de câteva pluginuri puternice oferite mai sus, nu are opțiuni avansate. [Demo]

Acordeon reactiv la file - Acordeonul reactiv la file, așa cum sugerează și numele, funcționează ca acordeon sau file pe baza lățimii ecranului. Aceasta afișează filele, dacă este posibil, altfel dacă dimensiunea este mică. [Demo]

CardTabs - CardTabs este un ultra-light tabs plugin bazat pe jQuery, care vine cu mai multe teme. De asemenea, puteți crea teme noi și puteți seta tab-ul activ dinamic. [Demo]

Aria Tabs [Demo]

Tab-uri minime și sexy - Un fragment frumos, de file noi disponibile în două scheme de culori - lumină și întuneric. Acesta este construit folosind jQuery, deci nu este la fel de usor ca si alte plugin-uri enumerate mai sus. [Demo]

Tabbed Widget [Demo]

Taburile Adaptive - Fila Adaptive este un fragment simplu, frumos din file. În afară de designul modern, acesta nu are mai multe caracteristici, cum ar fi cele disponibile în puținele pluginuri avansate date mai sus. [Demo]

Stilul copacului [Demo]

Tabulous.js [Demo]

jQuery Tabs - jQuery Tabs este un plugin simplu pentru crearea filelor. După cum sugerează și numele, este construit folosind jQuery, spre deosebire de unele plugin-uri listate mai sus care sunt construite cu CSS pur sau JavaScript. [Demo]

jQuery rTabs [Demo]

Nota editorului: Acest post a fost publicat inițial în iunie 2008 și a fost actualizat în aprilie 2018 pe baza conținutului nou.