Codificando um Menu de Navegação Breadcrumb Gracioso em CSS3
Os menus e links de navegação são possivelmente os elementos de interface mais importantes para um layout da web. Estas são as únicas saídas para os usuários viajar entre as páginas e interaja com todo o conteúdo que você criou. Breadcrumb oferece funcionalidade semelhante com o benefício adicional de rastreando sua posição atual. Você será capaz de exibir todos os caminhos de links anteriores à medida que o usuário atravessa a hierarquia do seu site.
Neste tutorial, criaremos um menu de navegação brilhante com alguns efeitos CSS3. Isso foi testado para funcionar em todos os principais navegadores compatíveis com CSS3, até mesmo navegadores mais antigos que não suportam CSS3 ainda irão processá-lo corretamente na maioria dos casos.
Antes de mergulharmos no código, falaremos um pouco sobre a funcionalidade de nosso breadcrumb, tutorial completo em um salto!
Oferecendo a trilha
Uma trilha de migalhas de pão não é mais complexa do que qualquer outro menu. Nossos estilos utilizarão propriedades CSS muito mais complexas do que a maioria dos exemplos, mas nosso modelo básico ainda está em vigor para guiar os usuários de uma página para outra.
Neste exemplo, recriaremos um estilo semelhante ao menu de suporte do Google. Você pode visualizar o menu deles na página de suporte do Gmail para ter uma ideia de para onde estamos indo. Em última análise, queremos fornecer nossa melhor experiência de usuário para todos os usuários, independentemente do seu sistema operacional ou software de navegador, assim eu construí 2 exemplos de código diferentes para suportar degradação graciosa entre navegadores mais antigos.
O primeiro é construído usando imagens de fundo personalizadas e alinhamentos adequados de CSS. Todos os eventos instantâneos e eventos ativos são pré-criados com apenas alguns estilos CSS, mas os usuários que tiverem imagens desativadas não poderão experimentar esses efeitos! É por isso que também construí um menu semelhante com gradientes CSS, cantos arredondados e sombras de caixa.
Se você está nervoso em apoiar os dois estilos, pode escolher entre eles para o seu próprio site. A maioria dos visitantes usará imagens por padrão, mas procure na ferramenta de análise do website se você quiser dados de visitantes mais precisos.
Bastantes palavras, vamos pular no projeto! Começaremos construindo a estrutura HTML básica e passaremos para diferentes efeitos de estilo. Em primeiro lugar você precisa baixar a imagem necessário para o projeto.
HTML de ossos nus
Estou começando meu documento com o modelo de página HTML5 padrão. Isso inclui o tipo de documento padrão, o CSS vinculado e todos os elementos básicos. Eu adicionei o código abaixo se você deseja iniciar seu próprio documento dessa maneira. Observe que isso não deve afetar o modo como seu breadcrumb é exibido, portanto sinta-se à vontade para usar seu próprio modelo de página se desejar.
Página padrão
Vou dividir o código em dois blocos diferentes. O primeiro bloco com imagens é construído de uma maneira ligeiramente diferente, seguido pelo nosso menu sem imagens. Cada conjunto é dado o seu próprio identidade para que possamos identificar o conteúdo com muito mais facilidade. Se você também é fã do jQuery, pode usar o #ID selector manipular todos os elementos DOM internos.
Primeiro nós temos um contendo div com o id “breadcrumb“. No arquivo de demonstração, usei isso para separar nosso código e movê-lo pela página com algumas margens adicionais. Você pode remover essa div externa, mas terá que redefinir tudo para adequar-se ao novo modelo. Realmente não faz mal deixar um container, já que você poderá controlar o posicionamento muito mais fácil.
Internamente, construí os breadcrumbs usando uma lista não ordenada. Há tantas maneiras exclusivas de personalizar listas HTML estilizadas, e as migalhas de pão são apenas uma delas. Você pode notar que eu dei um item à lista inicial classe do “primeiro“. Isso é necessário para um preenchimento extra para manter os itens de menu em linha. Além disso, um pequeno bloco de extensão é adicionado por isso temos uma borda esquerda adequada que não se sobrepõe a imagem de fundo.
Além disso, cada link de âncora é plantado com um número decrescente para o z-index propriedade. Usando imagens, precisamos cada um dos nossos links se sobrepõe para exibir a seta de navegação corretamente. A maneira mais fácil de conseguir isso é ajustando z-index então cada link se sobrepõe ao seguinte. Eu comecei com 9 e funcionou de lá, mas se você tiver mais links em seu menu, comece com um inteiro maior.
Menu sem imagens
Para degradar graciosamente nossa migalha Precisamos de um conjunto secundário de itens de lista HTML. Se você estiver tentando fazer fallback em uma única navegação, poderá usar o jQuery para detectar o agente do navegador e aplicar um ID de acordo. Infelizmente isso nem sempre é confiável (para certos usuários móveis, por exemplo). Outra solução é incluir uma folha de estilo específica do IE e ocultar ou mostrar qualquer menu que funcione melhor - mas, claro, essa opção é apenas para o Internet Explorer.
breadcrumb2 é o nosso novo ID usado para segmentar o menu sem imagens. Mantendo esse padrão que usei migalhas2 como a classe para a lista não ordenada. Note que a razão pela qual estamos usando classes é pela sua simplicidade para duplicar esses menus, Então, quando você quiser alguns breadcrumbs diferentes em sua página, com essas classes isso nunca vai se tornar um problema.
Nós mantivemos o .primeiro classe, mas adicionalmente acrescentado .últimoclasse para o item da lista final. Sem imagens não podemos duplicar as setas para cada item do menu de navegação, por isso usei algumas cantos arredondados para apimentar o menu secundário. .primeiro classe e .último manipular o raio da borda nas bordas do nosso menu para criar um estilo muito legal para a web 2.0.
Imagens de fundo de deslizamento de CSS
Para alguns dos efeitos mais simples, juntei os breadcrumbs ao criar propriedades. Isso é útil, pois não só economiza espaço, mas ao voltar para editar estilos, mais fácil de personalizar seu próprio olhar.
Para ambos #breadcrumb e # breadcrumb2 Eu coloquei estilo de lista: nenhum; Assim, todos os itens internos não terão marcadores. Você poderia deixá-los se você gostar do efeito, mas eu acho que o HTML se torna cansativo para contornar e é muito mais fácil criar novos ícones. Então vamos começar com o nosso .migalhas classe.
.migalhas display: bloco; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: visitou color: # 666; display: bloco; flutuar: esquerda; tamanho da fonte: 12px; margin-left: -13px; preenchimento: 7px 17px 11px 25px; posição: relativa; text-decoration: nenhum; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); repetição de fundo: sem repetição; posição de fundo: 100% 0; posição: relativa; .crumbs li a: hover color: # 333; posição de fundo: 100% -48px; cursor: ponteiro; .crumbs li a: active color: # 333; posição de fundo: 100% -96px; .crumbs li.first a span altura: 29px; largura: 3px; borda esquerda: 1px sólido # d9d9d9; posição: absoluta; top: 0px; esquerda: 0px; Nós definir nossa lista não ordenada para quadra então nada mais se arrasta em torno da área. Observe os itens da lista são exibido em linha enquanto cada link de âncora é dado muito mais espaço para se espalhar. Queremos que todo o espaço do nosso menu seja clicável, o que requer construindo nossas âncoras como elementos de bloco.
Eu usei uma imagem chamada bg-crumbs.png para o fundo. Isso é conhecido como uma simples folha de sprite em CSS ou, alternativamente, portas de correr técnica. Isso significa que quando o usuário passa o mouse ou clica em um link, nós mudamos a posição do plano de fundo para exibir o estilo atualizado. Esta imagem única contém todos os 3 dos desenhos que precisamos para criar os fundos de migalhas de pão em diferentes posições, para que possamos usar o posição de fundo propriedade para realocar com base na interação do usuário.
Efeitos personalizados com CSS3
O design original do breadcrumb é muito mais simples de criar. Isso é perceptível, pois muitas das propriedades CSS são mais básicas do que você imagina, mas agora começamos a nos concentrar em duplicar esses efeitos apenas com CSS3.!
Os estilos individuais ocupam muito espaço, então vou dividi-los em 2 blocos de código.
.crumbs2 display: bloco; margin-left: 27px; preenchimento: 0; top de preenchimento: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: visitado color: # 666; display: bloco; flutuar: esquerda; tamanho da fonte: 12px; preenchimento: 7px 16px 7px 19px; posição: relativa; text-decoration: nenhum; borda: 1px sólido # d9d9d9; borda-direita-largura: 0 px; .crumbs2 li a background-image: -webkit-gradiente (linear, fundo esquerdo, topo esquerdo, cor-stop (0,45, rgb (241,241,241)), cor-stop (0,73, rgb (245,245,245))); imagem de fundo: -moz-gradiente linear (fundo do centro, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Para o Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Para o Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5 px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a borda-direita-largura: 1px; border-bottom-right-radius: 5 px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5 px;
o .migalhas2 menu está usando Gradientes de CSS para duplicar os efeitos de fundo. Se você não estiver familiarizado com estes, eu recomendo altamente o guia CSS Tricks 'em Gradientes CSS3, que deve levá-lo a usar gradientes CSS3 de forma eficiente. Eles incluíram mais algumas propriedades para os navegadores Microsoft e Opera, mas eles não são totalmente suportados em todos os casos. Eu não os incluí no código de demonstração aqui - mas é bom entender todas as opções.
-gradiente de webkit e -gradiente linear moz são as principais soluções que fazem a maior parte do trabalho. Eu incluí código herdado para versões mais antigas do Internet Explorer, mas não é garantido para exibir corretamente o tempo todo (estamos usando poderosas técnicas de renderização de imagem, afinal). Observe que eu defini códigos de cores RGB e hex entre as propriedades de plano de fundo. Você poderia ficar com um método ou outro, se você é mais confortável.
o raio de borda o código é aplicado apenas à nossa navegação secundária. Isso dá um ótimo efeito no canto superior esquerdo e no canto inferior direito de todo o nosso menu de breadcrumb. A barra parece quase estourar a página - um efeito realmente fantástico nos navegadores que suportam os estilos, mas eles só cobrem os estados padrão dos nossos links. Agora, vamos criar efeitos de foco semelhantes às imagens que usamos acima.
Bordas e Sombras CSS3
Sempre que um usuário passar por cima de um link, queremos atualizar algumas coisas. Primeiro precisamos escurecer as cores da borda na parte superior e inferior do nosso elemento ativo. Isso pode ser visto nas imagens, bem como nos estados ativo e flutuante.
.migalhas2 li a: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; imagem de fundo: gradiente -webkit (linear, fundo esquerdo, topo esquerdo, cor-stop (0,45, rgb (241,241,241)), cor-stop (0,73, rgb (248,248,248))); imagem de fundo: -moz-gradiente linear (fundo do centro, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Para o Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Para o Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; cor: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; imagem de fundo: gradiente de -bebida (linear, fundo esquerdo, topo esquerdo, cor-stop (0,45, rgb (224,224,224)), cor-stop (0,73, rgb (235,235,235))); imagem de fundo: -moz-gradiente linear (fundo do centro, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Para o Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Para o Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; cor: # 333;
Eu estou usando exatamente o mesmo código de gradiente que usamos acima, mas desta vez as cores são muito diferentes se você notou nossos valores RGB. Cada um dos estados escurecerá a cor do texto para # 333, ainda outros descritores foram alterados ligeiramente para corresponder aos comandos do usuário.
No foco você verá um efeito brilhante em relevo que juntamente com bordas escurecidas fornece os estilos de pop-up da página. Se você clicar e segurar você vai entrar no estado ativo que apresenta um gradiente de fundo escurecido. Este efeito faz com que os botões pareçam “pressionado” na página.
Nós também estamos aplicando Sombra da caixa propriedades das novas especificações CSS3. -webkit, -moz, e estilos padrão são usados com as mesmas configurações. Pairando exibe um sombra clara saindo da parte inferior do link selecionado. Quando ativa, a sombra será formada nas bordas superior, direita e inferior. Este efeito é criado com o inserir palavra-chave adicionada ao final de cada linha de propriedade box-shadow. Novamente CSS Tricks é seu melhor amigo aqui com um ótimo artigo sobre box-shadow, já que fala sobre a sintaxe e seu uso adequado em CSS3.
Bônus: mais estilos
Além do código do tutorial, incluí imagens de fundo extras com esquemas de cores adaptados. Eu tirei amostras dos fundos originais e usei o Adobe Photoshop para criar algumas variações que você pode aplicar em seu próprio site.
Estes arquivos de bônus estão incluídos no arquivo de origem que você pode baixar no formato de arquivo .zip na seção abaixo.
Você pode conferir a imagem acima para ter uma ideia do que estou falando. Se você precisa de um esquema de cores específico pop aberto Photoshop> Imagem> Ajustes> Matiz / Saturação para modificar o esquema de cores para corresponder ao seu modelo, lembre-se de verifique a opção Colorize no painel Matiz / Saturação se a cor não foi alterada.
Conclusão
Este tutorial deve familiarizar você com algumas das novas técnicas CSS3. Criamos dois menus fantásticos de estilo de pão de maneira semelhante e o construímos da maneira que ele pode degradar de maneira elegante em navegadores mais antigos. Além disso, eu ofereci meu código demo e algumas imagens de bônus para você brincar com.
Você gosta particularmente dos estilos que construímos aqui? Ou talvez você tenha dúvidas ou ideias sobre como melhorar o código do tutorial? Por favor, compartilhe seus pensamentos conosco na área de discussão abaixo, e não se esqueça de baixar os arquivos de origem para que você possa jogar com a demonstração!
Mais tutoriais CSS3
Desejo por mais CSS3? Abaixo estão os nossos artigos para você entender CSS3 teoricamente e praticamente!
- CSS3: crie um logotipo de feeds RSS
- CSS3: criar um campo de pesquisa
- CSS3: criar um formulário de contato AJAX
- CSS3: Construindo páginas HTML5 / CSS3
