50+ Mooie schone op CSS-tabbladen gebaseerde navigatiescripts

Een van de meest essentiële taken van een ontwerper voor gebruikerservaringen is ervoor te zorgen dat de website's navigatie is eenvoudig en gebruiksvriendelijk. En welke andere manier om dit mogelijk te maken dan via navigatie-tabbladen.

Goed ontworpen navigatietabbladen helpen gebruikers niet alleen om te weten waar ze naartoe moeten, ze zijn ook belangrijk om verkeer naar de interne pagina's van uw website of blog te leiden.

Dus, voor mijn webdesignervrienden, hier is een lange lijst van mooie en schone CSS tab-gebaseerde navigatiescripts. Elke optie heeft een live demo samen met de downloadbron. Dus ga verder en kijk zelf.

bootstrap-tabs-x - Een uitgebreide plug-in voor tabbladen die is gebouwd aan de bovenkant van Bootstrap-tabbladen. Het kan aligneer tabs, draai titels, laad content via AJAX, en nog veel meer functies. [Demonstratie]

Zuivere CSS-tabbladen met indicator - Een moderne maar duidelijke tabbladenbibliotheek die is gebouwd zonder JavaScript. Dat betekent dat het zo is snel en mooi zo goed - zo mooi als je kunt zien op de meeste populaire websites. [Demonstratie]

gestreept - Met Tabby kunt u eenvoudige schakeltabbladen maken, die alle inhoud inclusief video's kunnen tonen. Het biedt verschillende geavanceerde opties en ondersteunt NPM en Bower te. [Demonstratie]

Responsieve Navigatie met tabbladen - Een moderne, handige navigatie met tabbladen ondersteund door JS en CSS, die is gebouwd met het oog op mobiele communicatie, en ondersteunt zowel horizontale als verticale positioneringsstijlen. [Demonstratie]

Toggler - Toggler is een pure JavaScript-plug-in voor het maken van toggle-able elementen, waaronder accordeons en tabbladen. U kunt ook elk item op de pagina weergeven / verbergen. [Demonstratie]

Pure CSS-tabbladen - EEN eenvoudig tabbladenfragment gemaakt met CSS en JS. Hoewel de voorbeeldcode nog duidelijke tabbladen bevat, kunt u de tabbladen verfraaien door hun stijl te wijzigen met behulp van CSS. [Demonstratie]

Tabsy CSS - Een CSS-enige bibliotheek voor het maken van eenvoudige schakelcomponenten zoals tabbladen. Deze bibliotheek heeft, in tegenstelling tot enkele van de bovenstaande, geen afhankelijkheden nodig - zelfs geen JS-code. [Demonstratie]

Tabbis.js - Tabbis is een eenvoudige maar geavanceerde plug-in. Met behulp van de geavanceerde configuratie-opties, kunt u maak geneste tabs en definieer callbacks te. [Demonstratie]

Responsieve Pure CSS-tabbladen [Demonstratie]

CSS-tabbladen [Demonstratie]

Tabbladen met Pitaya - Tabbladen met Pitaya helpen je te creëren geanimeerde overgang tabbladen gemakkelijk. U moet echter Pitaya opnemen, wat een bibliotheek op zichzelf is en de laadtijd verlengt. [Demonstratie]

jTabs - jTabs is een tabbladenbibliotheek die is gebouwd met pure JavaScript. Dat betekent dat het is gebouwd met geen externe afhankelijkheden zoals jQuery en ondersteunt ook enkele configuratie-opties. [Demonstratie]

Responsieve Flexbox-tabbladen [Demonstratie]

Tabs Accordeon [Demonstratie]

tabs.js - tabs.js is een puur JavaScript-tabbladenbibliotheek die is geïnspireerd op Accordion / Tabs of Bourbon Refills. Het is zo responsief tabbladen veranderen in accordeons op kleine schermen. [Demonstratie]

WellTabber - WellTabber is een andere eenvoudige JavaScript-plug-in zoals Tabby. Net als de laatste, het ondersteunt verschillende opties om de tabbladen te configureren. U kunt ook navigatiepijlen weergeven. [Demonstratie]

3D Cube tabbed-interface [Demonstratie]

Tabbladenmodule voor ES6 [Demonstratie]

Variabele hoogtes met CSS-tabbladen [Demonstratie]

Material Design Tabs - Een op materiaalontwerp geïnspireerd tabblad met een fragment gemaakt met JavaScript van Vanilla. Het is eenvoudig te gebruiken en aanpasbaar ook. Het bevat echter geen geavanceerde opties. [Demonstratie]

Geanimeerde CSS-tabbladen - Geanimeerde CSS-tabbladen is een systeem met alleen tabbladen voor CSS waarmee u eenvoudige, lichte tabbladen kunt maken. In tegenstelling tot Tabby of WellTabber biedt geen geavanceerde configuratie. [Demonstratie]

pureTabs [Demonstratie]

Vanille JavaScript-toegankelijke tabbladen [Demonstratie]

Scifi-stijl geanimeerde tabbladen [Demonstratie]

Pure CSS Bootstrap Adaptive Tabs - Een Bootstrap-geïnspireerde tabsysteem gebouwd met alleen CSS en geen JavaScript. Welke unieke eigenschap het brengt is tabbladen die overlopen op het scherm worden verplaatst naar een vervolgkeuzelijst. [Demonstratie]

Opvouwbare tabbladbalk - Een tabswidget op basis van pure CSS3 en geen JavaScript, zoals verschillende plug-ins in deze lijst. Wat het interessant maakt, is dat de tabbladen een mooie opvouwbare overgang. [Demonstratie]

Awesome CSS geanimeerde tabbladen [Demonstratie]

JavaScript Tabifier - Een geavanceerde tab-plug-in gebouwd met alleen JavaScript. Hiermee kunt u een standaardtabblad instellen, het tabblad dynamisch wijzigen en add onLoad en onClick event callback-functies. [Demonstratie]

Skelet Tabs [Demonstratie]

Tabtastic - Tabtastic is een eenvoudige plug-in om tabbladen te implementeren met behulp van CSS en JS. Het maakt gebruik van semantische markup, is toegankelijk voor schermlezers, en ondersteunt geneste tabbladen op een pagina. [Demonstratie]

CSS3 & jQuery-tabbladen - Deze eenvoudige tutorial (met downloadbare code) deelt over het maken van maptabbladen met behulp van CSS3 en jQuery. Het doet me denken aan tabbladen in browsers zoals Google Chrome. [Demonstratie]

Inhoud met tabbladen [Demonstratie]

Navigatietabbladen op gelijke breedte - Een codefragment waarin het gebruik van gewone CSS wordt weergegeven om navigatielabbladen met gelijke breedte te maken. Jij kan pas het uiterlijk aan, maar het biedt geen geavanceerde opties uit de doos. [Demonstratie]

Inhoud met tabbladen met jQuery & CSS [Demonstratie]

Twitter Bootstrap Wizard - Twitter Bootstrap Wizard is een plug-in om wizards van een tabbable structuur te bouwen. Ik zag dat je alleen tabbladen kon maken door de volgende en vorige knoppen te verbergen of te verwijderen. [Demonstratie]

Pure CSS-tabbladen [Demonstratie]

Responsieve CSS-tabbladen [Demonstratie]

Gewoon nog een CSS-tabs - Een prachtig vormgegeven tabbladstructuur gebouwd met alleen CSS, die werkt op moderne browsers. In tegenstelling tot enkele krachtige plug-ins die hierboven werden vermeld, heeft het echter geen geavanceerde opties. [Demonstratie]

Responsieve accordeon op tabbladen - Responsieve accordeon op tabbladen werkt, zoals de naam al doet vermoeden, als accordeon of tabbladen op basis van de schermbreedte. Het toont tabbladen indien mogelijk anders accordeon als de maat klein is. [Demonstratie]

CardTabs - CardTabs is een ultralichte tabbladen plug-in op basis van jQuery, die wordt geleverd met meerdere thema's. U kunt ook nieuwe thema's maken en het actieve tabblad dynamisch instellen. [Demonstratie]

Aria Tabs [Demonstratie]

Minimale & sexy tabbladen - Een mooi, nieuw tabfragment dat dat is verkrijgbaar in twee kleurenschema's: licht en donker. Het is gebouwd met behulp van jQuery, dus het is niet zo licht als sommige andere plug-ins hierboven vermeld. [Demonstratie]

Widget met tabbladen [Demonstratie]

Adaptieve tabbladen - Adaptieve tabbladen is een eenvoudig, mooi tabbladfragment. Afgezien van het moderne ontwerp, heeft het niet meer functies zoals die beschikbaar zijn in enkele hierboven vermelde geavanceerde plug-ins. [Demonstratie]

Tree Style Tab [Demonstratie]

Tabulous.js [Demonstratie]

jQuery-tabbladen - jQuery Tabs is een eenvoudige plug-in voor het maken van tabbladen. Zoals de naam al doet vermoeden, is het dat wel gebouwd met behulp van jQuery, in tegenstelling tot sommige hierboven genoemde plug-ins die zijn gebouwd met pure CSS of JavaScript. [Demonstratie]

jQuery rTabs [Demonstratie]

Opmerking van de uitgever: Dit bericht is oorspronkelijk gepubliceerd in juni 2008 en is in april 2018 bijgewerkt op basis van nieuwe inhoud.