Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Painel de Usuario
Convidado
Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Ter 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Sab 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Sab 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Sab 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último usuário registrado atende pelo nome de kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Julho 2018
SegTerQuaQuiSexSabDom
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

Calendário Calendário

Visitou

Menu com mudança de cor (mouse over)

Ir em baixo

Tutoriais Menu com mudança de cor (mouse over)

Mensagem por konan em Sex 17 Jun 2011 - 11:26

Vamos aprender como fazer um menu de links, mudando a cor quando o mouse estiver sobre um determinado link.

Montamos o CSS com as diretrizes utilizadas em nosso menu vertical

Este será montado sem a utilização de tabelas (TABLE), visando o conceito utilizado por tableless.

CódigoCSS:
Código:

<style type="text/css">
#blokmenu  { width: 130px; font-family: sans-serif; font-size: 11px; }
#blokmenu span { margin: 0 0 0 2; padding: 1 9 1 9; font-weight: bold; border: 0px #0099CC solid; }
#listamenu li { display: inline; }
#listamenu  { height: 20px; margin: 0 0 0 2; padding: 0; }
#listamenu a {
 padding: 2 10 2 10;
 width: 99.99%;
 display: block;
 background-color: #F7F3F7;
 border-bottom: 1px #A9C6E2 solid;
 text-align: left;
 text-decoration: none;
 color: #333333;
}
#listamenu a:hover  { background-color: #FFEFB0; text-decoration: underline; }
#listamenu a:visited { color: color: #333333; }
</style>

Montando o menu:

<div id="blokmenu">
 <span>:: Home</span>
 <ul id="listamenu">
  <li><a href="#">Link 01</a></li>
  <li><a href="#">Link 02</a></li>
  <li><a href="#">Link 03</a></li>
 </ul>
</div>
Perceba que dentro da tag SPAN o efeito dado nos outros itens não é aceionado, assim como a formatação é diferente também.
avatar
konan
Uplouder
Uplouder

Respeito às regras : Respeito as regras 100%

Mensagens : 59
Reputação : 0
Data de inscrição : 13/06/2011
Idade : 26

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum