50+ Nice Clean Script di navigazione basati su tabelle CSS
Uno dei compiti più importanti di un designer dell'esperienza utente è assicurarsi che il la navigazione del sito Web è semplice e intuitiva. E quale altro modo per rendere questo possibile rispetto attraverso le schede di navigazione.
Le schede di navigazione ben progettate non solo aiutano gli utenti a sapere dove andare, ma sono anche importanti per indirizzare il traffico verso le pagine interne del tuo sito web o blog.
Quindi, per i miei amici del web designer, ecco una lunga lista di script di navigazione CSS basati su linguette. Ogni opzione ha un demo live insieme alla sua fonte di download. Quindi vai avanti e dai un'occhiata.
bootstrap-schede-x - Un plug-in esteso per schede creato sulla parte superiore delle schede Bootstrap. Può allineare le schede, ruotare i titoli, caricare il contenuto tramite AJAX, e numerose altre funzionalità. [Demo]
Schede CSS pure con indicatore - Una libreria di schede moderna ma semplice costruita senza JavaScript. Ciò significa che lo è veloce e bello così come bello come vedi sui siti più popolari. [Demo]
soriano - Tabby ti consente di creare semplici schede di attivazione, che possono mostrare qualsiasi contenuto, inclusi i video. Offre vari opzioni avanzate e supporta NPM e Bower pure. [Demo]
Navigazione a schede reattiva - Una navigazione a schede moderna e maneggevole, supportata da JS e CSS, che è stata progettata per i dispositivi mobili e in primo luogo supporta gli stili di posizionamento orizzontali e verticali. [Demo]
Toggler - Toggler è un puro plug-in per JavaScript per la creazione di elementi modificabili inclusi fisarmoniche e schede. Inoltre, puoi mostrare / nascondere solo qualsiasi elemento sulla pagina. [Demo]
Pure CSS Tabs - UN frammenti di schede semplici creati con CSS e JS. Anche se il codice di esempio mostra schede semplici, puoi abbellire le schede modificandone lo stile tramite CSS. [Demo]
Tabsy CSS - Una libreria solo CSS per la creazione di componenti di commutazione semplici come le schede. Questa libreria, a differenza di alcuni di quelli precedenti, non ha bisogno di dipendenze, nemmeno di codice JS. [Demo]
Tabbis.js - Tabbis è un plugin semplice ma avanzato. Usando le sue opzioni di configurazione avanzate, puoi creare schede annidate e definire i callback pure. [Demo]
Responsive Pure CSS Tabs [Demo]
Schede CSS [Demo]
Schede usando Pitaya - Le schede che usano Pitaya ti aiutano a creare schede di transizione animate facilmente. Tuttavia, è necessario includere Pitaya, che è una libreria in sé e aumenta il tempo di caricamento. [Demo]
jTabs - jTabs è una libreria di schede creata utilizzando puro JavaScript. Ciò significa che è costruito con nessuna dipendenza esterna come jQuery e supporta anche poche opzioni di configurazione. [Demo]
Schede Flexbox reattive [Demo]
Tabs fisarmonica [Demo]
tabs.js - tabs.js è una libreria di schede JavaScript pura ispirata a Accordion / Tabs of Bourbon Refill. È così sensibile le schede si trasformano in fisarmoniche su schermi piccoli. [Demo]
WellTabber - WellTabber è un altro semplice plugin di JavaScript come Tabby. Come il secondo, esso supporta varie opzioni per configurare le schede. Inoltre, puoi mostrare le frecce di navigazione. [Demo]
Interfaccia a schede 3D Cube [Demo]
Modulo schede per ES6 [Demo]
Altezze variabili con schede CSS [Demo]
Schede materiali - Uno snippet di schede ispirato al material design basato su JavaScript di Vanilla. È semplice da usare e personalizzabile pure. Tuttavia, non presenta opzioni avanzate. [Demo]
Schede CSS animate - Le schede CSS animate sono un sistema di schede solo CSS che consente di creare schede semplici e chiare. A differenza di Tabby o WellTabber, esso non offre alcuna configurazione avanzata. [Demo]
pureTabs [Demo]
Schede accessibili da vaniglia JavaScript [Demo]
Schede animate in stile Scifi [Demo]
Schede adattive Bootstrap CSS pure - Un sistema di tabulazioni ispirato a Bootstrap costruito usando solo CSS e senza JavaScript. Qual è la sua caratteristica unica le schede che sovrascrivono sullo schermo vengono spostate in un elenco a discesa. [Demo]
Barra delle linguette pieghevole - Un widget di schede basato su puro CSS3 e nessun JavaScript, come vari plugin in questo elenco. Ciò che lo rende interessante è che le sue schede hanno un transizione pieghevole dall'aspetto piacevole. [Demo]
Incredibili schede animate CSS [Demo]
Tabificatore JavaScript - Un plugin di tabulazione avanzato realizzato con solo JavaScript. Ti consente di impostare una scheda predefinita, cambiare la scheda in modo dinamico e aggiungere onLoad e onClick funzioni di callback degli eventi. [Demo]
Schede Scheletro [Demo]
Tabtastic - Tabtastic è un semplice plugin per implementare le schede usando CSS e JS. esso utilizza il markup semantico, è accessibile per gli screen reader, e supporta le schede annidate su una pagina. [Demo]
Schede della cartella CSS3 e jQuery - Questo facile tutorial (con codice scaricabile) condivide creare schede di cartelle usando CSS3 e jQuery. Mi ricorda le schede mostrate nei browser come Google Chrome. [Demo]
Contenuto a schede [Demo]
Schede di navigazione di uguale larghezza - Un frammento di codice, che mostra l'uso di semplici CSS per creare schede di navigazione di uguale larghezza. Puoi personalizza l'aspetto, ma non offre opzioni avanzate fuori dalla scatola. [Demo]
Contenuto a schede con jQuery e CSS [Demo]
Twitter Bootstrap Wizard - Twitter Bootstrap Wizard è un plugin per creare wizard di una struttura tabbable. Ho notato che potresti creare solo schede nascondendo o rimuovendo i pulsanti precedente e successivo. [Demo]
Pure CSS Tabs [Demo]
Responsive CSS Tabs [Demo]
Solo un altro Tabs CSS - Una struttura tabulata magnificamente costruita costruita con solo CSS, che funziona su browser moderni. Tuttavia, a differenza di alcuni potenti plugin forniti sopra, non ha opzioni avanzate. [Demo]
Responsive Accordion to Tabs - La fisarmonica reattiva alle schede, come suggerisce il nome, funziona come fisarmonica o tabulazione in base alla larghezza dello schermo. esso mostra schede se possibile altrimenti fisarmonica se la dimensione è piccola. [Demo]
CardTabs - CardTabs è un plugin per schede ultraleggere basato su jQuery, che viene fornito con più temi. Puoi anche creare nuovi temi e impostare la scheda attiva in modo dinamico. [Demo]
Tab. Aria [Demo]
Linguette minimal e sexy - Un bellissimo frammento di scheda che è disponibile in due combinazioni di colori: chiaro e scuro. È costruito usando jQuery, quindi non è leggero come alcuni altri plug-in elencati sopra. [Demo]
Widget a schede [Demo]
Schede adattive - Adaptive Tabs è uno snippet di schede semplice e bello. A parte il design moderno, non ha più funzioni come quelle disponibili in alcuni plugin avanzati sopra citati. [Demo]
Scheda Stile albero [Demo]
Tabulous.js [Demo]
Schede jQuery - jQuery Tabs è un semplice plug-in per la creazione di schede. Come suggerisce il nome, lo è costruito usando jQuery, a differenza di alcuni plugin sopra elencati che sono costruiti con puro CSS o JavaScript. [Demo]
jQuery rTabs [Demo]
Nota dell'editore: Questo post è stato originariamente pubblicato nel giugno 2008 ed è stato aggiornato ad aprile 2018 sulla base di nuovi contenuti.
