Tutorial de CSS > Criando um layout com CSS a partir do zero > Parte 11
11. A navegação (argh!)
Há muitos truques de CSS neste capítulo, e não é obrigatório que você entenda exatamente o que cada parte da css faz, somente aquilo que você esteja pronto para modificar nesta CSS para fazer o que você quer em outros websites, o que é basicamente a mudança de altura, comprimento e imagens. Porém eu vou dar o melhor de mim para explicar o código.
Vamos começar pela parte fácil. Remova o fundo vermelho na CSS e exiba a navegação removendo a classe hidden
na lista
de definição.
O método de "rollover" das imagens que vamos usar neste menu é uma solução 100% feita em CSS. A premissa básica por trás disso é posicionar os itens em uma lista de definição próxima uma da outra (lado a lado), esconder o texto delas e usar CSS para trocar a imagem de fundo dependendo de qual estado o botão está ("rollover", normal ou selecionado).
Para cada um dos 4 itens de navegação, necessitamos criar uma imagem como as exibidas acima. O primeiro terço da imagem é o estado
normal, o segundo é o estado mouseover
e o terceiro é o estado selecionado. O gif animado abaixo mostra
como isto vai funcionar:
Espero que você tenha entendido como isto funciona, através do diagrama acima. Vamos fazer nossas quatro imagens de navegação.
Salve-as em /images/nav/
Agora vou dar o melhor de mim para explicar a css por trás de tudo, bloco por bloco. Descubra comigo.
Substitua sua regra #main-nav
com o código abaixo:
/* Main Navigation */ #main-nav { height: 50px; } #main-nav dl { margin: 0; padding: 0; }
Isto muda a altura da div main-nav
para 50px e retira todas as margens das listas de dados.
/* IE5 Mac Hack \*/ #main-nav { padding-left: 11px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */
Isto é um truque que faz duas coisas: Atribui o espaçamento da esquerda, da main-nav
para 11px (para
que bata ligeiramente como é mostrado no design) e conserta um bug no IE5 para mac.
#main-nav dt { float: left; }
Isto atribui a definição dos títulos (nossos contêineres de item de navegação individual) para flutuar à esquerda, o que os junta da esquerda para a direita, em vez de um abaixo do outro.
#main-nav dt a { display: block; height: 0px !important; height /**/:50px; /* IE 5/Win hack */ padding: 50px 0 0 0; overflow: hidden; background-repeat: no-repeat; }
Atribui ao link a mesma dimensão que seu contêiner correspondente e esconde o texto usando a propriedade overflow
.
#main-nav dt a:hover { background-position: 0 -50px; }
Faz com que a posição do fundo se mova até 50px quando o cursor do mouse passa por cima de um link.
#main-nav dt#about, #main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); } #main-nav dt#services, #main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); } #main-nav dt#portfolio, #main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); } #main-nav dt#contact, #main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
Atribui o comprimento individual de cada item de navegação e o caminho para cada imagem.
Agora se todas as nossas imagens estiverem nomeadas como acima e salvas em seus lugares corretos, sua navegação deve funcionar.
A última coisa que necessitamos fazer para que a navegação funcione, é obter os estados dos botões selecionados para mostrá-los quando você estiver na página correspondente.
Necessitamos adicionar algumas novas CSS e modificar algumas CSS existentes para concluir isto. Adicione a CSS abaixo ao restante de sua navegação CSS:
body.about dt#about, body.about dt#about a, body.services dt#services, body.services dt#services a, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.contact dt#contact, body.contact dt#contact a { background-position: 0 -100px; }
Este seletor CSS enorme checa qual classe a tag body
tem e então atribui a posição da barra de
navegação correta.
Então se você quisesse que a navbar about
fosse selecionada, você atribuiria class="about"
à
tag body
. Vamos fazer isto agora:
<body class="about">
Agora o problema que temos é que também queremos que a imagem do cabeçalho mude baseada em qual seção estamos visualizando.
Então necessitamos modificar a regra #header
como abaixo:
body.about #header { height: 150px; background: #db6d16 url(../images/headers/about.jpg); }
Agora quando você criar páginas para suas outras seções, você só tem de modificar a classe do body de
about
para, por exemplo: contact
, atribuir uma regra de CSS apontando para a
imagem do cabeçalho correta e está pronto.