LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Quinta-feira, 01/12/2005 - 13:00 - Por Renan Gomes Fogaça
Seções relacionadas:

Barra de navegação

Olá leitores iMasters! Nesse meu primeiro artigo vou tentar passar uma noção de como é simples criarmos dinamismo com poucas linhas de código. Muito tem se falado, se as aplicações web vão substituir as aplicações desktop, se é possível alcançar o mesmo dinamismo, e agora com a ascensão do Ajax esse tema está cada vez mais na cabeça dos desenvolvedores.

Nesse artigo vou explicar como é possível criar uma barra de navegação semelhante a que o Outlook apresentava até a sua versão 2002. Não que eu seja um grande defensor da Microsoft, mas como a maioria dos internautas já deve ter visto, fica como um bom ponto de partida para esse artigo.

Outra coisa importante a ser discutida é que se você realmente quer dar interatividade às suas páginas, não conseguirá isso apenas com javascript. Terá que conhecer também CSS. A maioria dos desenvolvedores já conhecem o CSS, mas nem sempre sabem aproveitar ao máximo tudo que ele tem a oferecer. Se ainda não domina CSS, leia os artigos da coluna específica CSS no iMasters.

O resultado que queremos alcançar é esse:

Caso queira ver o exemplo pronto, antes de ler o artigo, clique aqui.

Esse exemplo foi testado nos seguintes browsers:

Mozilla Firefox 1.0
Internet Explorer 6.0
Opera 8.0

Vou dividir o artigo em três partes. A primeira será a montagem de seu HTML. Depois o CSS e por fim o javascript para dar a funcionalidade. O texto desse artigo ficou enorme, mas não se impressione achando que é muito complexo, pois o que eu fiz foi tentar ser o mais claro possível em cada passo.

Estrutura do HTML

Linha 3: div que engloba toda a nossa barra, e vai ser nele que vamos colocar a largura no CSS. Assim, se quisermos aumentá-la, só modificamos em um lugar.

Linha 5 a 15: Aqui está a estrutura da barra. Para cada item que quisermos adicionar, inserimos um link para o botão e um div para o conteúdo referente àquele item da barra. O principal é respeitar uma regra de nomenclatura que nos ajuda na hora de criar o script. Se o link tem como id o nome “Imasters”, o div deve ter o seu id como “ConteudoImasters”, pois fica fácil de identificar qual item estamos tratando.

Repare que, nesse trecho de código, da linha 5 a 15 seria um item, e da 18 a 28 seria outro. O link tem a classe do CSS “botaoBarra” e o div tem a classe “conteudoBarra”, que vamos criar logo em seguida.

O HTML é basicamente esse. Para cada item que deseja adicionar, só crie um novo link e um novo div. Crie os atributos básicos como o evento “onclick” e coloque no div qualquer conteúdo que desejar.

Estrutura do CSS

Linha 1 a 4: Tiramos a margin e o padding para o corpo do documento.

Linha 6 a 14: Formatamos o div que vai englobar a barra.
- Colocamos position absolute para que ele fique posicionado exatamente na posição que queremos (através do left e top).
- Atribuímos largura de 300px para que nossa barra fique em um tamanho legal. Configure a largura da maneira que achar melhor, e se a barra estiver dentro de um frame, e você quiser que ele cresça automaticamente caso o usuário redimensione os frames, atribua largura de 100%.
- Borda na lateral esquerda e direita do container.

Linha 16 a 27: Formatação para os botões da barra, tanto o item selecionado quanto os demais.

A classe “botaoBarra” vai se o default para todos os itens, e no javascript vamos trocar a classe do CSS para “botaoBarraAtiva” no item que o usuário selecionar. Como ambos vão ter a mesma característica, só mudará o fundo. Atribuímos de uma vez só economizando código.

- “display:block” exibe o link como um bloco, usado nessa situação para que toda a caixa seja clicável;
- “margin:0” elimina qualquer possível margem que os links tenham por default e força que o link tenha a largura do elemento pai, repare que em nenhum momento atribuímos uma “width” para ele, e sim apenas no div “container”;
- “padding” é a o espaçamento interno que o link vai ter;
- font-family, font-weight e font-size: Atribui fonte Verdana para o link, tamanho de 11 pixels e a deixa em negrito;
- “text-decoration:none” remove o sublinhado que os links têm por default;
- “background-repeat:repeat-x” repete a imagem na horizontal quantas vezes for necessário. Para cada link, usaremos uma imagem de mais ou menos 3 pixels que foi extraída do próprio Outlook 2003 (printscreen na tela mesmo), assim a imagem fica pequena e o CSS se encarrega de repeti-la quantas vezes for necessário;

Linha 29 a 41: com a formatação dos links prontos, agora só falta atribuir a imagem de fundo. Criamos um seletor para o link (“botaoBarra”), um para o link quando o mouse estiver sobre ele (“botaoBarra:hover”), outro para o link que for selecionado pelo usuário (“botaoBarraAtiva”) e o outro para quando o mouse estiver sobre o link selecionado pelo usuário;

Linha 42 a 50: Formatação para o div aonde vai estar o conteúdo de cada um dos itens da barra.

- “display:none” faz com que o div fique o oculto. Vamos controlar se ele vai ser exibido ou não pelo javascript, mas o default é que ele fique invisível;
- “height:0px” deixa ele com zero pixels de altura, também vamos controlar isso por javascript, mas setamos um default por garantia;
- “overflow:hidden” é com certeza um dos mais importantes para o funcionamento da barra. Através desse atributo, informamos o que deve acontecer se o conteúdo exceder o tamanho do div, e nesse caso forçamos para que todo conteúdo que ultrapassar as margens do div fique oculto. No javascript, vamos alternar entre “hidden” e “overflow”, para que no final do redimensionamento da barra, crie a barra de rolagem e o usuário tenha acesso a visualizar todo o conteúdo;
- “background-image” e “background-repeat” atribuem uma imagem de fundo para o div, da mesma maneira que fizemos com os links;
- “font-family” e “font-size” formatam o texto que vai ser escrito no div. Esse atributo poderia ser especificado em outro seletor, mas para facilitar vamos deixar aqui;

Linha 52 a 54: Criamos uma margem para os parágrafos que forem escritos dentro dos divs. Repare que você pode criar quantos seletores quiser seguindo esse modelo, por exemplo, se quiser que todas os combos (select) tenham a mesma formatação de cor, é só criar da mesma maneira:

.conteudoBarra select{
/* formatação */
}

Agora com o HTML e o CSS prontos, vamos para o principal desse artigo: o javascript.

Para facilitar o entendimento, vamos dividir o código em duas partes: a função que vai ser chamada quando o usuário clicar em algum dos botões, e a função que vai fazer o redimensionamento propriamente dito.

Linha 1: Criamos o temporizador que vai ser utilizado no redimensionamento do conteúdo das barras. Ele é criado fora da função para que seja uma variável global, assim podemos controlar se ela já está sendo usada, evitando que o usuário clique em dois itens e ocorra algum erro;

Linha 3: criação da função, o parâmetro será qual botão da barra foi clicado;

Linha 5: Se o timer já estiver sendo usado, saímos da função, evitando que o usuário clique em dois itens diferentes e ocorra algum erro. Provavelmente isso não vai acontecer nunca, mas é sempre bom prevenir.

Linhas 7 e 8: Recuperamos na variável “tamanhoC” qual o altura real do div “container”. Esse valor vai ser usado para os cálculos de tamanho.

Linha 10: Recuperamos todos os links da página através do “getElementsByTagName”;

Linhas 11 a 16: Fazemos um loop por todos os links que a página possui através do array que foi criado em “elem”; Esse loop tem duas funções, a primeira é desativar o item selecionado trocando a classe do CSS (linhas12 e 13), e para cada link da barra, subtrair a sua altura real do tamanho do container (linhas 14 e 15). Ao final desse loop, todos os links estão com a classe CSS de desativado (“botaoBarra”) e teremos em “tamanhoC” a área livre dentro do container para o redimensionamento. Com esse loop, não importa quantos links tenha na barra, ele faz os cálculos sozinho;

Linha 18: Calcula na variável “inc” de quanto vai ser o incremento na hora de crescer o conteúdo. Como vamos criar um timer para não redimensiona-la de uma vez só, dividimos esse “crescimento” em dez etapas, por isso da divisão por 10. Como o timer vai ter um intervalo de tempo entre cada iteração, dá a impressão do movimento para o usuário, mas na verdade ele só faz uma pequena pausa entre cada etapa;

Linhas 20 e 21: Agora que todos os botões da barra já estão desativados, só falta ativar o que foi clicado. Como o seu “id” veio por parâmetro, só atribuímos a classe CSS “botaoBarraAtiva” para ele;

Linhas 23 a 29: Vamos agora descobrir se algum dos conteúdos da barra já está expandido, sabendo qual deve ser ocultado.

O “if” da linha 26 e 27 procura algum “div” que tenha o seu id começando por “Container” (lembre-se da nomenclatura que adotamos) e que esteja com “display:block” setado. Como todos estão por default com “display:none”, essa condição recupera no variável “barra” se algum estiver expandido;

Linha 31: Se o conteúdo que está selecionado foi o mesmo que o usuário clicou, sai da função, não precisamos repetir o mesmo processo;

Linha 33 a 38: Atribuímos em “timer” o temporizador para a função de redimensionamento. Essa função é composta por sete parâmetros:

1º - O conteúdo a ser ativado;
2º - O conteúdo que vai ser desativado, ou seja, vamos o fazer encolher;
3º - A altura do conteúdo que está sendo ativado, na primeira chamada o parâmetro é passado como “0”, e a cada iteração acrescentamos o valor que já foi calculado;
4º - A altura conteúdo que está sendo desativado;
5º - O tamanho da área livre dentro do container que usaremos para o conteúdo;
6º - O tempo que deve ser esperado a cada iteração. Como temos que recriar o timer a cada chamada da função, esse parâmetro vai ser usado para isso;
7º - O incremento para o redimensionamento. Por exemplo, se a área livre do container for 660 pixels, a cada chamada da função adicionamos 66 ao conteúdo que está sendo ativado, e subtraímos 66 da que está sendo desativado;

Vamos agora a função de redimensionamento:

Como já discutimos os parâmetros que a função recebe, vou pular essa parte.

Linha 45: Recuperamos em “b1” o conteúdo que está sendo ativada;

Linha 47: Condição que detecta se o redimensionamento chegou ao fim. Basicamente ele testa se ao acrescentar o incremento na altura da barra. Se esse tamanho vai ser menor que o tamanho do container. Se a condição for verdadeira, fazemos os cálculos e setamos o timer novamente, senão fazemos as operações finais e anulamos o timer, como veremos logo abaixo;

Linha 48: Acrescentamos na altura do conteúdo o incremento que foi passado por parâmetro;

Nota importante:

Todos os atributos do CSS (pelo menos os do W3C) podem ser modificados via javascript, e vamos fazer isso diversas vezes aqui nessa função.

Para fazer isso, usamos o atributo “style” dos objetos. Por exemplo, se tivéssemos esse CSS:

#objeto{
width:300px;
background-color:#000;
}

E se quiséssemos modificá-lo pelo javascript, ficaria assim:

objeto.style.width = 400;
objeto.style.backgroundColor = “#eee”;

Nomes compostos perdem o hífen e tem a sua primeira letra em maiúsculo.

Linhas 50 a 53: Se algum conteúdo deve ser desativado, subtrai o incremento da sua altura. Como na primeira vez nenhuma barra deve ser desativada, precisamos fazer esse teste;

Linhas 55 a 61: Essa é uma modificação que só vai ser feita na primeira chamada da função, por isso que fazemos esse teste.

Se o div que está sendo ativado está como “display:none” (ou seja, oculto), atribuímos o “display:block”, isso faz com que ele apareça na página; e se o div que está sendo desativado não estiver com “overflow:hidden” atribuímos essa modificação para ele, com isso fazemos que as barras de rolagem sumam e que o conteúdo vá desaparecendo conforme diminuímos a sua altura;

Linha 63 a 68: Setamos o timer novamente, mas reparem que na altura do conteúdo ativo passamos o parâmetro adicionado do incremento, e na altura do conteúdo que está sendo desativado, a altura menos o incremento, com isso fazemos os dois passos ao mesmo tempo, aumentamos um e diminuímos o outro;

Linha 70: Caso estivermos na ultima chamada da função, atribuímos para o conteúdo ativo a altura da área livre do container, garantindo que não ficará nenhum espaço sobrando;

Linhas 71 a 75: Se algum conteúdo estava sendo desativado, ocultamos ele de vez nesse ultimo passo;

Linha 77: Atribuímos para o conteúdo ativo o css “overflow:auto”, e com isso as barras de rolagem são criadas. É importante fazer essa atribuição só no final, durante o redimensionamento ela fica com “overflow:hidden”

Linhas 79 e 80: Cancelamos o timer e limpamos a variável;

Com isso finalizamos as principais funcionalidades da barra, agora só faltam alguns retoques para terminar de vez:

Linhas 84 a 94: Quando a página é carregada, ativa o primeiro item da barra. O que essa função faz é correr os links da página, assim que o primeiro que tiver a classe CSS “botaoBarra” for encontrado, a função de clique é chamada para esse item, como se o usuário mesmo tivesse clicado;

Linhas 96 a 119: Se a janela for redimensionada, modifica a altura do conteúdo ativo.

O div “container” já se auto-redimensiona por estar com altura 100%, mas como estamos usando medidas exatas para criar esse efeito, montei essa função para recalcular o tamanho do conteúdo ativo.

Peguei direto o tamanho da página para fazer os cálculos, e não o tamanho do container, pois se o usuário diminui o tamanho da janela, o container permanece com o tamanho original. O resto está igual aos cálculos já feitos na outra função.

Clique aqui para ver o exemplo completo.

Com isso finalizamos esse artigo e espero que tenham gostado. Quem sabe não venham mais por ai!

Abraços!

Todos os artigos de Renan Gomes Fogaça

13 comentários publicados

  • 1. Parabens!

    Quinta-feira, 01/12/2005, por hogs

    Montei um menu semelhante a esse ontem hehe!! Muito bom meu amigo! Parabens pelo artigo! Muita gente procura esse menu pela net! Seja bem vindo Renan, abraços, Vitor Oliveira

    Responder comentário

  • 2. Parabens!!! Muito Bom!!!

    Quinta-feira, 01/12/2005, por Rosangela Santos

    Parabens!!!!
    Muito bom o artigo..... começou com chave de ouro.... ja to esperando os proximos..... VALEU

    Responder comentário

  • 3. Uau!

    Quinta-feira, 01/12/2005, por João Ricardo de Albuquerque Si

    Cara, mandou muito bem. Excelente artigo. Parabéns.

    Responder comentário

  • 4. Pergunta!!

    Sexta-feira, 02/12/2005, por Diogo Baeder de Paula Pinto

    Com faço para deixar ele no meio??? No centro da página!!

    Abraaço,
    DAviMM

    Responder comentário

  • 5. Ta vendo!!!!

    Sexta-feira, 02/12/2005, por Thiago Pereira

    Ae gente, é desse tipo de profissional que as empresas vão atras. Parabéns

    Responder comentário

  • 6. mandou bem

    Domingo, 04/12/2005, por Rafael Batista Pinheiro dos Sa

    Mandou muito bem!!! ficou muito bom o artigo.... valeu!!!

    Responder comentário

  • 7. Boa Renan!

    Segunda-feira, 05/12/2005, por Julio Cesar Borges de Freitas

    Otimo artigo, muito bem elaborado.
    Boa sorte!

    Jarraum

    Responder comentário

  • 8. Quase perfeito, exceto por...

    Sábado, 10/12/2005, por Marcelo Bozi

    Caro Renan:
    Uma imagem explicativa não está aparecendo. Por favor, reponha ela pra eu aproveitar melhor sua matéria nota 10! Um abraço.

    Responder comentário

  • 9. Show

    Segunda-feira, 12/12/2005, por Bruno

    Falae Renan. Bem vindo ao seleto grupo de articulista do iMasters. Belo artigo, esperamos os próximos, grande abraço. Bruno Dulcetti

    Responder comentário

  • 10. Muito Bom !

    Terça-feira, 03/01/2006, por carlendario

    Artigo muito bom, parabéns

    Responder comentário

  • 11. Parabéns,

    Terça-feira, 21/02/2006, por leonardo de salles

    vc começou muito bem aqui no IMasters!!!

    Responder comentário

  • 12. Mto bom...mas tem um errinho de nada

    Quarta-feira, 08/11/2006, por Carlos Zillner

    Ae, mto legal esse script. Peguei ele como exemplo e adaptei prum sisteminha de notícias onde ao clicar no titulo da noticia aparece a manchete. Foi ai q encontrei um erro. Se a div container tem tamanho definido a inves de porcentagem ao redimencionar as divs q são maiores que o espaço para o conteúdo, a div que está sendo ocultada fica com 100% de height num milésimo de segundo antes de terminar o redimencionamento.

    O q eu fiz foi alterar a linha equivalente a numero 130 do seu index.htm. Coloquei:
    b2.style.height = alturaInativa - inc 1;

    Assim ele faz a comparação de altura correta e esconde direitinho.

    Espero ajudar alguém que passe por aqui.

    Abraços e continue com matérias boas como essa.

    Responder comentário

  • 13. Uma pergunta

    Quarta-feira, 08/11/2006, por Carlos Zillner

    Não seria melhor pegar as tags A e DIV apenas da div container?

    Pq se meu html for mto grande ele vai demorar mais pra processar nao vai? Ou esse tempo é insignificante?

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Renan Gomes Fogaça é estudante de Ciências da Computação, trabalha com desenvolvimento de aplicações em .NET e ASP, javascript e CSS desde 2003.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.