Menu com mudança de cor (mouse over)


Autor/fonte: Márcio Lima
E-mail/Url: http://www.freecode.com.br/drartigos/artigo.php?cdart=148&id=3
Tags: [ menu ]



Digg del.icio.us

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ódigo CSS:

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




Enviado por xKuRt em 03/07/2009 às 08:06


Itens relacionados

Como construir um menu horizontal em tableless
Construção de menus com regras CSS

Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Quarta, 30 de Julho de 2014




Top 5 membros

Últimos membros online

  • 1em 30/07 às 22:10
  • xKuRtem 30/07 às 14:31
  • JCanecaem 26/07 às 19:02

Últimos membros cadastrados



Capa do livro
Java Para Iniciantes


Capa do livro
Invasão de Redes - Ataques e Defesas


Capa do livro
Laboratórios De Tecnologias Cisco Em Infraestrutura De Redes





Hostnet

IMD