Barra de navegação CSS Uma navegação fácil de usar é importante para qualquer site. Com o CSS, você pode transformar menus HTML aborrecidos em belíssimas barras de navegação. Barra de navegação Lista de links Uma barra de navegação precisa de HTML padrão como base. Em nossos exemplos, vamos construir a barra de navegação de uma lista HTML padrão. Uma barra de navegação é basicamente uma lista de links, portanto, usando o ltulgt e elementos ltligt faz todo o sentido: ltulgt ltligtlta hrefquotdefault. aspquotgtHomeltagtltligt ltligtlta hrefquotnews. aspquotgtNewsltagtltligt ltligtlta hrefquotcontact. aspquotgtContactltagtltligt ltligtlta hrefquotabout. aspquotgtAboutltagtltligt ltulgt Agora vamos remover as balas e as margens e preenchimento de A lista: ul list-style-type: none margin: 0 padding: 0 list-style-type: none - Remove as balas. Uma barra de navegação não precisa de marcadores de lista Definir margem: 0 e preenchimento: 0 para remover configurações padrão do navegador O código no exemplo acima é o código padrão usado nas barras de navegação vertical e horizontal. Barra de navegação vertical Para construir uma barra de navegação vertical, você pode modelar os elementos ltagt dentro da lista, além do código acima: li um display: largura do bloco: exibição de 60px: bloco - Exibição dos links à medida que os elementos do bloco tornam a área do link total Clicável (não apenas o texto), e permite especificar a largura (e preenchimento, margem, altura, etc., se desejar) largura: 60px - Os elementos de bloco ocupam a largura total disponível por padrão. Queremos especificar uma largura de 60 pixels. Você também pode definir a largura do ltulgt e remover a largura do ltagt, pois eles irão ocupar toda a largura disponível quando exibidos como elementos do bloco. Isso produzirá o mesmo resultado que o nosso exemplo anterior: ul list-style-type: none margin: 0 padding: 0 width: 60px li a display: block Barra de navegação vertical Exemples Crie uma barra de navegação vertical básica com uma cor de fundo cinza e altere O tamanho do fundo dos links quando o usuário move o mouse sobre eles: ul list-style-type: none margin: 0 preenchimento: 0 width: 200px background-color: f1f1f1 li uma exibição: bloco de cor: 000 preenchimento: 8px 16px text - decoração: nenhum Altere a cor do link em hover li a: hover background-color: 555 color: white ActiveCurrent Link de Navegação Adicione uma classe ativa ao link atual para que o usuário saiba qual página ele está ativado: background-color ativo: 4CAF50 Cor: branco Amplificador de links do centro Adicionar bordas Adicione texto-alinhamento: centro para ltligt ou ltagt para centrar os links. Adicione a propriedade da borda a ltulgt adicione uma borda ao redor da barra de navegação. Se você também deseja bordas dentro da barra de navegação, adicione um limite de borda para todos os elementos do ltligt, exceto para o último: ul border: 1px solid 555 li text-align: center border-bottom: 1px solid 555 li: borda da última criança - bottom: nenhum Full-height Fixed Vertical Navbar Crie uma navegação de altura total, quotstickyquot: ul lista-estilo-tipo: nenhuma margem: 0 preenchimento: 0 largura: 25 background-color: f1f1f1 altura: 100 posição de altura total: fixa Faça com que ele seja mantido, mesmo no transbordamento de rolagem: auto Ativar rolagem se o sidenav tiver muito conteúdo Nota: Este exemplo pode não funcionar corretamente em dispositivos móveis. Barra de navegação horizontal Existem duas maneiras de criar uma barra de navegação horizontal. Usando itens de lista em linha ou flutuante. Itens de lista em linha Uma maneira de construir uma barra de navegação horizontal é especificar os elementos ltligt como inline, além do quotstandardquot código acima: li display: exibição inline: inline - Por padrão, os elementos ltligt são elementos de bloco. Aqui, removemos as quebras de linha antes e depois de cada item da lista, para exibi-las em uma linha Itens de lista flutuante Outra maneira de criar uma barra de navegação horizontal é flutuar os elementos ltligt e especificar um layout para os links de navegação: uma exibição: Bloqueio do bloco: 8px cor de fundo: dddddd float: esquerdo - use flutuador para obter elementos do bloco para deslizar ao lado do outro exibição: bloco - Exibindo os links como elementos de bloco torna a área do link inteiro clicável (não apenas o texto) e Nos permite especificar preenchimento (e altura, largura, margens, etc., se desejar) preenchimento: 8px - Uma vez que os elementos do bloco ocupam a largura total disponível, eles não podem flutuar um ao lado do outro. Portanto, especifique algum preenchimento para fazê-los parecer bons cor de fundo: dddddd - Adicione uma cor de fundo cinza a cada elemento. Dica: Adicione a cor de fundo a ltulgt em vez de cada elemento ltagt se desejar uma cor de fundo de largura total: Ul background-color: dddddd Barra de navegação horizontal Exemplos Crie uma barra de navegação horizontal básica com uma cor de fundo escura e altere a cor de fundo dos links quando o usuário move o mouse sobre eles: ul lista-estilo-tipo: nenhuma margem: 0 preenchimento : 0 transbordamento: cor de fundo oculto: 333 li um visor: cor do bloco: branco texto-alinhado: preenchimento central: 14px 16px texto-decoração: nenhum Alterar a cor do link para 111 (preto) em hover li a: hover background-color : 111 ActiveCurrent Navigation Link Adicione uma classe ativa ao link atual para que o usuário saiba qual página ele está ativado: background-color ativo: 4CAF50 Right-Align Links Links de alinhamento à direita, flutuando os itens da lista para a direita (flutuante: direito ): Ltulgt ltligtlta hrefquothomequotgtH omeltagtltligt ltligtlta hrefquotnewsquotgtNewsltagtltligt ltligtlta hrefquotcontactquotgtContactltagtltligt ltli stylequotfloat: rightquotgtlta classquotactivequot hrefquotaboutquotgtAboutltagtltligt ltulgt divisores de fronteira Adicione a propriedade border-right para ltligt para criar divisores de link: Adicionar uma borda direita cinza para todos os itens da lista, com exceção do último item (last-child) li border-right : 1px sólido bbb li: último-filho fronteira-direita: nenhum Barra de navegação fixa Faça a barra de navegação ficar na parte superior ou inferior da página, mesmo quando o usuário rola a página: Barra de navegação horizontal Exemplo W3C Recursos da Web lth2 classoffscreengtW3C Web Resourceslth2gt ltdiv idhmenugt ltulgt 160160ltligtlta hrefw3.orgConsortiumactivitiesgtW3C Activitiesltagtltligt 160160ltligtlta Visitorsltagtltligt 160160ltligtlta hrefw3.orgConsortiumgtAbo hrefw3.orgTRgtW3C Técnico Reportsltagtltligt 160160ltligtlta hrefw3.orgConsortiumsiteindexgtW3C site Indexltagtltligt 160160ltligtlta hrefw3.orgConsortiumnew-to-w3cgtNew Ut W3Cltagtltligt 160160ltligtlta hrefw3.orgConsortiumjoingtJoin W3Cltagtltligt 160160ltligtlta hrefw3.orgConsortiumcontactgtContact W3Cltagtltligt ltulgt160160 ltdivgt offscreen 160160position: absolute 160160top: -30em 160160left: -300em divhmenu 160160 margem: 0 160160 preenchimento. 3em 0 .3em 0 160160 fundo: ddeebb 160160 largura: 100 160160 texto-alinhado: centro divhmenu ul 160160 lista-estilo: nenhum 160160 margem: 0 160160 preenchimento: 0 divhmenu ul li 160160 margem: 0 160160 preenchimento: 0 160160 exibição: inline Divhmenu ul a: link 160160 margem: 0 160160 preenchimento. 3em .4em .3em .4em 160160 texto-decoração: nenhum 160160 fonte-peso: negrito 160160 tamanho da fonte: médio 160160 cor: 004415 divhmenu ul a: visitou 160160 margem: 0 160160 preenchimento. 3em .4em .3em .4em 160160 text-decoration: none 160160 font-weight: bold 160160 tamanho da fonte: médio 160160 cor: 227755 divhmenu ul a: active 160160 margem: 0 160160 preenchimento. 3em .4em .3em .4em 160160 text-decoration: none 160160 font-weight: bold 160160 tamanho da fonte: médio 160160 cor: 227755 divhmenu ul a: hover 160160 margem: 0 160160 preenchimento. 3em .4em .3em .4em 160160 text-decoration: none 160160 font-weight: bold 160160 tamanho da fonte: médio 160160 cor: f6f0cc 160160 background-color: 227755 Navegação Navegação Visão geral
No comments:
Post a Comment