Olá, bem-vindo de volta.
Adivinha?
Vamos fazer outra, e
nossa última barra de navegação juntos, nesta revisão de código.
Este, porém, é um pouco diferente, não só pela
forma como configuramos as coisas, mas porque quero falar com vocês sobre
a acessibilidade de quantas pessoas fazem suas barras de navegação.
A nova maneira,
eu usei essa maneira, é criar seus links de navegação como parte de listas.
Então você pode ver, nós já temos um pouco diferente aqui.
Eu tenho uma lista desordenada com um, dois, três, quatro itens de lista, e
alguns desses itens de lista têm listas não ordenadas.
Então, embora isso seja muito comum,
existem alguns problemas de usabilidade, quando você percebe, essas são realmente listas?
Porque se não, essa é uma tag semântica que estamos usando, que talvez queiramos evitar.
Mas é tão comum que quero mostrar para você e deixar você brincar com ele e
tomar suas próprias decisões.
A outra questão quando fazemos esta barra de navegação suspensa,
tem a ver com a acessibilidade das pessoas sendo capazes de passar o mouse
sobre certas coisas que você quer ativar.
Acho que todos já estivemos lá, quando estivemos em uma página web e
estamos tentando passar o mouse sobre algo para clicar em um link.
E continua a estourar porque a nossa mão está muito trêmula ou
temos que pairar sobre três coisas ao mesmo tempo.
Então, novamente, embora esta seja uma técnica que eu quero compartilhar com você e
ajudá-lo a entender, espero que você tenha certeza de que qualquer aplicativo que você faça,
você faça o seu melhor para garantir que ele seja o mais acessível possível.
Então, novamente, vamos começar com este código HTML simples, meio chato, e
ver se podemos fazê-lo parecer com algo um pouco mais excitante.
O que temos aqui agora é uma barra de navegação horizontal
que vai ter elementos suspensos.
Então, quando eu passo em Casa, não há nada a mais para ver, mas, quando eu passo em
Imagens, você pode ver que eu tenho três links adicionais que eu posso tentar fazer, e o
mesmo com Receitas, e Contato, novamente, é tudo por si só.
Então, como eu fiz isso?
Como eu fiz para que 2015, 14 e 13 não apareçam a menos que eu esteja pairando?
E o mesmo com as receitas?
Vamos dar uma olhada.
Tudo bem, eu vou pular o corpo na navegação
porque eu acho que você sabe como fazer tudo isso.
Em vez disso, vamos falar sobre as diferentes listas.
Desculpe, liste os próprios itens nos links.
Então o que eu fiz foi entrar aqui, meio que
você pode ver os dois ao mesmo tempo.
E é muito fraco, e eu gostaria de ter feito uma cor diferente agora.
Mas eu tenho uma fronteira entre cada uma dessas opções.
Agora, teria parecido um pouco estranho
para mim ter uma fronteira aqui ao longo do lado.
Então o que eu precisava fazer era ir e eu disse que você sabe o quê?
Para o último item da lista, o último, não vamos colocar uma borda.
São esses pequenos ajustes que você pode colocar em seu código
para torná-lo um pouco mais profissional.
Também não queremos fronteiras sobre os subitens, certo?
Porque não há nada.
Já que estão bloqueados, não precisamos de fronteiras ao lado.
Então, eu fiz a mesma coisa aqui, onde eu disse, você sabe o que?
Não quero usar fronteiras aqui.
Bem direto, espero.
Agora, vamos olhar de novo.
Fiz um estilo simples nos meus links de navegação, certo?
A única coisa que eu coloquei é, novamente,
eu queria mostrar a vocês um exemplo de uso de transição.
A transição aqui é o que muda lentamente a cor quando você passa o mouse sobre,
em vez de uma mudança rápida.
Então você pode ver, é um pouco mais gradual do que repentino, certo?
O ativo é como da última vez.
Agora, aqui está a parte interessante.
Vamos falar sobre os submenus, está bem?
Então, como o navegador sabe quando algo é um submenu?
Bem, ele pode olhar para o DOM, e ele pode olhar para baixo e dizer, oh, eu estou na navegação.
E agora eu estou em uma lista desordenada, e aqui estou eu em um item da lista.
Se ele encontrar outro item da lista mais baixo, é meio que acorrentado,
ele sabe, oh, oh, eu estou em um submenu.
Bem aqui, ele sabe que estou no navegador, estou dentro de uma lista,
e acabei de encontrar uma lista não ordenada lá dentro.
Então, como nós o temos configurado para que ele não apareça no início é que eu
defini a posição como absoluta, e eu defini a exibição como nenhuma.
Portanto, ele não vai aparecer por padrão.
Não vai acontecer.
Ok?
Então, como faço para
que apareça de repente se quisermos fazer algo nessa linha?
Bem, nós queremos descobrir como mudá-lo aqui, quando eu passar o mouse sobre um item da lista
que tem uma lista desordenada embaixo dela, mudar essa exibição de nenhum para bloquear.
Então, essas duas linhas de código aqui, isso é realmente configurá-lo.
De modo que quando eu passar por aqui, por padrão, a
exibição é nenhuma, mas quando eu passar o mouse, a exibição torna-se bloco.
É um código muito simples, muito curto, muito poderoso conceito de entender.
Então, eu mostrei algumas maneiras diferentes de você estilizar suas barras de navegação.
Temos horizontal, temos vertical, temos queda.
Eu realmente espero que você escolha um que você se sinta mais confortável, ou
realmente, o mais animado, e crie um para
o seu projeto final aqui nesta classe CSS.
Não se preocupe se tiver problemas.
Poste no fórum de discussão.
Vá online e procure respostas.
Mas o que eu realmente espero é que você possa criar algo de que você se orgulhe,
que seja ao mesmo tempo bonito e acessível.
Boa sorte.