Plus de 50 scripts de navigation Nice Clean CSS basés sur des onglets

L’une des tâches les plus importantes du concepteur d’expérience utilisateur est de s’assurer que le la navigation sur le site est simple et conviviale. Et quel autre moyen de rendre cela possible que par les onglets de navigation.

Des onglets de navigation bien conçus aident non seulement les utilisateurs à savoir où aller, mais ils sont également importants pour générer du trafic vers les pages internes de votre site Web ou de votre blog..

Donc, pour mes amis concepteurs de sites Web, voici une longue liste de scripts de navigation CSS simples et propres. Chaque option a un démo en direct avec sa source de téléchargement. Alors continuez et jetez un oeil par vous-même.

bootstrap-tabs-x - Un plugin étendu pour les onglets construit sur le dessus des onglets Bootstrap. Ça peut aligner les onglets, faire pivoter les titres, charger le contenu via AJAX, et de nombreuses autres fonctionnalités. [Démo]

Onglets CSS purs avec indicateur - Une bibliothèque d'onglets à la fois simple et moderne, construite sans JavaScript. Cela signifie que c'est rapide et beau aussi beau que vous voyez sur la plupart des sites Web populaires. [Démo]

Tigré - Tabby vous permet de créer de simples onglets à bascule permettant d'afficher tout le contenu, y compris les vidéos. Il offre divers options avancées et prend en charge NPM et Bower aussi. [Démo]

Navigation par onglets réactif - Une navigation par onglets moderne et pratique, soutenue par JS et CSS, qui est conçue pour le mobile d’abord et prend en charge les styles de positionnement horizontal et vertical. [Démo]

Toggler - Toggler est un plugin JavaScript pur permettant de créer des éléments basculants, notamment accordéons et tablatures. En outre, vous pouvez afficher / masquer n'importe quel élément de la page. [Démo]

Pure CSS Tabs - UNE extrait de tabulation simple créé à l'aide de CSS et JS. Bien que l'exemple de code affiche des onglets simples, vous pouvez les embellir en modifiant leur style à l'aide de CSS. [Démo]

Tabsy CSS - Une bibliothèque uniquement CSS pour créer des composants simples à bascule tels que des onglets. Cette bibliothèque, contrairement à quelques unes des précédentes, ne nécessite aucune dépendance, pas même un code JS. [Démo]

Tabbis.js - Tabbis est un plugin simple mais avancé. En utilisant ses options de configuration avancées, vous pouvez créer des onglets imbriqués et définir des rappels aussi. [Démo]

Onglets Pure CSS réactifs [Démo]

Onglets CSS [Démo]

Onglets utilisant Pitaya - Les onglets utilisant Pitaya vous aident à créer onglets de transition animés facilement. Cependant, vous devez inclure Pitaya, qui est une bibliothèque en soi et augmente le temps de chargement. [Démo]

jTabs - jTabs est une bibliothèque d'onglets construite en JavaScript pur. Cela signifie qu'il est construit avec pas de dépendances externes comme jQuery et prend en charge quelques options de configuration aussi. [Démo]

Onglets Flexbox réactifs [Démo]

Onglets Accordéon [Démo]

tabs.js - tabs.js est une bibliothèque d'onglets JavaScript pur inspirée par Accordion / Tabs of Bourbon Refills. Il est sensible tel que les onglets se transforment en accordéons sur de petits écrans. [Démo]

WellTabber - WellTabber est un autre plugin JavaScript simple comme Tabby. Comme ce dernier, il prend en charge diverses options pour configurer les onglets. En outre, vous pouvez afficher les flèches de navigation. [Démo]

Interface à onglets de cube 3D [Démo]

Module Onglets pour ES6 [Démo]

Hauteur variable avec des onglets CSS [Démo]

Onglet Conception matérielle - Un extrait de languettes inspiré par la conception matérielle construit à l'aide de JavaScript vanille. Il est simple à utiliser et personnalisable. Cependant, il ne comporte pas d'options avancées. [Démo]

Onglets CSS animés - Les onglets CSS animés sont un système d'onglets exclusivement CSS qui vous permet de créer des onglets simples et clairs. Contrairement à Tabby ou WellTabber, il ne propose aucune configuration avancée. [Démo]

pureTabs [Démo]

Vanilla JavaScript Accessible Tabs [Démo]

Onglets animés de style Scifi [Démo]

Onglets adaptatifs Pure CSS Bootstrap - Un système d'onglets inspiré par Bootstrap, construit en utilisant uniquement du CSS et aucun JavaScript. Quelle caractéristique unique apporte les onglets de surajustement à l'écran sont déplacés vers une liste déroulante. [Démo]

Barre d'onglets pliable - Un widget d'onglets basé sur du CSS3 pur et pas de JavaScript, comme plusieurs plugins sur cette liste. Ce qui le rend intéressant est ses onglets ont un belle transition pliable. [Démo]

Superbes onglets animés CSS [Démo]

Tabifiant JavaScript - Un plugin d'onglets avancé construit uniquement avec JavaScript. Il vous permet de définir un onglet par défaut, de le modifier dynamiquement et fonctions de rappel d'événement onLoad et onClick. [Démo]

Onglets Squelette [Démo]

Tabtastic - Tabtastic est un plugin facile à implémenter pour utiliser des onglets utilisant CSS et JS. Il utilise un balisage sémantique, est accessible aux lecteurs d'écran, et prend en charge les onglets imbriqués sur une page. [Démo]

Onglets des dossiers CSS3 et jQuery - Ce tutoriel simple (avec code téléchargeable) partage à propos de créer des onglets de dossier en utilisant CSS3 et jQuery. Cela me rappelle des onglets affichés dans des navigateurs tels que Google Chrome. [Démo]

Contenu à onglets [Démo]

Onglets de navigation de largeur égale - Un extrait de code présentant l'utilisation de CSS simples pour créer des onglets de navigation de largeur égale. Vous pouvez personnaliser l'apparence, mais il ne propose pas d'options avancées prêtes à l'emploi. [Démo]

Contenu avec onglets avec jQuery et CSS [Démo]

Assistant de démarrage Twitter - Twitter Bootstrap Wizard est un plugin pour construire des assistants d’une structure tabable. J'ai remarqué que vous pouviez créer des onglets en masquant ou en supprimant les boutons suivants et précédents. [Démo]

Pure CSS Tabs [Démo]

Onglets CSS réactifs [Démo]

Juste un autre onglet CSS - Une structure d'onglets magnifiquement conçue construite avec seulement CSS, qui fonctionne sur les navigateurs modernes. Cependant, contrairement à quelques plugins puissants donnés ci-dessus, il n'a pas d'options avancées. [Démo]

Accordéon sensible aux onglets - Comme son nom l'indique, Accordéon sensible aux onglets fonctionne comme un accordéon ou des onglets basés sur la largeur de l'écran. Il affiche les onglets si possible sinon accordéon si la taille est petite. [Démo]

CardTabs - CardTabs est un plug-in ultra-léger basé sur jQuery, qui vient avec plusieurs thèmes. Vous pouvez également créer de nouveaux thèmes et définir l'onglet actif de manière dynamique. [Démo]

Aria Tabs [Démo]

Minimal & Sexy Tabs - Un bel extrait de nouveaux onglets qui est disponible en deux couleurs - clair et foncé. Il est construit en utilisant jQuery, donc il n’est pas aussi léger que certains autres plugins listés ci-dessus. [Démo]

Widget à onglets [Démo]

Onglets adaptatifs - Adaptive Tabs est un extrait de code simple et magnifique. Hormis le design moderne, il n’a pas plus de fonctionnalités que celles disponibles dans quelques plugins avancés indiqués ci-dessus. [Démo]

Onglet Style de l'arbre [Démo]

Tabulous.js [Démo]

Onglets jQuery - jQuery Tabs est un plugin simple pour créer des onglets. Comme son nom l'indique, il est construit en utilisant jQuery, contrairement à certains plugins listés ci-dessus qui sont construits avec CSS pur ou JavaScript. [Démo]

jQuery rTabs [Démo]

Note de l'éditeur: Ce poste a été publié pour la première fois en juin 2008 et a été mis à jour en avril 2018 sur la base de nouveaux contenus..