50+ „Nice Clean“ CSS skirtukų pagrindu sukurti navigacijos scenarijai
Vienas iš svarbiausių vartotojo patirties dizainerio uždavinių yra užtikrinti, kad svetainės navigacija yra paprasta ir patogi. O kokiu kitu būdu tai padaryti įmanoma nei per naršymo skirtukus.
Gerai suplanuoti navigacijos skirtukai ne tik padeda naudotojams žinoti, kur eiti, bet ir svarbu, kad srautas būtų nukreiptas į jūsų svetainės ar tinklaraščio vidinius puslapius.
Taigi, mano žiniatinklio dizainerio draugams, čia yra ilgas gražus ir švarus CSS skirtukais pagrįstas navigacijos scenarijų sąrašas. Kiekviena parinktis turi a tiesioginis demonstravimas kartu su atsisiuntimo šaltiniu. Taigi eikite ir pažiūrėkite save.
bootstrap-tabs-x - Išplėstinis skirtukų įskiepis, pastatytas „Bootstrap“ skirtukų viršuje. Tai gali suderinti skirtukus, pasukti pavadinimus, įkelti turinį per AJAX, ir daug daugiau funkcijų. [Demo]
Grynieji CSS skirtukai su indikatoriumi - Moderni, bet nesudėtinga skirtukų biblioteka, pastatyta be „JavaScript“. Tai reiškia, kad tai yra greitas ir gražus taip pat - gražus, kaip matote populiariausiose svetainėse. [Demo]
Tabby - „Tabby“ leidžia jums sukurti paprastus perjungimo skirtukus, kurie gali rodyti bet kokį turinį, įskaitant vaizdo įrašus. Jis siūlo įvairias išplėstines parinktis ir palaiko NPM ir „Bower“ taip pat. [Demo]
Atsakinga navigacija - Šiuolaikiškas, patogus skirtukas su navigacija, palaikomas JS ir CSS, kuris yra pastatytas pirmiausia pagal mobilųjį telefoną palaiko horizontalius ir vertikalius padėties nustatymo stilius. [Demo]
Toggler - „Toggler“ yra grynas „JavaScript“ įskiepis, skirtas kurti įjungiamus elementus, įskaitant akordeonai ir skirtukai. Be to, galite rodyti / slėpti tik bet kurį puslapio elementą. [Demo]
Grynieji CSS skirtukai - A paprastas skirtukų fragmentas, sukurtas naudojant CSS ir JS. Nors pavyzdinis kodas rodo paprastus skirtukus, tačiau galite pagražinti skirtukus keisdami jų stilių naudodami CSS. [Demo]
Tabsy CSS - Tik CSS biblioteka, kuria galima kurti paprastus perjungimo komponentus, pvz., Skirtukus. Ši biblioteka, skirtingai nei keletas pirmiau minėtų, nereikalauja jokių priklausomybių - netgi jokio JS kodo. [Demo]
Tabbis.js - „Tabbis“ yra paprastas, tačiau pažangus įskiepis. Naudodamiesi išplėstinėmis konfigūravimo parinktimis, galite sukurti įdėtus skirtukus ir apibrėžti skambučius taip pat. [Demo]
Reaguojančios grynos CSS skirtukai [Demo]
CSS skirtukai [Demo]
Skirtukai naudojant „Pitaya“ - Skirtukai, naudojantys „Pitaya“, padeda kurti animuoti pereinamieji skirtukai lengvai. Tačiau turite įtraukti Pitaya, kuri yra pati biblioteka ir padidina įkėlimo laiką. [Demo]
jTabs - jTabs yra skirtukų biblioteka, sukurta naudojant gryną „JavaScript“. Tai reiškia, kad jis yra pastatytas jokių išorinių priklausomybių, tokių kaip jQuery ir palaiko keletą konfigūravimo parinkčių. [Demo]
Reaguojantis „Flexbox“ skirtukai [Demo]
Skirtukų suderinimas [Demo]
tabs.js - tabs.js yra gryna „JavaScript“ skirtukų biblioteka, įkvėpta „Bourbon Refill“ akordeono / skirtukų. Taip reaguoja skirtukai keičiasi į akordeonus mažuose ekranuose. [Demo]
WellTabber - „WellTabber“ yra dar vienas paprastas „JavaScript“ papildinys, pvz., „Tabby“. Kaip ir pastaroji, tai palaiko įvairias skirtukų konfigūravimo parinktis. Taip pat galite rodyti naršymo rodykles. [Demo]
3D kubo sąsaja [Demo]
ES6 skirtukų modulis [Demo]
Kintami aukščiai su CSS skirtukais [Demo]
Medžiagų dizaino skirtukai - Medžiagos dizainas įkvėpė skirtukų fragmentą, sukurtą naudojant „Vanilla JavaScript“. tai yra paprasta naudoti ir pritaikyti. Tačiau jame nėra papildomų parinkčių. [Demo]
Animuoti CSS skirtukai - Animuoti CSS skirtukai yra tik CSS skirtukų skirtukų sistema, leidžianti sukurti paprastus, šviesius skirtukus. Skirtingai nei Tabby arba WellTabber, tai nesiūlo jokių papildomų konfigūracijų. [Demo]
pureTabs [Demo]
Vanilės „JavaScript“ skirtukai [Demo]
Scifi stiliaus animaciniai skirtukai [Demo]
Pure CSS Bootstrap Adaptive Tabs - Bootstrap įkvėpta skirtukų sistema, sukurta naudojant tik „CSS“ ir be „JavaScript“. Kokia unikali jo savybė yra ekranuose perpildyti skirtukai perkeliami į išskleidžiamąjį sąrašą. [Demo]
Sulankstoma skirtukų juosta - Skirtukų valdiklis, pagrįstas grynu CSS3 ir be „JavaScript“, kaip ir įvairūs šio sąrašo priedai. Įdomu tai, kad jos skirtukai turi a gražus, sulankstomas perėjimas. [Demo]
Awesome CSS animaciniai skirtukai [Demo]
„JavaScript Tabifier“ - Išplėstinis skirtukų įskiepis, pastatytas tik su „JavaScript“. Jis leidžia nustatyti numatytąjį skirtuką, keisti skirtuką, ir pridėti „OnLoad“ ir „onClick“ įvykio atgalinio ryšio funkcijas. [Demo]
Skeleto skirtukai [Demo]
Tabtastika - Tabtastika yra paprastas įskiepis, skirtas skirtukų diegimui naudojant CSS ir JS. Tai naudoja semantinį žymėjimą, yra prieinama ekrano skaitytuvams, ir palaiko įdėtus puslapius puslapyje. [Demo]
CSS3 ir jQuery aplankų skirtukai - Tai lengva pamoka (su parsisiunčiamu kodu) kurti aplanko skirtukus naudojant CSS3 ir jQuery. Jis man primena skirtukus, rodomus naršyklėse, pvz., „Google Chrome“. [Demo]
Bendras turinys [Demo]
Vienodo pločio navigacijos skirtukai - Kodo fragmentas, rodantis paprasto CSS naudojimą, kad sukurtų lygiagreti navigacijos skirtukus. Tu gali tinkinti išvaizdą, tačiau ji nepasiūlo išplėstinių parinkčių iš dėžutės. [Demo]
Sujungtas turinys su jQuery & CSS [Demo]
„Twitter Bootstrap“ vedlys - „Twitter“ „Bootstrap“ vedlys yra papildinys, skirtas statyboms, kurių struktūra yra „tabbable“. Pastebėjau, kad galite sukurti tiesiog skirtukus paslėpdami arba pašalindami kitą ir ankstesnius mygtukus. [Demo]
Grynieji CSS skirtukai [Demo]
Atsakomieji CSS skirtukai [Demo]
Tiesiog kitos CSS skirtukai - Gražiai sukurta skirtukų struktūra, pastatyta tik su CSS, kuri veikia šiuolaikinėse naršyklėse. Tačiau, skirtingai nei keletas aukščiau pateiktų galingų įskiepių, jis neturi papildomų parinkčių. [Demo]
Atsakingas suderinimas su skirtukais - Atsakingas suderinimas su skirtukais, kaip rodo pavadinimas, veikia kaip akordeonas ar skirtukai pagal ekrano plotį. Tai jei įmanoma, rodo skirtukus, jei įmanoma, akordeoną. [Demo]
„CardTabs“ - CardTabs yra itin lengvas skirtukų įskiepis, pagrįstas jQuery, su daugeliu temų. Taip pat galite kurti naujas temas ir dinamiškai nustatyti aktyvųjį skirtuką. [Demo]
Aria Tabs [Demo]
Minimalūs ir seksualūs skirtukai - Tai gražus, naujas skirtukų fragmentas galima įsigyti dviem spalvų schemomis - šviesiai ir tamsiai. Jis yra pastatytas naudojant jQuery, todėl jis nėra toks lengvas kaip ir kiti aukščiau išvardyti papildiniai. [Demo]
Valdomas valdiklis [Demo]
Adaptyvūs skirtukai - Adaptyvieji skirtukai yra paprastas, gražus skirtukų fragmentas. Be šiuolaikinio dizaino, jame nėra daugiau funkcijų, pvz., Prieinamų keliuose aukščiau pateiktuose prieduose. [Demo]
Medžio stiliaus skirtukas [Demo]
Tabulous.js [Demo]
jQuery skirtukai - jQuery skirtukai yra paprastas skirtukų kūrimo papildinys. Kaip rodo jo pavadinimas, tai yra pastatytas naudojant jQuery, skirtingai nuo kai kurių anksčiau išvardytų priedų kurie yra pagaminti naudojant gryną CSS arba „JavaScript“. [Demo]
jQuery rTabs [Demo]
Redaktoriaus pastaba: Šis pranešimas iš pradžių buvo paskelbtas 2008 m. Birželio mėn. Ir buvo atnaujintas 2018 m. Balandžio mėn., Remiantis nauju turiniu.
