Sobre um código

Guia Navegação

Guias de navegação para dois formulários.

Responsivo: não

Dependências: bootstrap.css

Sobre um código

Guia CSS

Navegadores compatíveis: Chrome, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias

O seletor + seleciona o próximo elemento adjacente. Historicamente, isso tem sido legal para etiquetas de estilo. Com a grade CSS, um elemento pode estar próximo a outro na marcação, mas em algum lugar totalmente diferente na exibição. Esta caneta usa um seletor input:checked simples combinado com muitos + "s para estilizar diferentes páginas de um microsite imaginário.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias CSS puro

Versão de rádio das guias. Requisitos: não depender de IDs específicos para CSS (o CSS não deve precisar saber IDs específicos), flexível para qualquer número de guias desconhecidas, acessíveis: como essas são caixas de seleção, as guias não podem ser tabuladas, é necessário usar as teclas de seta. .

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias CSS

Guias verticais CSS puro.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: não

Dependências: -

Sobre um código

Guias CSS puro com indicador

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias de transição animadas

Guias de transição animadas com caixas de seleção.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias de cores CSS puras

Sem etiqueta, guias de cores CSS puras.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias somente CSS

Guias somente CSS do Material Design.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias CSS3

Guias CSS3 puras responsivas da Sorax.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Controles de guias usando HTML e CSS

Clicar nos rótulos é efetivamente o mesmo que clicar nas caixas de entrada. As entradas de rádio estão ocultas com CSS. Quando uma rádio é selecionada, seus curiosos vizinhos de conteúdo da aba aparecem. É isso aí! A única desvantagem é que você não conseguirá estilizar a guia selecionada sem recorrer a algum JS, mas isso não deve ser um grande problema.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Responsivo: sim

Dependências: -

Sobre um código

Guias CSS puro

Apenas HTML e CSS.

Navegadores compatíveis: Chrome, Edge, Firefox, Opera, Safari

Olá, queridos leitores. Neste dia gelado faremos com você lindas abas com usando CSS e JQuery. Acontece que essas chamadas guias são muito úteis para o site como um todo, pois podem economizar significativamente espaço na página. Eles podem ser colocados em qualquer lugar, na barra lateral, ou diretamente no próprio conteúdo, o artigo.

Além disso, as abas que faremos terão um belo design e irão decorar significativamente o seu site. Que :-) lindo e útil, me parece uma rara coincidência. Além disso, são feitos apenas com a ajuda de , respectivamente: carregam rapidamente e não suportam nenhuma carga no servidor.

JQuery

$(document).ready(function() ( $("#content div").hide(); // Conteúdo oculto $("#tabs li:first").attr("id","current"); // Qual aba mostrar primeiro $("#content div:first").fadeIn(); // Mostrar o conteúdo da primeira aba $("#tabs a").click(function(e) ( e.preventDefault(); ; $ ("#content div").hide(); //Ocultar todo o conteúdo $("#tabs li").attr("id",""); .attr ("id","current"); // Ativa os identificadores $("#" + $(this).attr("title")).fadeIn(); () ;

Isso é basicamente tudo, o principal é experimentar. Você pode adicionar imagens de fundo a essas guias, o que melhorará significativamente sua aparência, mas demorará mais para carregar.

Compatibilidade do navegador

Essas guias são suportadas por quase todos os navegadores, apenas em alguns elas parecerão um pouco diferentes, porque muitos ainda não suportam CSS3.

Só isso, espero que tenham gostado :-) Se algo não estiver claro para você, pergunte nos comentários. Vejo você em breve.

Guias na minha opinião são um dos melhores soluções para estruturação temática da informação, bem como para disponibilização compacta de conteúdo ao usuário em uma página. Hoje vamos descobrir como criar algo tão funcional sem usar Javascript usando apenas HTML e CSS3.

Para criar guias usaremos etiqueta entrada e seletor CSS :verificado. Primeiro de tudo, precisamos criar a marcação da página em HTML

Guia Um Guia dois Guia Três

Clicar nas caixas de rádio ativará as guias correspondentes. Primeiro entrada definir o atributo verificado = "verificado", isso abrirá a primeira guia por padrão. Esconderemos as próprias caixas de rádio, e para clicar nelas usaremos a tag rótulo. No bloco .tabs_cont Teremos blocos com abas onde será colocado o conteúdo (texto, imagens, etc.). Até agora tudo é simples.

Vamos passar para os estilos CSS

Guias (posição: relativa; margem: 0 automático; largura: 800px; ) rótulo .tabs (cor: #555; cursor: ponteiro; display: bloco; float: esquerda; largura: 150px; altura: 45px; altura da linha: 45px ; posição: topo relativo: 2px; alinhamento de texto: centro) .tabs input ( posição: absoluta; esquerda: -9999px; ) #tab_1:verificado ~ #tab_l1, #tab_2:verificado ~ #tab_l2, #tab_3:verificado ~ # tab_l3 ( plano de fundo: #fff; cor da borda: #fff; topo: 0; índice z: 3; ) .tabs_cont ( plano de fundo: #fff; posição: relativo; índice z: 2; altura: 230px; )

Aqui usamos estilos para criar uma tag rótulo elemento de bloco e definir suas dimensões, localização e aparência(você pode definir seus próprios estilos para o plano de fundo e bordas) conforme necessário, e também ocultar entrada está usando posicionamento absoluto.

Em seguida vem o mesmo seletor :verificado que mencionamos no início. Em palavras simples, se a caixa de rádio estiver com eu ia #tab_1 selecionado/marcado, os estilos serão aplicados ao bloco com eu ia #tab_l1 e assim por diante, por analogia. No nosso caso, aplicamos estilos ao título da guia selecionada. Bem, no final definimos estilos para o bloco com o conteúdo da aba.

Nossa próxima tarefa é garantir que nossas guias possam ser trocadas. Para implementar esta tarefa, os seguintes estilos:

Tabs_cont> div (posição: absoluto; esquerda: -9999px; topo: 0; opacidade: 0; -moz-transition: opacidade .5s facilidade de entrada; -webkit-transition: opacidade .5s facilidade de entrada; transição : opacidade .5s facilidade de entrada) #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3 (posição: estática; esquerda: 0; opacidade : 1;

Primeiro, vamos ocultar todas as nossas guias. A solução mais simples é usar exibição: nenhum;, mas como precisamos de suavidade, caminhos fáceis não são para nós, então com a ajuda posição: absoluta; movemos nossos blocos além dos limites de visibilidade e também tornamos esse bloco completamente transparente usando a propriedade opacidade: 0; e gradualmente aumente esse valor para um. A propriedade nos ajudará a alcançar suavidade transição que é descrito a seguir. Então novamente usamos o seletor :verificado com a qual tornamos visíveis os blocos correspondentes às caixas de rádio selecionadas.

Isso é tudo! Ao trabalhar você mesmo com os estilos, você pode alterar a aparência de acordo com seu gosto.

Abaixo você pode baixar as fontes.

Há pouco tempo, analisamos a implementação de abas com conteúdo, sem conectar javascript, usando exclusivamente .
Hoje quero apresentar a vocês outra solução não menos interessante para formar bloco compacto guias construídas em CSS3 puro e usando elementos de layout adaptáveis. Assim como na primeira opção, nada supérfluo e complicado, o mínimo de código CSS, e você terá à sua disposição um bloco adaptativo com abas selecionáveis ​​​​que se encaixarão perfeitamente em qualquer seção da página, seja uma mensagem separada, um lado coluna ou uma janela modal.

Que mudanças foram feitas em relação à primeira versão?
Em primeiro lugar, o bloco de guias tornou-se adaptativo, ou seja, ao visualizar em dispositivos móveis, o tamanho das abas muda dependendo do tamanho das telas dos dispositivos do usuário, o texto dos títulos é removido e apenas os ícones de fonte permanecem, indicando o significado do conteúdo de um ou de outro.
Os ícones de fontes são do , o acervo é muito rico e, além disso, totalmente gratuito. Você pode integrar ícones em qualquer projeto usando um conjunto de fontes baixado ou conectá-los ao seu arquivo de estilo CSS diretamente do site do desenvolvedor via @import usando a seguinte linha:

@importar url( "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css") ;

@importar url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

No exemplo de demonstração, foi exatamente isso que eu fiz, então, olhando o código-fonte, você pode descobrir facilmente o que é o quê.
A estrutura das abas em HTML é bastante simples. Contêiner div básico, link e diretamente seções

, em que determinado conteúdo fica oculto por enquanto. Todos! Nada extra, nenhuma biblioteca js, não arquivos adicionais as imagens no design, a aparência das abas, bem como sua funcionalidade são formadas exclusivamente em CSS. É claro que o uso dos novos padrões CSS3 não garante uma operação estável em todos os navegadores, sem exceção, mas nas versões modernas as guias funcionam perfeitamente. O IE exibe as guias corretamente a partir da versão 9. Então, se você se preocupa com a psique e os sentimentos de percepção dos usuários que usam teimosamente versões mais antigas deste “navegador”, este métodoÉ melhor não usar a criação de abas, mas sim jQuery.

HTML

< div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Guia 1" >Guia 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Guia 2" >Guia 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Guia 3" >Guia 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Guia 4" >Guia 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>Poste qualquer conteúdo aqui.... < section id= "content-tab4" > < p>Poste qualquer conteúdo aqui....

Guia 1 Guia 2 Guia 3 Guia 4

Para organizar os blocos de conteúdo usei a tag

do clipe HTML5, que é usado, na maioria dos casos, para dividir um documento em seções com significado e conteúdo diferentes, com a capacidade de usar seus próprios títulos de primeiro nível

.
A troca de abas ocorre através da interação do atributo verificado na tag e a pseudoclasse:checked , fortemente vinculada por meio de identificadores em CSS. É no processamento deste método que o velho e famoso freio ao progresso tropeça Internet Explorer 8, a partir da versão 9 tudo funciona da melhor forma.

Sem problemas chegamos à parte mais interessante, estilizar nossas abas usando a magia do CSS. Aqui as coisas são ainda mais simples, não adianta descrever especificamente cada propriedade e parâmetros, escrevi algumas explicações no código fonte, então acho que não será difícil descobrir o que vai onde e por que, mas se você tiver dúvidas ou encontrar um erro, escreva nos comentários, com certeza responderei e ajudarei.

CSS3

/* Contêiner de abas básico */. guias (largura mínima: 320px; largura máxima: 800px; preenchimento: 0px; margem: 0 automático;) /* Estiliza as seções de conteúdo */. abas> seção ( display: nenhum; preenchimento: 15px; fundo: #fff; borda: 1px sólido #ddd; ) . guias> seção> p (margem: 0 0 5px; altura da linha: 1,5; cor: #383838; /* adiciona animação */- webkit- animação- duração: 1s; animação – duração: 1s;- webkit-animação-preenchimento-modo: ambos; modo de preenchimento de animação: ambos;- webkit- animação- nome: fadeIn; nome da animação: fadeIn;) /* Descreva a animação da propriedade opacity */@- webkit- keyframes fadeIn (de (opacidade: 0 ; ) para (opacidade: 1 ; ) ) @ quadros-chave fadeIn (de (opacidade: 0 ; ) para (opacidade: 1 ; ) ) /* Ocultar caixas de seleção */. guias> entrada (exibição: nenhum; posição: absoluta;) /* Estilos de troca de abas */. tabs> label ( display: inline- block; margin: 0 0 - 1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #aaa; border: 0px solid #ddd; border-width: 1px 1px 1px 1px fundo: #f1f1f1; raio da borda: 3px 3px 0 0 ; /* Ícones de fonte do Font Awesome em formato Unicode */. guias> rótulo: antes ( font- family: fontawesome; font-weight: normal; margin- right: 10px; ) . guias> rótulo[ for *= "1" ]: antes (conteúdo: " \f 19a"; } ;). guias> rótulo[ for *= "2" ]: antes (conteúdo: " \f 17a"; ). guias> rótulo[ for *= "3" ]: antes (conteúdo: " \f 13b"; /* Remove texto dos switches * e deixa ícones em telas pequenas */@media screen e (largura máxima: 680px) ( . tabs> label ( font-size: 0 ; ) . tabs> label: before ( margin: 0 ; font-size: 18px; ) ) /* Altera o preenchimento * dos switches para telas pequenas */@media screen e (largura máxima: 400px) ( . tabs> label ( padding: 15px; ) )

/* Contêiner de guias básico */ .tabs ( min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; ) /* Estilos de seção de conteúdo */ .tabs>section ( display: none; padding : 15px; fundo: #fff; borda: 1px sólido #ddd; ) .tabs>section>p (margem: 0 0 5px; altura da linha: 1,5; cor: #383838; /* anexa a animação */ -webkit-animation -duração: 1s; duração da animação: 1s; -webkit-animation-fill-mode: ambos; -webkit-animation-name: propriedades de opacidade */ @-webkit-keyframes fadeIn (de (opacity: 0; ) para ( opacity: 1; ) ) @keyframes fadeIn ( from ( opacity: 0; ) to ( opacity: 1; ) ) /* Ocultando as caixas de seleção * / .tabs>input ( display: none; position: absoluto; ) /* Estilos de opções de guia */ .tabs>label ( display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; border: 0px solid #ddd; border-width : 1px 1px 1px;

Você pode desenhar as abas() da maneira que quiser, tudo no exemplo é apenas um exemplo, minha visão momentânea do produto, nada mais. Você pode descobrir os valores Unicode dos ícones de fonte necessários no site do desenvolvedor, para isso, basta clicar no ícone selecionado e copiar o código digital emitido, algo assim: \f13b .
Observe que ao reduzir o tamanho da janela do navegador, as abas se ajustam automaticamente ao tamanho atual até um determinado valor (no exemplo 680px), após este valor os títulos de texto das abas desaparecem, deixando os ícones. Isso garante a máxima compactação de todo o bloco de abas; resta apenas escolher os ícones corretos que correspondam ao significado do conteúdo apresentado dentro das abas.

Assista a um exemplo ao vivo de como as guias funcionam, baixe os fontes, experimente os parâmetros e crie, crie, crie...

Se você está cansado de trabalhar com modelos em inglês e sonha em usar modelos em russo, com certeza ficará feliz com ótimas notícias. Os mesmos apareceram no mercado TemplateMonster soluções prontas, que você precisa. Sim, sim, no site agora você encontra os melhores. Modelos localizados são exatamente o que você precisa se quiser construir seu projeto online em um período mínimo de tempo. Além dos textos dos templates terem sido escritos manualmente, eles contam com todas as ferramentas necessárias para a criação de um site profissional.

Atenciosamente, Andrey

Na continuação do post anterior sobre elementos de seleção de estilo, gostaria de dizer como fazer isso completamente guias adaptáveis ​​sem usando javascript , posicionamento absoluto e hacks de links.

Para começar, gostaria de dizer que não estou defendendo o abandono do javascript em favor do CSS, apenas abaixo será apresentada apenas uma das formas de implementação de abas. Existem muitas situações em que essa abordagem não combina com você e em que você não pode viver sem JS, mas não é isso agora.

Vamos entender o que queremos ver como resultado do trabalho e quais requisitos apresentamos para isso:

1. Trabalhe sem JavaScript,
2. Não há conexão com o número de abas (podemos usar um widget por páginas diferentes com conteúdo diferente dentro),
3. Adaptabilidade,
4. Compatibilidade máxima entre navegadores e plataformas,
5. A IU mais conveniente e compreensível,
6. Não há restrições quanto ao conteúdo interno das abas, seja texto, conteúdo de mídia ou layout dentro da aba.

Visualmente deve ser algo assim:

Antes de mostrar sua opção abas sem JS, gostaria de falar sobre algumas opções de implementação que encontrei no processo de resolução deste problema.

Opção um

A pessoa que criou esse método claramente queria zombar dos usuários ou é um dos visitantes do Reddit que criou aqueles controles de volume muito “convenientes”. Essa abordagem me deixa nervoso.

A essência do método é a seguinte:

Os links são usados ​​como cabeçalhos (os próprios botões) das abas, no atributo href, que contém o id da aba correspondente - uma div ou qualquer outro elemento. A guia ativa é selecionada usando a pseudo-class:target .

Funciona assim:

Como você deve ter notado, temos alguns problemas ao usar este método:

1. Quando clicamos na aba, a página começa a pular, pois o navegador nos direciona para onde esse link leva. Claro que isso pode ser evitado, mas sem JS não tem como.
2. O título da guia ativa não está destacado; isso pode ser feito, mas é extremamente problemático.
3. Inicialmente não há abas ativas (já que ainda não clicamos nos links) e temos que recorrer a um hack e tornar a terceira aba ativa selecionando a primeira desta forma não funcionará;
4. Adaptabilidade muito controversa: sim, as abas são reorganizadas para nova linha quando a tela se estreita e o conteúdo da guia se estreita junto com ela, mas não parece muito bom. Esse problema pode ser resolvido por media queries, mas como não ficaremos presos ao número de abas, o problema permanecerá em alguns tamanhos de display.

Tiramos uma conclusão justificada: este método não é adequado para nós, pois não irá satisfazer a maioria dos requisitos. A implementação é terrível e eu não recomendaria usá-la.

Opção dois

Este método criando guias sem JavaScript já é mais prático, embora também apresente alguns problemas de aplicação. A essência do método é a seguinte: os elementos checkbox e label são usados ​​​​para títulos de guias e, usando a pseudoclasse:checked e outro elemento div, podemos mostrar o conteúdo apenas da guia ativa e ocultar todas as outras:

Entrada do wrapper de guia: verificado + rótulo + .tab-item (display: bloco;)

Entrada do wrapper da guia: verificado + rótulo + . tab-item (exibição: bloco;)

Veja como funciona:

Como você deve ter notado, neste exemplo estamos usando position: absoluto; para colocar os títulos das guias na parte superior e o conteúdo das guias na parte inferior. Isso cria certos problemas:

1. Completamente inadaptável. Ao alterar o tamanho da tela, as guias caem e o conteúdo das guias as cobre. Isso pode ser consertado: faça rolagem horizontal das abas, essa solução tem lugar, mas não gosto muito dela.
2. Como usamos posicionamento absoluto para exibir o conteúdo das abas, teremos que especificar uma altura fixa das abas, caso contrário elas irão se sobrepor ao conteúdo que está abaixo (visto no exemplo), o que significa que não podemos usar esta abordagem com um número anteriormente desconhecido de guias.

Claro que em alguns casos este método pode ser usado, por exemplo, quando você sabe antecipadamente a quantidade de abas e a quantidade de conteúdo dentro delas. Mas procuramos uma solução universal, pelo que esta abordagem não é aplicável no nosso caso.

Solução

A terceira opção, que também é a solução, é uma modificação do segundo método. Funciona exatamente da mesma forma, mas não usaremos posicionamento absoluto ou propriedade float para os títulos.

EM este método Usamos o flexbox agora na moda para colocar guias e seu conteúdo. A beleza do flexbox aqui é que podemos designar quais elementos são exibidos primeiro e quais no final. Isso pode ser feito usando a propriedade order: 1; , cujo padrão é zero.

A adaptabilidade das abas também é alcançada através da propriedade flex flex-grow: 1; , que permite que as guias se estendam por toda a largura do conteúdo, para que não precisemos nos preocupar em exibir um número diferente de guias. Também podemos colocar conteúdo de qualquer tamanho diferente dentro de cada guia, isso não afetará a exibição do conteúdo depois delas.

Essa abordagem funciona em todos os navegadores modernos, inclusive os móveis. Das propriedades incomuns para muitos, apenas o Flexbox é usado e há muito tempo é amplamente suportado. EM Navegadores FireFox, Chrome, Safari e Opera, não encontrei problemas com o funcionamento das abas.

Você pode verificar essa abordagem no jsfiddle ou em seus próprios projetos. Eu ficaria feliz em ver outras propostas de soluções para este problema nos comentários.