Boa tarde galera ligada no blogao!!
Tá aí uma dica bem legal e fácil para você criar os menus do seu site ou do seu cliente...
É o efeiton de rolloverr com imagens, onde a imagem fica no seu estado normal e quando passado o mouse ela muda de cor etc...
Tutorial bem legal retirado do site Criar Web.
O rollover (iluminação ou mudança de cor ao passar o mouse por cima) é um feito muito simples, porém, pode dar idéias para dar maior dinamismo ao nosso site, sem que isto afete a complexidade do código.
Ademais, de passo, vamos responder uma pergunta habitual: como fazer para que os links ocupem todo o espaço da célula ou camada onde estão situados? Ou dito de outra forma: como fazer para que o link se mostre com todo o espaço disponível dentro do container no que está?
O que desejamos é que o lugar onde colocamos o link se comporte como o próprio link, assim, ao passar o mouse pelo container onde estiver situado o link (não necessariamente sobre o texto do link), se realize o efeito de iluminação.
Para realizar este efeito foi criado um código HTML como o seguinte:
<div class=navegador>
<p class=navlink><a href="#">Link 1</a></p>
<p class=navlink><a href="#">Link legal</a></p>
<p class=navlink><a href="#">Outras coisas</a></p>
</div>
Temos uma camada com estilo "class=navegador" e dentro desta, três parágrafos com estilo "class=navlink". A classe navegador conterá estilos gerais para toda a barra de navegação e os parágrafos, com classe navlink, conterão os estilos de cada linha do navegador.
Vimos que o HTML é bastante simples. Agora só temos que aplicar uns estilos bonitos para realizar o efeito buscado.
Estilos CSS
Comecemos pela camada geral, com classe "navegador", onde vamos utilizar uma declaração de estilos como esta:
.navegador{
margin-left: 39%;
margin-right: 42%;
}
Simplesmente, estamos lhe indicando umas margens, para que se situe onde nós quisermos, que é mais ou menos no centro da janela do navegador.
Agora vejamos a declaração do estilo da classe navlink, que é o estilo que damos a cada linha de link da barra de navegação.
.navlink {
font-weight: bold;
border: 1px solid #999999;
margin:3 0 3 0px;
padding: 2px;
}
Simplesmente indicamos em negrito, uma borda de 1 pixel, assim como uma margem e um padding.
Agora, para cada link definimos dois estilos. Um para os links em geral e outro para os links "hover", que são os que têm o mouse encima deles. Deste modo, os links sempre serão vistos de um mesmo modo e quando se colocar o mouse encima de um deles se ativará o estilo definido em hover.
.navlink a {
background-image: url("nav-fundo2.gif");
color: #666666;
text-decoration: none;
display: block;
width: 100%;
}
.navlink a:hover {
background-image: url("nav-fundo.gif");
color: #ffffcc;
}
No primeiro caso (.navlink a) se indica o estilo para os links em geral. Simplesmente definimos uma imagem de fundo "nav-fundo2.gif" para os links, uma cor para o texto do link, que não apareçam sublinhados e, o mais importante, que se comportem como um bloco, que se indica com o atributo display: block;
Os links, ao se comportarem como um bloco se produzirá o efeito que estávamos buscando: que não precisa se posicionar sobre o texto do link para que mude o estilo, simplesmente o fará ao posicionar-se no container onde estão situados. Com isso, também conseguimos que o estilo dos links se transfira a todo o container. Além disso, também definimos a largura dos links a 100%, para certificarmos que ocupem todo o espaço do container onde estão situados.
No segundo caso (.navlink a:hover) simplesmente definimos um estilo distinto, utilizando uma imagem de fundo e uma cor diferente para os links. A imagem chamada "nav-fundo.gif" se mostrará como fundo do espaço onde está colocado o link. Só se modificará o estilo do link sobre o que tivermos colocado o mouse e não o dos outros links da barra de navegação.
Com isto já está feito tudo. É realmente simples. Foi provado no Internet Explorer e no Mozilla Firefox.
Agora queria comentar que também pode-se dar uma largura definida à camada onde estão todos os links, <div class=navegador>, utilizando o atributo width. Isto dá problemas no Internet Explorer na hora dos links se comportarem como um bloco, com o qual só se ativará se colocarmos o mouse no texto do link. A solução para Internet Explorer, é justamente atribuir o atributo width: 100% aos links, na classe "navlink". Este atributo width: 100% para Firefox é indiferente, com o qual o problema fica resolvido para os navegadores mais comuns.
Para finalizar, podemos ver o exemplo em uma página a parte.
0 comentários:
Postar um comentário