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.

Voltar   Avançar