Como criar navegação com guias com CSS e sem imagens

A navegação em páginas da Web é uma forma de lista e a navegação por guias é como uma lista horizontal. É bastante fácil criar navegação com guias horizontais com CSS, mas o CSS 3 nos fornece mais algumas ferramentas para torná-las ainda mais agradáveis.

Este tutorial irá levá-lo através do HTML e CSS necessários para criar um menu com guias CSS. Clique no link para ver como ficará.

Este menu com guias usasem imagens, apenas HTML e CSS 2 e CSS 3. Ele pode ser facilmente editado para adicionar mais guias ou alterar o texto nelas.

Suporte de Navegador

Este menu de guias funcionarátodos os principais navegadores. O Internet Explorer não mostrará os cantos arredondados, mas, por outro lado, exibirá guias como Firefox, Safari, Opera e Chrome.

Escreva sua lista de menus

Todos os menus e guias de navegação são realmente apenas uma lista não ordenada. Então, a primeira coisa que você quer fazer é escrever uma lista desordenada de links para onde você quer que sua navegação por abas vá.

Este tutorial está assumindo que você está escrevendo seu HTML em um editor de texto e que sabe onde colocar o HTML do seu menu em sua página da web.

Escreva sua lista não ordenada assim:

• class = "tablist">
  • CSS 3
  • id = "current"> Guias
  • Para
  • Menus
  Você notará que o código chama duas coisas: class = "tablist" e id = "atual". O primeiro é requeridos. Se você não colocar o tablinha classe na sua lista não ordenada, as guias não funcionarão. O segundo é opcional. Coloque o id = "current" na guia que você gostaria de destacar nessa página. Geralmente usamos isso para destacar a página em que estamos, mas você pode usá-la para destacar a guia mais importante. Ou você pode removê-lo completamente.

Comece a editar sua folha de estilos

Você pode usar uma folha de estilos externa ou uma folha de estilos interna. A página de menu de amostra usa uma folha de estilo interna no do documento.

Primeiro vamos modelar o próprio UL

É aqui que usamos a classetablinha no HTML. Em vez de estilizar a tag UL, que estilizaria todas as listas não ordenadas em sua página, você deve estilizar apenas a classe UL.tablinha Então, a primeira entrada no seu CSS deve ser:

.tablist {}

Nós gostamos de colocar a chave de fim (}) antes do tempo, para que não a esqueçamos mais tarde.

Enquanto estamos usando uma tag de lista não ordenada para a lista do menu de abas, mas não queremos que quaisquer marcadores ou números se insinuem. Portanto, o primeiro estilo que você deve adicionar é.estilo de lista: nenhum; Isso informa ao navegador que, embora seja uma lista, é uma lista sem estilos pré-determinados (como marcadores ou números).

Em seguida, você pode definir a altura da sua lista para corresponder ao espaço que deseja preencher. Escolhemos o 2em para a nossa altura, pois esse é o dobro do tamanho de fonte padrão e dá cerca de metade de um acima e abaixo do texto da guia. Detalhesaltura: 2em; Mas você pode definir sua largura para o tamanho que quiser. As tags UL ocuparão automaticamente 100% da largura, portanto, a menos que você queira que ela seja menor que o container atual, você pode deixar a largura para fora.

Finalmente, se a folha de estilo principal não tiver predefinições para as marcas UL e OL, você deverá colocá-las. Isso significa que você deve desativar as bordas, as margens e o preenchimento em seu UL. preenchimento: 0; margem: 0; fronteira: nenhuma; Se você já tiver redefinido a marca UL, poderá alterar as margens, preenchimento ou borda para algo que se ajuste ao seu design.

Sua classe final .tablist deve ser assim:

.tablist {estilo de lista: nenhum; altura: 2em; preenchimento: 0; margem: 0; fronteira: nenhuma; }

Editando os itens da lista de LI

Depois de estilizar sua lista não ordenada, você precisa estilizar as tags LI dentro dela. Caso contrário, eles agirão como uma lista padrão e passarão para a próxima linha sem colocar suas guias corretamente.

Primeiro, configure sua propriedade de estilo:

.tablist li {}

Então você quer flutuar suas abas para que elas se alinhem no plano horizontal. float: esquerda;

E não se esqueça de adicionar alguma margem entre as guias, para que elas não se mesclem. margem-direita: 0.13em;

Seus estilos de li devem ficar assim:

.tablist li {float: esquerda; margem-direita: 0.13em; }

Tornando as abas parecidas com as guias com CSS 3

Para fazer a maior parte do trabalho pesado nesta folha de estilo, estamos direcionando os links dentro da lista não ordenada. Os navegadores reconhecem que os links fazem mais em uma página da Web do que em outras, por isso, é mais fácil fazer com que os navegadores mais antigos obedeçam a itens como estados de foco, se você os anexar à tag de âncora (links). Então, primeiro escreva suas propriedades de estilo:

.tablist li a {} .tablist li a: hover {}

Como essas guias devem agir como guias em um aplicativo, você quer que toda a área da guia seja clicável, não apenas o texto vinculado. Para fazer isso, você precisa converter a tag A do estado "inline" normal em um elemento de bloco. display: bloco; (Se você estiver interessado em saber mais sobre a diferença, leia Elementos em nível de bloco versus Elementos em linha.)

Então, uma maneira fácil de forçar suas guias a serem simétricas umas com as outras, mas ainda flexionar para ajustar a largura do texto, é fazer o preenchimento direito e esquerdo iguais. Usamos a propriedade shorthand de preenchimento para definir a parte superior e inferior como 0 e a direita e a esquerda como 1em. preenchimento: 0 1em;

Também escolhemos remover os sublinhados do link, para que as guias pareçam menos com links.Mas se o seu público pode ficar confuso com isso, deixe de fora esta linha. link-decoration: nenhum;

Ao colocar uma borda fina em torno das guias, elas se parecem com guias. Usamos a propriedade de taquigrafia de fronteira para colocar a borda em torno dos quatro lados borda: 0.06em sólido # 000; Em seguida, usou a propriedade border-bottom para removê-lo da parte inferior. limite de fundo: 0;

Em seguida, fizemos alguns ajustes na fonte, cor e cor de fundo das guias. Defina estes para os estilos que correspondem ao seu site. fonte: negrito 0.88em / 2em arial, genebra, helvetica, sans-serif; cor: # 000; background-color: #ccc;

Todos os estilos acima devem ir no seletor.tablist li a, a regra para que eles afetem as tags de âncora em geral. Então, para fazer as abas parecerem mais clicáveis, você deve adicionar algumas regras de estado.tablist li a: hover.

Gostamos de alterar a cor do texto e do plano de fundo para tornar a guia pop quando você passa o mouse sobre ela. fundo: # 3cf; cor: #fff;

E incluímos outro lembrete para os navegadores que queremos que o link permaneça não sublinhado. text-decoration: nenhum; Outro método comum é ativar o sublinhado quando você passa o mouse sobre a guia. Se você quiser fazer isso, mude para text-decoration: sublinhado;

Mas onde está o CSS 3?

Se você está prestando atenção, você provavelmente notou que não houve nenhum estilo CSS 3 usado na folha de estilo. Isso tem a vantagem de trabalhar em qualquer navegador moderno, incluindo o Internet Explorer. Mas isso não faz com que as guias pareçam mais do que caixas quadradas. Ao adicionar um raio de borda de chamada ao estilo CSS 3 (e as chamadas específicas do navegador associadas), você pode arredondar as bordas para parecer mais com guias em uma pasta de papel pardo.

Os estilos que você deve adicionar ao .tablist li a regra são: -webkit-border-top-right-radius: 0,50em; -webkit-border-top-left-radius: 0,50em; -moz-border-radius-topright: 0,50em; -moz-border-radius-topleft: 0,50em; border-top-right-radius: 0,50em; border-top-left-radius: 0.50em;

Estas são as regras finais de estilo que escrevemos:

.tablist li a {display: bloco; preenchimento: 0 1em; text-decoration: nenhum; borda: 0.06em sólido # 000; limite de fundo: 0; fonte: negrito 0.88em / 2em arial, genebra, helvetica, sans-serif; cor: # 000; background-color: #ccc; / * CSS 3 elementos * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0,50em; -moz-border-radius-topright: 0,50em; -moz-border-radius-topleft: 0,50em; border-top-right-radius: 0,50em; border-top-left-radius: 0.50em; } .tablist li a: hover {background: # 3cf; cor: #fff; text-decoration: nenhum; }

Com esses estilos, você tem um menu com guias que funciona em todos os principais navegadores e se parece com boas guias impressas em navegadores compatíveis com CSS 3. A próxima página dá-lhe mais uma opção que você pode usar para vestir ainda mais.

Realce a guia atual

No HTML que criamos, o UL tinha um elemento de lista com um ID. Isso permite que você dê a um LI um estilo diferente do resto. A situação mais comum é fazer com que a aba atual se destaque de alguma forma. Outra maneira de pensar nisso é que você deseja desabilitar as guias que não estão ativas. Você então muda onde o id está nas diferentes páginas.

Nós estilizamos tanto a tag #current A quanto a #current A: hover sta para que ambas sejam ligeiramente diferentes. Você pode alterar a cor, a cor do plano de fundo, até mesmo a altura, a largura e o preenchimento desse elemento. Faça as alterações necessárias em seu design.

.tablist li # current a {cor de fundo: # 777; cor: #fff; } .tablist li # current a: hover {segundo plano: # 39C; }

E pronto! Você acabou de criar um menu com guias para o seu site.