Post sobre |Dicas blog, Pc windows

Menu muda de cor e link aumenta, on mouse

Esse menu é fácil, muda de cor e a fonte aumenta ao passar o mouse, os dois efeitos são opcionais assim como pode ser adicionado outros efeitos, esse é feito usando css mas vou deixar um link para outro menu usando DHTML(tags JavaScript)

Nesse segundo menu não requer o uso de um script, apenas as tags onmouseover, e poucas outras, todas elas vão diretamente no link o que o torna muito simples,(Bom para usar em poucos locais) só que tem um porém esse segundo menu que está em outro post não tem seus efeitos de mudança de cor se o navegador do usuário não tiver JavaScript ativado.
Menu muda de cor com DHTML
Aumenta link ao passar o mouse(rato) a:hover {font-weight:bold;} no css.
Aumenta bastante o link ao passar o mouse a:hover {font-weight:bolder;} no css.

Menu muda de cor com css

O menu usa estilo css e div mais se quiser pode ser feito com table apesar de estar meio ultrapassado e se for observar poucos sites e blogs novos as utilizam.
Vou começar com o style css que deve ir entre as tags <head></head> ou arquivo.css externo:

<head>
<style type="text/css">


.lateral {border:1px solid #ccc;
position:relative;
width:270px;
text-decoration:none;}

a.menu {border:1px solid #ccc;
position:relative;
font: 12px Arial, Helvetica, sans-serif;
color:blue;
text-decoration:none;
display:block;
background-color:#CCFFFF;}

a.menu:hover {font-weight:bolder;
color:red;
background-color:#CCC;
text-decoration:none;
}
</style>
</head>

Agora a parte que vai no <body>corpo</body> do html, no caso do blogspot é mais aconselhável inserir em>Layout(Design),>Elemento da página,>Adicionar gadget,>HTML/JavaScript(apesar de não usar JavaScript):
<div class="lateral">
<a class="menu" href="#">Link imagem blogger</a>
<a class="menu" href="#">Link favoritos</a>
<a class="menu" href="#">Menu dhtml</a>
</div>


Eu vou explicar algumas tags mais fáceis de mudar e que fazem modificações na apresentação do menu:
Uma explicação sobre o código css(não use esses):

DIV que "segura" os links do menu:

.lateral
{ pode ser mudado as configurações da DIV onde fica os liks width:270px;(largura) deve ser maior que o tamanho do link}

Configuração do link antes de passar o rato(mouse):

a.menu
{
font: 12px Arial, Helvetica, sans-serif;(tamanho e tipo de fonte do link)
color:blue;(cor azul da fonte do link, poderia ser #0066CC)
text-decoration:none;(não permite que o link fique com um traço embaixo...)
display:block; (vai fazer o link se estender lateralmente até a largura total da div)
background-color:#CCFFFF;(cor de fundo do link)}

Configuração do link ao passar o rato:

a.menu:hover
{font-weight:bolder;(faz a fonte "aumentar" muito, negrito)
color:red;(cor vermelha da fonte do link)
background-color:#CCC;(cor cinza, fundo do link)}

Para a fonte aumentar(negrito) um pouco font-weight:bold;
font: 14px Arial, Helvetica, sans-serif; (poderia ser adicionado, para aumentar o link ao passar o mouse uma fonte maior) no css para a.menu:hover{ }

Se for usar no blogspot e mexer no HTML faça uma cópia dele antes se vc não está muito habituado, o próprio css de um blog ou site pode influenciar, mas dificilmente da grande diferença, faça testes o pior que pode acontecer é aprender com algum erro.

Se usar folha de estilo externa e existir estilização css no seu html(in line)essa terá prioridade. Para saber tudo de css visite o site do maujor.
Agora vou colocar o css no HTML, fazer o teste no blog e ver como funciona.

Agora sem usar a div lateral na volta dos links, e, sem o display:block;(no css) que tem a função de ocupar espaço lateral total. Se tiver espaço os links do menu ficarão lado a lado:

CSS aumentar Fazer menu Css Subir

<a class="menu" href="#">Link imagem blogger</a>
<a class="menu" href="#">Link favoritos</a>
<a class="menu" href="#">Menu dhtml</a>

Um comentário:

Menu muda de cor e link aumenta, on mouse2008-06-13T00:12:00-03:00
  1. Muito bom, valeu pela dica. A maneira como você organizou os códigos ficou ótima, super fácil de entender...
    Visita meu site:
    Solviver Piscinas - www.solviverpiscinas.com.br

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!