Menu CSS com rollover de imagem
Autor: Renato Sena | Publicado: 2011-03-09T08:21:00-08:00

Neste tutorial mostrarei como construir um menu com rollover de imagem usando CSS puro.O menu a construir é este abaixo mostrado. Passe o mouse sobre os links para ver o efeito.Como você já deve ter observado o menu tem as seguintes características:1. é constituído por seis links;2. os links têm uma imagem de fundo e bordas;3. no estado mouseover - quando passa-se o mouse sobre o link - há uma troca de imagem de fundo (rollover);4. A largura deste menu é igual a 180px.As imagens de fundoAbaixo as imagens de fundo que utilizei para obter o efeito rollover.   Aqui uma dica: ao construir suas imagens de fundo para usar em elementos      por CSS, tenha em mente que o usuário poderá ter configurado      seu browser para exibir tamanhos de letras grandes ou mesmo outras definições      que podem vir a afetar as dimensões de projeto do elemento HTML      com imagem de fundo.   Assim, dimensione suas imagens de fundo maiores que a caixa do bloco      do elemento HTML para fornecer um espaço extra de imagem e evitar      que a imagem se repita em um fundo maior que o de projeto!   Usaremos imagens com 280 x 55 bem exageradas de propósito, como      mostradas a seguir:fundo_1.gif - imagem no estado do link em repousofundo_2.gif - imagem no estado do link com o mouse      em cimaSe você quiser treinar com estas imagens salve-as para seu HD. Clique botão      esquerdo sobre a imagem e "Salvar Imagem Como..."   O elemento HTML (tag) para construção de menus:Teoricamente qualquer elemento HTML (tag) capaz de descrever texto (p, h1,      h2, ..., ul, ol, etc...) poderá ser estilizado para construção      de menus. No entanto, dentre todos eles, o elemento que maior flexibilidade,      recursos, e facilidades propiciam a estilização é sem      dúvida o elemento ul que define as listas      não ordenadas nos documentos HTML.   Vantagens do uso do elemento ul   O uso do elemento ul  na criação      dos menus com CSS tem as principais vantagens listadas abaixo:    * no código HTML do menu você tem quatro elementos aninhados para aplicar estilos (quais sejam: div - ul - li e a ) - isto aumenta a flexibilidade para estilizar;* os critérios de acessibilidade ao seu documento são mais consistentes - na visualização do documento sem a aplicação da folha de estilo o menu será exibido de uma forma bastante conveniente;* com uso de uma só propriedade CSS (a propriedade display) você altera o layout de menu (em disposição vertical) para barra de navegação (em disposição horizontal);* são facilmente expansíveis - acréscimo de itens no futuro, isto é novos links.O código HTML típico para um menu    A seguir mostro o código HTML típico para a criação      de um menu com 06 (seis) links (adiante você verá que este      código é válido para qualquer número de      links, podendo ser adaptado a qualquer necessidade atual e previsão      de expansão futura - tamanho do menu). Este código servirá      de base para desenvolvermos todo o estudo proposto neste tutorial.&lt;ul&gt;&lt;li&gt;Home Page&lt;/li&gt;&lt;li&gt;Portfolio&lt;/li&gt;&lt;li&gt;Equipe tecnica&lt;/li&gt;&lt;li&gt;Parceiros&lt;/li&gt;&lt;li&gt;Album de fotos&lt;/li&gt;&lt;li&gt;Fale conosco&lt;/li&gt;&lt;/ul&gt;O código HTML acima é renderizado no browser e apresentado da tela conforme mostrado abaixo:Home PagePortfolioEquipe tecnicaParceirosAlbum de fotosFale conoscoLargura, portabilidade e especificidade do menuPara assegurar ao projetista, total controle sobre o posicionamento da lista que contém o menu bem como garantirmos que as regras CSS para os elementos HTML que compõem o menu (lista ul eli e link a ) não afetem as listas e links porventura existentes em outros locais do documento, vamos enclausurar o nosso menu em uma dive declarar as regras CSS para esta div. Chamemos esta div de: #menuE a primeira regra CSS para nosso menu:#menu {position: absolute;left: ## px; /*posição à direita*/top: ## px; /*posição abaixo*/width: 180px;}Nota: Esta regra CSS dá ao menu a portabilidade,      isto significa que definindo os valores left e top, você coloca o menu exatamente      onde quiser no documento e com a precisão de pixel!   Aqui você define também uma largura para a div. No caso, adotei igual      a largura do menu que esta contido na div.   Posicionamento do menu   Observe no esquema mostrado abaixo a chave para posicionar o menu no documento:As coordenadas para position:absolute tem origem no canto superior esquerdo.TOP: distância para baixo;LEFT: distância para a direita.Caso você queira inserir o menu dentro uma célula de tabela ou posicioná-lo relative ou float, basta você alterar as propriedades na regra acima.Os marcadores de listasComo você observou no item O código HTML típico para um menu, o browser renderizou nossa lista com um "marcador de lista" (uma bolinha preta na frente de cada item da lista) e um recuo para o texto.Precisamos criar uma regra CSS para eliminar o marcador de lista e o recuo do texto.A propriedade CSS que controla o marcador das listas é: list-style-typeNão lembra? Se você não está seguro com as propriedades CSS das listas refresque sua memória lendo este tutorial.Para remover o recuo do texto há um detalhe. Alguns browsers usam a propriedade margin e outros a propriedade padding para o recuo das listas!(Ainda vai chegar o dia em que os fabricantes seguirão as web standards e todos usaremos e projetaremos seguindo uma só e universal norma e seremos mais felizes. E, os malditos bugs morrerão todos!)Conclusão para nosso menu:as regras CSS para ul são list-style-type:none; margin:0px; padding:0px;#menu ul {list-style-type: none; /*remove o marcador*/margin: 0; /*remove o recuo IE e Opera*/padding: 0; /*remove o recuo Mozilla e NN*/font: bold 16px arial, helvetica, sans-serif;}Nota : Nesta regra CSS também definimos      as características das letras que escolhemos para o menu.   Com mais esta regra CSS nossa lista será renderizada no browser      conforme mostrado abaixo: Home PagePortfolioEquipe tecnicaParceirosAlbum de fotosFale conosco   Estilizando o elemento &lt;li&gt;   O elemento li define cada uma das linhas      que contém os links.   A regra CSS adicionada a este elemento controla a distância entre      os links pela definição da propriedade margin.   Separamos os links na vertical definindo um margem inferior, conforme      mostrado abaixo:   #menu li { margin-bottom:1px; }   Estilizando o elemento &lt;a&gt;   Dentro de li estão inseridos      os elementos inline a;:   E aqui mais uma dica: Para fazer com que toda a área da caixa      do link seja "clicável" devemos declarar display:block;      Se omitirmos esta declaração, somente será      "clicável" as letras que definem o link!   É aqui que definimos também todo o "visual" da área      "clicável". Assim cores, bordas, imagens de fundo, espaçamentos      (padding) e efeitos visuais em geral são aqui definidos.   A regra CSS para nosso menu é a abaixo mostrada:#menu a {display: block;padding: 1px 0 1px 25px;border: 1px solid #000000;width: 180px;background-color: #339966;color: #FFFFFF;text-decoration: none;background-image: url(caminho/fundo_1.gif);voice-family: "\"}\"";  /*Box Model Hack*/voice-family:inherit;width:153px;}body>#menu a {width:153px;}Notas:1-) Cálculos do Box Model HackHack= Largura - (padding-left + padding-right +border-left + border-right)Hack= 180 px - (25 px + 0px +1 px + 1px) = 180 px - 27 px = 153px2-) Observe que um padding esquerdo de 25px foi definido com a finalidade      de se colocar o texto descritivo do link, a direita da figura da bolinha esquerda      que tem no desenho do fundo!   Estilizando o elemento &lt;a&gt;para o estado mouse sobre Finalmente a regra CSS para fazer o efeito rollover no link!Aqui "trocamos" o fundo (cor e imagem) e tambem a cor do texto      descritivo do link para contrastar com o novo fundo.    Não há efeito de troca na borda! Se você quiser quiser trocar      a borda no rollover, declare a nova borda nesta regra. Se não quiser,      pode omitir a declaração nesta regra que a borda será      herdada.   Estilizando a:visited e a:active   Deixamos a título de exercício a estilização      dos estados "link visitado" e "link ativo".   Mas atenção: não esqueça que a ordem das declarações      dos estados dos links determinam o efeito cascata. Esqueceu isto?    Palavras finais   Este tutorial assim como os demais constantes do meu site visam a através      de um exemplo prático mostrar as técnicas gerais de uso das      CSS.   Estude! analise! faça mudanças nos códigos! pesquise!      experimente! Não se limite a copiar e colar e você rapidinho vai descobrir      as maravilhas das CSS e tornar-se um expert. Boa Sorte! #menu a:hover {border: 1px solid #000000;background-color:#FFFF99;background-image: url(caminho/fundo_2.gif);color:#000000;}