50 + Scripts de Navegação Baseados em Tabs do Nice Clean CSS
Uma das tarefas mais importantes de um designer de experiência do usuário é certificar-se de que navegação do site é simples e de fácil utilização. E que outra maneira de tornar isso possível do que através de guias de navegação.
Guias de navegação bem projetadas não apenas ajudam os usuários a saber para onde ir, eles também são importantes para direcionar o tráfego para as páginas internas do seu site ou blog.
Então, para meus amigos de web designer, aqui está uma longa lista de scripts de navegação baseados em guias CSS. Cada opção tem um demonstração ao vivo junto com sua fonte de download. Então vá em frente e dê uma olhada por si mesmo.
bootstrap-tabs-x - Um plug-in de guias estendidas criado na parte superior das guias do Bootstrap. Pode Alinhar guias, girar títulos, carregar conteúdo via AJAX, e numerosos mais recursos. [Demo]
Guias CSS Pure com Indicador - Uma biblioteca de guias moderna, porém direta, construída sem JavaScript. Isso significa que é rápido e lindo também - tão bonito quanto você vê nos sites mais populares. [Demo]
Malhado - O Tabby permite criar guias simples, que podem exibir qualquer conteúdo, incluindo vídeos. Oferece vários opções avançadas e suporta NPM e Bower também. [Demo]
Navegação com guias responsivas - Uma navegação por abas moderna e prática, apoiada por JS e CSS, que é construída com mobile-first em mente e suporta estilos de posicionamento horizontal e vertical. [Demo]
Toggler - O Toggler é um plugin JavaScript puro para criar elementos capazes de alternar, incluindo acordeões e abas. Além disso, você pode mostrar / ocultar apenas qualquer item na página. [Demo]
Guias CSS Pure - UMA snippet de guias simples criado usando CSS e JS. Embora o código de exemplo mostre as guias simples, você pode embelezar as guias alterando seu estilo usando CSS. [Demo]
CSS de tabsy - Uma biblioteca somente de CSS para criar componentes de alternância simples, como guias. Esta biblioteca, ao contrário de algumas das anteriores, não precisa de dependências - nem mesmo de qualquer código JS. [Demo]
Tabbis.js - Tabbis é um plugin simples, mas avançado. Usando suas opções avançadas de configuração, você pode criar guias aninhadas e definir retornos de chamada também. [Demo]
Guias Responsive Pure CSS [Demo]
Guias CSS [Demo]
Guias usando o Pitaya - Guias usando o Pitaya ajudam você a criar abas de transição animadas facilmente. No entanto, você deve incluir o Pitaya, que é uma biblioteca em si e aumenta o tempo de carregamento. [Demo]
jTabs - jTabs é uma biblioteca de abas construída usando JavaScript puro. Isso significa que é construído com sem dependências externas como jQuery e suporta algumas opções de configuração também. [Demo]
Guias Flexiveis Responsivas [Demo]
Abas Acordeão [Demo]
tabs.js - O tabs.js é uma biblioteca de guias JavaScript inspirada no Accordion / Tabs of Bourbon Refills. É responsivo tal que guias mudam para acordeões em telas pequenas. [Demo]
WellTabber - O WellTabber é outro plugin JavaScript simples como o Tabby. Como o último, suporta várias opções para configurar as guias. Além disso, você pode mostrar as setas de navegação. [Demo]
Interface Tabulada Cubo 3D [Demo]
Módulo de guias para ES6 [Demo]
Alturas Variáveis com Guias CSS [Demo]
Guias de Design de Materiais - Um design de material inspirou o snippet de guias construído usando o JavaScript da Vanilla. Isto é simples de usar e personalizável também. No entanto, não possui opções avançadas. [Demo]
Guias CSS animadas - O Animated CSS Tabs é um sistema de guias somente CSS que permite criar guias simples e leves. Ao contrário de Tabby ou WellTabber, não oferece nenhuma configuração avançada. [Demo]
pureTabs [Demo]
Guias Acessíveis JavaScript Baunilha [Demo]
Guias animadas no estilo Scifi [Demo]
CSS adaptativo Bootstrap puro - Um sistema de abas inspirado no Bootstrap construído usando apenas CSS e sem JavaScript. Qual recurso exclusivo que ele traz é as abas super equipadas na tela são movidas para uma lista suspensa. [Demo]
Barra de guias dobráveis - Um widget de guias baseado em CSS3 puro e sem JavaScript, como vários plug-ins nessa lista. O que o torna interessante é que suas guias têm um transição dobrável de boa aparência. [Demo]
Fichas animadas de CSS [Demo]
Tablete JavaScript - Um plug-in de guia avançado construído apenas com JavaScript. Permite definir uma guia padrão, alterar a guia dinamicamente e adicionar funções de retorno de chamada de evento onLoad e onClick. [Demo]
Abas Esqueleto [Demo]
Tabtastic - Tabtastic é um plugin fácil de implementar guias usando CSS e JS. isto usa marcação semântica, é acessível para leitores de tela, e suporta guias aninhadas em uma página. [Demo]
CSS3 e guias da pasta jQuery - Este tutorial fácil (com código para download) compartilha sobre criando guias de pasta usando CSS3 e jQuery. Isso me lembra de guias mostradas em navegadores como o Google Chrome. [Demo]
Conteúdo com guias [Demo]
Guias de navegação com largura igual - Um trecho de código, mostrando o uso de CSS simples para criar guias de navegação de largura igual. Você pode personalizar a aparência, mas não oferece opções avançadas prontas para uso. [Demo]
Conteúdo com guias com jQuery e CSS [Demo]
Assistente de boot do Twitter - Twitter Bootstrap Wizard é um plugin para construir assistentes de uma estrutura tabular. Eu notei que você poderia criar apenas abas, escondendo ou removendo os botões seguinte e anterior. [Demo]
Guias CSS Pure [Demo]
Guias CSS Responsivas [Demo]
Apenas mais um CSS Tabs - Uma estrutura de guias lindamente criada com apenas CSS, que funciona em navegadores modernos. No entanto, ao contrário de alguns plugins poderosos acima, ele não possui opções avançadas. [Demo]
Acordeão responsivo a abas - Acordeão responsivo a guias, como o nome sugere, funciona como acordeão ou guias com base na largura da tela. isto mostra abas, se possível, mais acordeão se o tamanho é pequeno. [Demo]
CardTabs - CardTabs é um Plug-in de guias ultra-leves com base no jQuery, que vem com vários temas. Você também pode criar novos temas e definir a guia ativa dinamicamente. [Demo]
Aria Tabs [Demo]
Minimal & Sexy Tabs - Um novo snippet de guias bonito disponível em dois esquemas de cores - claro e escuro. Ele é construído usando jQuery, então não é tão leve quanto alguns outros plugins listados acima. [Demo]
Widget com guias [Demo]
Abas Adaptáveis - O Adaptive Tabs é um snippet de guias simples e bonito. Além do design moderno, ele não tem mais recursos como o disponível em alguns plugins avançados fornecidos acima. [Demo]
Guia Estilo da Árvore [Demo]
Tabulous.js [Demo]
Guias do jQuery - jQuery Tabs é um plugin simples para criar abas. Como o próprio nome sugere, é construído usando jQuery, ao contrário de alguns plugins listados acima que são construídos com CSS puro ou JavaScript. [Demo]
jQuery rTabs [Demo]
Nota do editor: Este post foi originalmente publicado em junho de 2008 e foi atualizado em abril de 2018 com base em novos conteúdos.
