CSS + Imagem = MENU (Parte 2/2)

Nesse artigo terminaremos a montagem do menu CSS com imagem.

CSS + Imagem = MENU (Parte 2/2)
Caros leitores, estrou de volta para terminarmos a montagem do nosso menu com css.
Essa é a última parte do artigo, onde montarem o estilo CSS para o menu.

Para quem não leu o artigo anterior, clique aqui para poder fazer a leitura. Quem já leu, prossiga com aleitura desse artigo.

Mãos à obra...

Digite os códigos abaixo para criar a sua folha de estilo. Explicarei cada bloco CSS, mas eles devem ser digitados um após o outro.

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
           }


O código acima formata o menu, tendo largura de 200px bordas de 1px e margens de 10px;

#menu li a {
height: 32px;
   voice-family: ""}"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}


O código acima formata o link de cada botão do menu, especificando principalmente a altura de cada botão, que é de 32px, como na figura criada e tira o sublinhado do link (text-decoration: none;).

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}


Esse código define o visual do menu após o botão ser clicado.

#menu li a:hover {
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}


Esse código define o visual do menu quando o botão do mouse é pressionado sobre ele.

#menu li a:active {
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}


Esse código define o visual do menu quando ativo.

Importante:

Repare a linha background: url(images/menu1.gif) 0 -64px; nos códigos acima, esta linha define a posião da imagem em relação ao menu.
No artigo anterior foi criada apenas uma imagem com os 3 estados do botão, e essa linha faz com que a imagem se mova, dando a sensação de ser uma imagem pra cada estado.

Veja um exemplo desse menu clicando aqui.

Espero que tenham gostado.

Qualquer dúvida enviem-me um e-mail ou postem no fórum do site, o melhor lugar para o esclarecimento de suas dúvidas.

Até a próxima...

Vídeo em destaque: Galaxy A52 REVIEW

Analisamos o Galaxy A52 versão de 4G, um smartphone muito bonito, com especificações excelentes que tornam ele um dos, senão o melhor custo benefício até R$ 2200.

Conteúdo relacionado

Samsung Galaxy A52 Review: Melhor custo benefício até R$ 2200?
Smartphones

Samsung Galaxy A52 Review: Melhor custo benefício até R$ 2200?

Analisamos o Galaxy A52 versão de 4G, um smartphone muito bonito, com especificações excelentes que tornam ele um dos, senão o melhor custo benefício até R$ 2200.

Chefe da Ericsson critica proibição sueca do 5G da Huawei
Mercado Tech

Chefe da Ericsson critica proibição sueca do 5G da Huawei

Borje Ekholm diz que a ação contra seu rival prejudica a livre concorrência e o comércio.

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão
Tecnologia

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão

Foi anunciado hoje pela Ericsson que a empresa realizou a compra da companhia de redes sem fio dos EUA Cradlepoint. Confira quais são as intenções por trás.

Claro inaugura a primeira rede 5G DDS do Brasil em parceria com a Ericsson
Tecnologia

Claro inaugura a primeira rede 5G DDS do Brasil em parceria com a Ericsson

Claro anuncia hoje a chegada da internet móvel 5G para os seus clientes. Agora você poderá navegar com uma conexão até 12 vezes mais rápida que o 4G!

EUA considera a aquisição da Ericsson na luta contra a Huawei
Mercado Tech

EUA considera a aquisição da Ericsson na luta contra a Huawei

Por mais difícil que seja para os EUA admitirem, o 5G da Huawei é um dos mais sofisticados do mundo. Além disso é mais barato e se não bastasse isso, a empresa também possui mais variedade de equipamentos em seu portfólio.

O Adobe Flash realmente vai morrer desta vez
Tecnologia

O Adobe Flash realmente vai morrer desta vez

Confira o que a Adobe declarou recentemente sobre a sua plataforma Flash, tão utilizada no passado, mas que agora está obsoleta.