Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Artigo – Menu em abas

    Falae pessoal. Aqui estou eu, mostrando mais um artigo, mas agora não no iMasters, por aqui mesmo no Blog. Um tema que muita gente veio me pedindo, tanto por email, quanto no fórum, etc. Vou mostrar aqui como criar um menu, simples de abas. Não há mistério nenhum na criação, estarei comentando cada parte do código, tentando esclarecer bem o css e a estrutura html. Espero que agrade.

    Vamos ver uma prévia, uma imagem do resultado final deste artigo, para vocês terem uma idéia e entenderem as explicações, dificuldades e métodos utilizados. Veja o resultado final.

    Dificuldades

    A única dificuldade, na minha visão, é a parte da borda superior do conteúdo. Porderia somente colocar uma borda em volta do conteúdo, que estaria resolvido, mas ae acaba ficando estranho, pois o menu ativo, da página atual, ficaria meio que separado do conteúdo. Veja o exemplo. E não é isso que queremos, o objetivo é que não haja divisão entre o menu da seção e o conteúdo, conforme mostrado no resultado final.

    Resolução – Parte 01

    Uma resolução que encontrei, foi utilizar uma lista não ordenada <ul> e um div #conteudo abaixo dessa lista. Até aí, simples, coisa rápida. Vejamos o código abaixo:
    <div id="geral">
    <ul class="menu">
    <li class="on"><a href="#">Menu 01</a></li>
    <li><a href="#">Menu 02</a></li>
    <li><a href="#">Menu 03</a></li>
    </ul>
    <div id="conteudo">Conteúdo do seu site</div>
    </div>

    Até aqui, tudo bem, temos um código simples e bem compreensivo. Vejamos o código online.

    Perceberam que utilizei um div geral, englobando todo o cónteúdo. Sempre faço isso, pois para posicionamento do site é melhor, já expliquei isso em outros artigos que escrevi e não perderei tempo explicando novamente. Outra motivo, é porque só dependo desta div para o tamanho do meu objeto. Já expliquei também em outros arqtigos, que quando você não adiciona um valor no width de um elemento, automaticamente ele atribui um tamanho líquido, ou seja, fica do tamanho do seu “pai”, que pode ser um div acima, o body, etc… No nosso caso, a lista e o div #conteudo são filhos do #geral, que é filho do body.

    Agora vamos cair pro css? Abaixo segue parte do código e abaixo explicarei:
    * { margin: 0; padding: 0; }

    body {
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    font: bold 0.65em "Trebuchet MS", Verdana, Arial, _sans, times;
    }

    a { font-weight: bold; color: #454545; }
    a:hover { text-decoration: none; color: #666666; }

    #geral {
    margin: auto;
    width: 450px;
    }

    #conteudo {
    border: 1px solid #9C5E40;
    border-top: 0;
    height: 170px;
    background: #DEED92;
    padding: 10px;
    text-align: left;
    }

    Vou explicar cada linha agora:

    * { margin: 0; padding: 0; }

    • Estou zerando todas as margens e paddings de todos os elementos.

    body { }

    • No body eu centralizei o posicionamento do texto, para o conteúdo ficar centralizado, divs, etc.
    • Coloquei uma margem superior de 10px (O padding é para o opera).
    • Configurei uma fonte em negrito, com 0.65 de tamanho na tipografia Trebuchet MS.

    a { font-weight: bold; color: #454545; }

    • Deixando os links em negrito e com um cinza escuro como cor.

    a:hover { text-decoration: none; color: #666666; }

    • Tirando o sublinhado e deixado a cor do link com um cinza um pouco mais claro ao passar o mouse em cima do link.

    #geral { }

    • Deixei o margin auto para que ele herdasse do “pai”, que é o body o alinhamento, que está centralizado pelo text-align no body
    • Defini um tamanho de 450px de largura para ele

    #conteudo { }

    • Definido uma borda de 1px sólida em volta do div, para fazer o contorno desejado
    • Zerando a borda superior do div
    • Definindo uma altura de 170px
    • Definindo um verde claro para a cor de fundo do div
    • Definindo um padding de 10px
    • Deixando o texto alinhado à esquerda

    Vejamos agora este exemplo online.

    Já estamos começando a ver o menu, só está faltando as abas, o menu. A utilização desta forma, vocês entenderão completamente mais a frente, quando terminar o código do menu, porque eu arranquei a borda superior, etc. O resto é de fácil compreensão, coisa bem básica, padding, text-align, entre outros atributos que vocês com certeza conhecem 😉

    Agora vamos para o css do menu:
    ul.menu {
    list-style: none;
    height: 21px;
    background: url(fundoLinha.gif) repeat-x left bottom;
    }

    ul.menu li {
    float: left;
    width: 104px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    background: url(aba_inativa.gif) no-repeat;
    }

    ul.menu li.on { background: url(aba_ativa.gif) no-repeat; }

    Vou explicar cada linha agora:

    ul.menu { }

    • Limpando o estilo de marcaçao da lista.
    • Definindo uma altura de 21px.
    • Definindo um background repetindo somente na horizontal, posicionado na esquerda e na base.

    ul.menu li { }

    • Definindo que ele fique sempre à esquerda.
    • Definindo uma largura de 104px.
    • Definindo uma altura de 21px.
    • Deixando a latura da linha o mesmo tamanho da altura total do li, para que o texto fique centralizado verticalmente.
    • Centralizando o texto.
    • Definindo a figura da aba como background.

    ul.menu li.on { }

    • Definindo a figura da aba do menu em on, ativo, como background.

    Com isso, temos finalmente o resultado final.

    Vamos agora entender a técnica. Primeiro, temos a imagem das abas, que isso podemos fazer com qualquer programa editor de imagens. Faça o download da aba ativa e da aba inativa.

    A aba ativa, é aquela que tem a mesma cor do background do conteúdo, referente ao link da seção atual. Ex: Seção Clientes, aba clientes vai receber a imagem ativa. No nosso exemplo, foi o link Menu01.

    O float left para os <li>’s todo mundo já sabe, é para que um fique do lado do outro, o que quebra o display: block padrão do <li>.

    A grande sacada, o grande lance, está no <ul class=”menu”>, para que fique com a linha pelo conteúdo inteiro. Eu poderia usar um border-bottom com a mesma cor da borda do conteúdo e diminuindo 1px da altura da <ul> do tamanho da <li>. Funciona, mas não no i.e. O certo é que com o float da <li>, o <ul> não fique preenchido, mas o i.e. aceita como conteúdo block e aumenta a altura do <ul>.

    Eu poderia utilizar posicionamentos absolutos, colocando um z-index no <ul> e no #conteudo, deixando o conteudo com um valor menor que o <ul> para que a borda superior do #conteudo não fique por cima do menu. Mas eu sou um grande defensor da não utilização de posicionamentos absolutos, busquei uma solução fácil e simples para isso.

    Perceberam que no <ul> tem um height certo? Ele existe exatamente para que o #conteudo não fique atrás do menu e ao lado do menu, no caso do i.e. Porque com o float dos <li> o que vem após acaba invadindo se não possuir uma altura que empurre-o para depois do elemento com o float. Esse valor de altura pode variar, neste exemplo é 21px, pois é o tamanho da imagem de fundo.

    Dentro da <ul> temos um background, que é somente um ponto 1px por 1px que só se repeta na horizontal. O posicionamento dele fica na base e à esquerda. O posicionamento horizontal do background nesse caso não importa, mas o vertical é importantíssimo, pois se não colocarmos bottom, ele ficará centralizado, que não é nosso desejo.

    Esse background se repete na horizontal, de toda a extensão da <ul> e como nem ela e nem o #conteudo receberam valor de largura, ele se repetira até a largura do pai, o #geral, que foi setado 450px, que é o valor que automcatimente é atribuído para eles. E como é um background, todo o conteúdo que estiver no <ul> ficará por cima da linha.

    Os valores podem variar, este exemplo aqui é apenas o método, vocês podem utilizar qualquer imagem, de qualquer tamanho, mas nunca podem esquecer de atribuir o valor ao elementos correpondentes. Ex: a imagem da aba tem 50px de altura, você tem que atribuir 50px na altura do <li> e do <ul>, e também atribuir ao line-height do <li>.

    Lembrando também que deve atribuir a classe .on para a <li> da página correspondente para que o link fique ativo.

    Vamos rever o resultado final.

    Espero ser de grande utilidade para todos. Qualquer erro, modificações, melhoras, reclamações, sugestões, ceríticas, serão bem vindas 😉 Aquele abraço e até a próxima.

    [ 04/jan/2006 às 13:50hrs ] [ Por Bruno Dulcetti ] Comentários 22 Comentários |

    Categorias: Artigos,CSS,Webstandards

    22 Comentários no Post "Artigo – Menu em abas"

    Postar no Rec 6

    1. Dá pra estilizar pra ficar estilo as abas do Firefox. 🙂

    2. com certeza cosme… vai dah imaginação d cada um… fiz um bem simples soh pro pessoal ter uma idéia da estrutura… o design eh soh meter brasa.. 😉

    3. Bruno, na verdade o ideal é fazer com que as abas se adaptem à lagura do texto nelas colocado. Além disso, elas devem aumentar caso o usuário redimensione o texto, passando para uma fonte maior. Pra isso, usa-se o a como block e coloca-se dois backgrounds, um para o li e outro para o a, sendo que o do li é bem mais alto e largo do que o que aparece normalmente.

      Um tutorial completo sobre essa técnica você pode ver em:
      http://www.alistapart.com/articles/slidingdoors/

    4. Falae Walmar. Eh verdade, tem várias outras coisas a se analisar… Bom ponto…

      Poderia ter pensado nisso, mas como foi algo bem rápido e simples, postei este atual… Mais pra frente posto algo como neste link que você passou que é muito bom…

      Obrigado ae… Aquele abraço.

    5. Opa. Muito boa sua didática. Já fiz um menu destes, na versão anterior do meu site, e usei 2 imagens como fundo, porque poderia aumentar tanto na vertical quando na horizontal (e era um efeito meio 3d).

      Continue postando artigos como estes. Estarei sempre antenado. Abraço!

    6. Grande Bruno!!

      Muito legal sua dica, gostaria de resaltar algo no código que pode agilizar e tornar muito util o desenvolvimento.

      {display: block;} por {display: inline}

      Desta forma, não gera quebra de linha e o conteudo já fica totalmente alinhado.?

      Grande Abraço!!

    7. […] Falae galera. Estou aqui de novo, mas agora pra mostrar um outro Tutorial/Artigo, de como fazer um menu com abas. Eu já tinha postado um tutorial, mas era utilizando imagens e ficava um pouco limitado, pois se aumentasse a fonte, a imagem naum iria ficar legal. […]

    8. Claudio Bastos | 08/jul/2006 às 19:07

      Muito bom o seu tutorial. Foi de grande valia para mim. Agora, será que poderia fazer um tutorial mostrando como fazer com que o botão do menu tivesse uma cor em cada página?

    9. Boa Tarde, gostaria de saber como faço um botão nesses estilo. Eu fiz um como exemplifica o código abaixo, mas gostaria de que botão fosse crescendo conforme o texto digitado. fico no aguardo. muito obrigada

      .botaocss {
      position:absolute;
      top:0px;
      left:0px;
      margin:0px;
      padding:0px;
      }

      .botaocss a, .botaocss a:visited {
      font: bold 10px verdana;
      padding:10px;
      margin:10px;
      text-decoration: none;
      text-align:center;
      color:#000;
      background: url(‘images/bt_escolher_link.gif’) no-repeat center center;
      width:70px;
      height:18px;
      display:block;
      }

      .botaocss a:hover {
      background: url(‘images/bt_escolher_hover.gif’) no-repeat center center;
      color:#999;
      }

    10. Kra, talvez eu sou meio bobo mesmo rsrs, mas eu queria saber como faz para os menus mudarem na hora q eu cliclar neles para passar para outro conteudo, tipo assim menu 1 “gasolina” menu 2 “diesel” aí quando eu clicar no menu gasolina aparecer o conteudo da gasolina e quando clicar no menu diesel tb aparecer conteudo de diesel , por favor c puder me responda pq ja estou louco de tanto tentar talvez é muito facil mas estou apanhando e muito, obrigado…

    11. Eu nao consigo como faço???eu nao consigo de jeito mnaneira nenhum!!!me ajude!!!!!!help!!…socorro!!!!!!!

    12. Olá amigo…

      Por ventura, é possível incluir este menu com abas em um blog? (Blogger.com)
      Se há como, poderia me enviar umas dicas no meu email??

      Valeu..

    13. Muito otimo.
      Valeu pela sua iniciativa em ensinar CSS.
      Abraços

    14. estou com dificuldades para entander o codigo que vc digitou logo acima ensinando a criar um menu em abas horizontal. nào consigo colocar do geito q vc fez .
      Pesso sua ajuda para poder conciliar os codigos fonte fico no aguarde.
      VLW

    15. Prezado colega,,, como faço para que os botões mudem de link:
      Ex: Item 1 / Item 2 / Item3 / Item4 etc…
      Quando clicado no botão (Item 1) -> Ele trazer na DIV o conteúdo deste item…
      Quando clicado no botão (Item 2) -> Ele trazer na DIV o conteúdo deste item…
      e assim sucessivamente….

      Não consigo de maneira alguma fazer isto acontecer… podes me ajudar… por favor…

    16. cara beleza?
      meu brow é o seguinte estou fazendo um blogger para minha mae certo ela trabalha com designer de sobrancelhas.
      aew eu queria bota um menu assim ve se voce entende
      EX:
      Clientes>cliente 1
      cliente 2
      cliente 3
      Orkut> add
      Comunidade
      e tal uma coisa desse tipo sera que vc sabe fazer e poderia ensinar ou da o codigo?
      valew abraços!!

    17. Amigo, mesmo copiando por completo a dica, li.on nao funciona de maneira alguma …fiquei perdido nessa.

    18. Olá

      tem como fazer este menu com abas na vertical?

      e colocar vários em uma mesma página?

    19. Pessoal… também estou na mesma dúvida do Ronivon e do Carlos (acima), não consigo fazer com que os link’s mudem à medida em que são clicados. Do tipo: Menu 01 –> exibe o conteúdo do menu 01; Menu 02 –> exibe o conteúdo do menu 02; Menu 03 –> exibe o conteúdo do menu 03 e assim por diante. Se alguém souber, dêem uma forcinha aí postando na página (pelo comentário), valeu !
      Estarei no aguardo.
      Abraços e que Deus lhe proteja Bruno.

    20. A dica do menu é boa, mas vi que muito estão com o mesmo problema que eu. Os links das abas estão estáticos, não mudam de página quando são clicados. Se alguém sabe como solucionar este problema posta ai. Vlw

    21. Bruno, você ensinou a parte que todo mundo sabe da história, mas o principal que é fazer com que o conteúdo mude de acordo com o link que é clicado você não explicou…

    22. Pessoal blz ????? Seguinte, não sei se é exatamente isso que vcs estão com dúvida, mas é o seguinte….para mudar o conteúdo é simples, o que o nosso amigo Bruno ensinou foi estilizar o menu, então para que mude o conteúdo é necessário que você crie uma página para cada assunto, por exemplo: assunto clientes (é necessário uma página clientes) ai você coloca na tag o endereço desta página, ex: Clientes, e assim por diante com os outros….
      Vou tentar exemplificar: Abra o bloco de notas ou o programa que você usa para desenvolver e copie o código abaixo e cole…salve com o nome: home.html, depois feche e abra outro e faça a mesma coisa mas salve com os nomes a seguir: empresa.html, servico.html, clientes.html, trabalhe.html, contato.html no bloco de notas não esqueça de mudar te tipo de documento txt para todos os arquivos na hora de salvar,,,

      Untitled Document

      Home
      Empresa
      Serviços
      Clientes
      Trabelhe Conosco
      Contato / Orçamentos

      Aqui você digita o que você quiser, digite coisas diferentes em cada página que você criar para ver como muda.

      Depois abra outro e cole somente o código abaixo e salve como css.css

      * { margin: 0; padding: 0; }

      body {
      text-align: center;
      margin-top: 10px;
      padding-top: 10px;
      font: bold 0.65em “Trebuchet MS”, Verdana, Arial, _sans, times;
      }

      a { font-weight: bold; color: #454545;
      text-decoration:none;
      }

      a:hover { text-decoration: none; color: #666666; }

      #geral {
      margin: auto;
      width: 650px;
      }

      #conteudo {
      border: 1px solid #9C5E40;
      height: auto;
      background: #00F;
      padding: 10px;
      text-align: left;
      }

      ul.menu {
      list-style: none;
      height: 21px;
      background: url(fundoLinha.gif) repeat-x left bottom;
      }

      ul.menu li {
      float: left;
      width: 104px;
      height: 21px;
      line-height: 21px;
      text-align: center;
      background: url(aba_inativa.gif) no-repeat;
      }

      ul.menu li.on { background: url(aba_ativa.gif) no-repeat; }

      pronto, é só ir na pasta onde salvou os arquivos e abrir-los no seu navegador…

      se for mesmo isso espero ter ajudado, abraços…

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com