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 >
<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>
Muito bom, valeu pela dica. A maneira como você organizou os códigos ficou ótima, super fácil de entender...
ResponderExcluirVisita meu site:
Solviver Piscinas - www.solviverpiscinas.com.br