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:




  

Segunda, 21 de Abril de 2014




Leitura recomendada

ASP.NET MVC em Ação

Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Construindo Aplicativos Android com HTML, CSS e JavaScript: Criando Aplicativos Nativos com Ferramentas Baseadas nos Padrões Web


Capa do livro
PostgreSQL - Guia do Programador


Capa do livro
Dominando NetBeans: Construa aplicativos Java tanto para Desktop, como para Web, trabalhando com uma das ferramentas mais usadas no mundo





Hostnet

IMD