50 + Nice Clean CSS Tab-Based Navigation Scripts
En af de mest vitale opgaver for en brugeroplevelsesdesigner er at sikre, at websiteets navigation er enkel og brugervenlig. Og hvilken anden måde at gøre det muligt end via navigationsfaner.
Velindrettede navigationsfaner hjælper ikke kun brugerne med at vide, hvor de skal hen, de er også vigtige for at drive trafik til de interne sider på dit websted eller blog..
Så for mine webdesigners venner er her en lang liste over hyggelige og rene CSS-fanebaserede navigeringsskripter. Hver indstilling har a live demo sammen med dens download kilde. Så fortsæt og tag et kig på dig selv.
bootstrap-tabs-x - Et udvidet faneblad plugin bygget på toppen af Bootstrap Tabs. Det kan juster faner, roter titler, indlæs indhold via AJAX, og mange flere funktioner. [Demo]
Rene CSS-faner med indikator - En moderne, men ligefrem fanebibliotek bygget uden JavaScript. Det betyder, det er hurtig og smuk så godt - så smuk som du ser på de fleste populære hjemmesider. [Demo]
tabby - Tabby giver dig mulighed for at oprette enkle skift faner, som kan vise indhold, herunder videoer. Det tilbyder forskellige avancerede muligheder og understøtter NPM og Bower også. [Demo]
Responsive Tabbed Navigation - En moderne, praktisk flad navigation navngivet af JS og CSS, som er bygget med mobil-først og fremmest og understøtter vandrette såvel som lodrette positioneringsstile. [Demo]
toggler - Toggler er et rent JavaScript-plugin til oprettelse af bytteegenskaber, herunder harmonika og faner. Du kan også vise / skjule kun noget emne på siden. [Demo]
Pure CSS Tabs - EN Simple tabs-uddrag skabt ved hjælp af CSS og JS. Selvom eksemplet kode viser almindelige faner endnu, kan du forskønne fanerne ved at ændre deres styling ved hjælp af CSS. [Demo]
Tabsy CSS - Et CSS-eneste bibliotek til oprettelse af enkle skiftkomponenter som faner. Dette bibliotek, i modsætning til få af ovenstående, behøver ingen afhængigheder - ikke engang nogen JS-kode. [Demo]
Tabbis.js - Tabbis er et simpelt, men avanceret plugin. Ved hjælp af de avancerede konfigurationsindstillinger kan du lav indlejrede faner og definer tilbagekald også. [Demo]
Responsive Pure CSS Tabs [Demo]
CSS faner [Demo]
Faneblade ved hjælp af Pitaya - Faneblade ved hjælp af Pitaya hjælper dig med at oprette animerede overgangsfliker nemt. Du skal dog inkludere Pitaya, som er et bibliotek i sig selv og øger belastningstiden. [Demo]
jTabs - jTabs er et fanebibliotek bygget ved hjælp af ren JavaScript. Det betyder, at det er bygget med ingen eksterne afhængigheder som jQuery og understøtter også få konfigurationsindstillinger. [Demo]
Responsive Flexbox Tabs [Demo]
Tabs Accordion [Demo]
tabs.js - tabs.js er et rent JavaScript-fanebibliotek inspireret af Accordion / Tabs of Bourbon Refills. Det er lydhørt, at faner skifter til harmonika på små skærme. [Demo]
WellTabber - WellTabber er et andet simpelt JavaScript-plugin som Tabby. Ligesom sidstnævnte, det understøtter forskellige muligheder for at konfigurere fanerne. Du kan også vise navigationspile. [Demo]
3D Cube Tabbed Interface [Demo]
Fane modul til ES6 [Demo]
Variable Heights med CSS Tabs [Demo]
Materiale design faner - Et materiale design inspireret faneblade udbygget med Vanilla JavaScript. det er nem at bruge og tilpasses også. Det indeholder dog ikke avancerede indstillinger. [Demo]
Animerede CSS faner - Animerede CSS Tabs er et CSS-only tabs-system, som giver dig mulighed for at oprette enkle, lyse faner. I modsætning til Tabby eller WellTabber, det tilbyder ikke nogen avanceret konfiguration. [Demo]
pureTabs [Demo]
Vanilla JavaScript Tilgængelige faner [Demo]
Scifi-stil Animerede faner [Demo]
Pure CSS Bootstrap Adaptive Tabs - Et Bootstrap-inspireret fane system bygget kun ved hjælp af CSS og ingen JavaScript. Hvilken unik funktion det bringer er faner overfitting på skærmen flyttes til en dropdown liste. [Demo]
Foldbar faneblad - En faneblad widget baseret på ren CSS3 og ingen JavaScript, ligesom forskellige plugins på denne liste. Hvad gør det interessant er dets faner har a flot udfoldelig overgang. [Demo]
Awesome CSS animerede faner [Demo]
JavaScript Tabifier - Et avanceret faneblad plugin bygget med bare JavaScript. Det lader dig indstille en standardfaneblad, ændre fanen dynamisk og tilføj onLoad og onClick event callback funktioner. [Demo]
Skelet tabs [Demo]
Tabtastic - Tabtastic er et nemt plugin til at implementere faner ved hjælp af CSS og JS. Det bruger semantisk markering, er tilgængelig for skærmlæsere, og understøtter indlejrede faner på en side. [Demo]
CSS3 & jQuery mappe faner - Denne nemme vejledning (med downloadbar kode) deler om oprettelse af mappefliker ved hjælp af CSS3 og jQuery. Det minder mig om faner vist i browsere som Google Chrome. [Demo]
Fanebladet indhold [Demo]
Navigationsfaner med lige bredde - En kodestykke, der viser brug af almindeligt CSS til at oprette navigeringsfaner med lige bredde. Du kan Tilpas udseendet, men det tilbyder ikke avancerede muligheder ud af boksen. [Demo]
Tabbed Content med jQuery & CSS [Demo]
Twitter Bootstrap Wizard - Twitter Bootstrap Wizard er et plugin til at opbygge guider for en tabbar struktur. Jeg har bemærket, at du kun kunne oprette faner ved at gemme eller fjerne de næste og forrige knapper. [Demo]
Pure CSS Tabs [Demo]
Responsive CSS Tabs [Demo]
Bare en anden CSS Tabs - En smukt udformet fane struktur bygget med bare CSS, som arbejder på moderne browsere. Men i modsætning til få kraftfulde plugins gav ovenfor, har den ingen avancerede muligheder. [Demo]
Responsive Accordion to Tabs - Responsive Accordion to Tabs, som navnet antyder, fungerer som accordeon eller faner baseret på skærmens bredde. Det viser faner om muligt andet accordeon, hvis størrelsen er lille. [Demo]
CardTabs - CardTabs er en ultra-light tabs plugin baseret på jQuery, som kommer med flere temaer. Du kan også oprette nye temaer og indstille den aktive fane dynamisk. [Demo]
Aria faner [Demo]
Minimale & Sexy Tabs - Et smukt, nyt faneblad, der er fås i to farver - lys og mørk. Det er bygget ved hjælp af jQuery, så det er ikke så let som nogle andre plugins, der er angivet ovenfor. [Demo]
Tabbed Widget [Demo]
Adaptive faner - Adaptive Tabs er et simpelt, smukt faneblad. Udover det moderne design har det ikke flere funktioner som det, der er tilgængeligt i få avancerede plugins givet ovenfor. [Demo]
Fanen Tree Style [Demo]
Tabulous.js [Demo]
jQuery faner - jQuery-faner er et simpelt plugin til oprettelse af faner. Som navnet antyder, er det bygget ved hjælp af jQuery, i modsætning til nogle ovennævnte plugins der er bygget med rent CSS eller JavaScript. [Demo]
jQuery rTabs [Demo]
Redaktørens note: Dette indlæg blev oprindeligt offentliggjort i juni 2008 og blev opdateret i april 2018 på grundlag af nyt indhold.
