Comentários sobre: Artigo – Menu em abas

Por: Hélio

Hélio — Sat, 03 Sep 2011 14:46:00 +0000

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…

Por: Dani

Dani — Mon, 20 Sep 2010 19:18:25 +0000

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…

Por: Robson

Robson — Tue, 06 Apr 2010 13:48:21 +0000

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

Por: mnfv72

mnfv72 — Wed, 18 Nov 2009 13:48:16 +0000

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.

Por: Bianne

Bianne — Fri, 22 May 2009 02:17:49 +0000

Olá

tem como fazer este menu com abas na vertical?

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

Por: Cleber

Cleber — Sun, 17 May 2009 16:53:11 +0000

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

Por: pedro

pedro — Tue, 10 Mar 2009 01:29:38 +0000

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!!