50+ Nizzan puhdas CSS-välilehdet
Yksi käyttäjäkokemuksen suunnittelijan tärkeimmistä tehtävistä on varmistaa, että verkkosivuston navigointi on yksinkertaista ja käyttäjäystävällistä. Ja mikä muu tapa tehdä tämä mahdolliseksi kuin navigointivälineiden kautta.
Hyvin suunnitellut navigointivälit eivät ainoastaan auta käyttäjiä tietämään, minne mennä, vaan ne ovat tärkeitä myös liikenteen ohjaamiseksi sivustosi tai blogisi sisäisiin sivuihin.
Niinpä web-suunnittelijan ystävilleni tässä on pitkä luettelo mukavista ja puhtaista CSS-välilehdistä. Jokaisella vaihtoehdolla on a live-esittely sekä sen latauslähde. Joten jatka ja etsi itseäsi.
Bootstrap-välilehdet-x - Bootstrap-välilehtien yläreunaan rakennettu laajennettu välilehti. Se voi kohdista välilehdet, käännä nimikkeitä, lataa sisältöä AJAXin kautta, ja useita muita ominaisuuksia. [Demo]
Puhdas CSS-välilehdet ilmaisimella - Moderni mutta yksinkertainen välilehti kirjasto rakennettu ilman JavaScript. Se tarkoittaa sitä nopea ja kaunis samoin - niin kaunis kuin näet suosituimmilla verkkosivuilla. [Demo]
juovikas kissa - Tabby-toiminnolla voit luoda yksinkertaisia vaihtokielekkeitä, jotka voivat näyttää minkä tahansa sisällön, mukaan lukien videot. Se tarjoaa erilaisia lisäasetuksia ja tukee NPM: ää ja Boweria liian. [Demo]
Reagoiva Tabbed Navigation - Moderni, kätevä välilehdellä varustettu navigointi, jota tukee JS ja CSS, joka on rakennettu mobiili-ensin tukee sekä vaaka- että pystysuuntaista asennustapaa. [Demo]
nivelvivun - Toggler on puhdas JavaScript-laajennus, joka luo vaihtokelpoisia elementtejä harmonikot ja välilehdet. Voit myös näyttää / piilottaa vain minkä tahansa sivun kohteen. [Demo]
Pure CSS -välilehdet - yksinkertaisia välilehtiä, joka on luotu CSS: n ja JS: n avulla. Vaikka esimerkkikoodi näyttää tavalliset välilehdet, voit kuitenkin kaunistaa välilehdet muuttamalla tyylinsä CSS: llä. [Demo]
Tabsy CSS - Vain CSS-kirjasto, joka luo yksinkertaisia vaihtokomponentteja, kuten välilehtiä. Tämä kirjasto, toisin kuin muutamat edellä mainituista, ei tarvitse mitään riippuvuuksia - ei edes JS-koodia. [Demo]
Tabbis.js - Tabbis on yksinkertainen mutta edistyksellinen plugin. Voit käyttää kehittyneitä asetusvaihtoehtoja luo sisäkkäiset välilehdet ja määritä takaisinsoitot liian. [Demo]
Reagoivat puhdas CSS-välilehdet [Demo]
CSS-välilehdet [Demo]
Välilehdet, joissa käytetään Pitayaa - Pitaya-välilehdet auttavat sinua luomaan animoidut siirtymävälilehdet helposti. Sinun on kuitenkin sisällytettävä Pitaya, joka on kirjasto itsessään ja lisää latausaikaa. [Demo]
jTabs - jTabs on välilehtikirjasto, joka on rakennettu puhtaasta JavaScriptista. Se tarkoittaa, että se on rakennettu ei ulkoisia riippuvuuksia, kuten jQuery ja tukee myös muutamia asetusvaihtoehtoja. [Demo]
Reagoivat Flexbox-välilehdet [Demo]
Välilehdet Yhdistelmä [Demo]
tabs.js - tabs.js on puhdas JavaScript-välilehti-kirjasto, jonka innoittamana on Bourbon-täyttöjen Accordion / Tabs. Se on reagoiva niin välilehdet muuttuvat harmonikoiksi pienillä näytöillä. [Demo]
WellTabber - WellTabber on toinen yksinkertainen JavaScript-laajennus, kuten Tabby. Kuten jälkimmäinen, se tukee eri asetuksia välilehtien määrittämiseen. Voit myös näyttää navigointi-nuolia. [Demo]
3D Cube Tabbed -liitäntä [Demo]
Välilehdet Moduuli ES6: lle [Demo]
Muuttuvat korkeudet CSS-välilehdillä [Demo]
Materiaalisuunnittelu-välilehdet - Materiaalinen muotoilu inspiroi välilehtiä, joka on rakennettu Vanilla JavaScriptin avulla. se on helppokäyttöinen ja muokattavissa. Siinä ei kuitenkaan ole lisäasetuksia. [Demo]
Animoitu CSS-välilehdet - Animoitu CSS-välilehti on vain CSS-välilehtijärjestelmä, jonka avulla voit luoda yksinkertaisia, kevyitä välilehtiä. Toisin kuin Tabby tai WellTabber, se ei tarjoa mitään lisäasetuksia. [Demo]
pureTabs [Demo]
Vaniljan JavaScript-välilehdet [Demo]
Scifi-tyyliset animoidut välilehdet [Demo]
Pure CSS Bootstrap Adaptive Tabs - Bootstrap-inspiroitu välilehti, joka on rakennettu käyttäen vain CSS: ää eikä JavaScript. Mikä ainutlaatuinen piirre tuo välilehdet, jotka on asennettu näyttöön, siirretään pudotusvalikkoon. [Demo]
Taitettava välilehti - Pelkkä CSS3-pohjainen välilehti-widget, joka ei sisällä JavaScriptiä, kuten eri listan laajennukset. Mielenkiintoinen on sen välilehdillä a mukava näköinen taitettava siirtymä. [Demo]
Awesome CSS Animated Tabs [Demo]
JavaScript Tabifier - Kehittynyt välilehti plugin rakennettu vain JavaScript. Sen avulla voit asettaa oletusvälilehden, vaihtaa välilehden dynaamisesti ja lisää onLoad- ja onClick-tapahtuman takaisinsoitotoiminnot. [Demo]
Skeleton-välilehdet [Demo]
Tabtastic - Tabtastinen on helppo laajennus, jolla voidaan toteuttaa välilehtiä CSS: llä ja JS: llä. Se käyttää semanttista merkintää, on käytettävissä näytönlukijoille, ja tukee sivun sisäkkäisiä välilehtiä. [Demo]
CSS3 & jQuery-kansion välilehdet - Tämä helppo opetusohjelma (jossa ladattava koodi) jakaa tietoja luodaan kansioiden välilehtiä käyttäen CSS3 ja jQuery. Se muistuttaa minua selaimissa näkyvistä välilehdistä, kuten Google Chrome. [Demo]
Sisältö [Demo]
Yhden leveyden navigointi-välilehdet - Koodinpätkä, jossa esitetään tavallisen CSS: n käyttö tasa-leveiden navigointivälineiden luomiseksi. Sinä pystyt muokkaa ulkoasua, mutta se ei tarjoa lisäasetuksia laatikosta. [Demo]
Yhdistetty sisältö jQuery & CSS: n avulla [Demo]
Twitter Bootstrap Wizard - Twitter Bootstrap Wizard on laajennin, jonka avulla voit luoda ohjattuja arkkeja. Huomasin, että voit luoda vain välilehtiä piilottamalla tai poistamalla seuraavan ja edellisen painikkeen. [Demo]
Pure CSS -välilehdet [Demo]
Reagoivat CSS-välilehdet [Demo]
Vain toinen CSS-välilehti - Kauniisti muotoiltu välilehti, joka on rakennettu vain CSS: n avulla toimii nykyaikaisissa selaimissa. Toisin kuin muutamat edellä esitetyt tehokkaat lisäosat, sillä ei kuitenkaan ole lisäasetuksia. [Demo]
Reagoiva sovitus välilehtiin - Reagoiva harmonika välilehtiin, kuten nimestä voi päätellä, toimii akordionina tai välilehdinä näytön leveyden perusteella. Se näyttää välilehdet, jos mahdollista. [Demo]
CardTabs - CardTabs on ultrakevyt välilehdet plugin, joka perustuu jQueryyn, joka sisältää useita teemoja. Voit myös luoda uusia teemoja ja asettaa aktiivisen välilehden dynaamisesti. [Demo]
Aria Tabs [Demo]
Minimal & Sexy -välilehdet - Tämä on kaunis, uusi välilehti saatavana kahdessa värivaiheessa - vaalea ja tumma. Se on rakennettu käyttäen jQueryä, joten se ei ole niin kevyt kuin muut edellä mainitut laajennukset. [Demo]
Ohjattu widget [Demo]
Mukautettavat välilehdet - Adaptiiviset välilehdet on yksinkertainen ja kaunis välilehti. Modernin muotoilun lisäksi sillä ei ole enemmän ominaisuuksia, kuten se on saatavilla muutamilla edellä esitetyillä lisälaajennuksilla. [Demo]
Puun tyyli -välilehti [Demo]
Tabulous.js [Demo]
jQuery-välilehdet - jQuery-välilehdet on yksinkertainen laajennus välilehtien luomiseen. Kuten sen nimi viittaa, se on rakennettu käyttäen jQueryä, toisin kuin joissakin yllä luetelluissa laajennuksissa jotka on rakennettu puhtaalla CSS: llä tai JavaScriptillä. [Demo]
jQuery rTabs [Demo]
Toimittajan huomautus: Tämä viesti julkaistiin alun perin kesäkuussa 2008 ja päivitettiin huhtikuussa 2018 uuden sisällön perusteella.
