Pesquisar este blog

Arquivo do blog

quarta-feira, 2 de setembro de 2009

Construção da lista de links

m "Elementos de Página" adicione um gadget HTML/JavaScript no local onde você quer instalar seu menu. Não coloque título. Copie o código abaixo e cole no box:






Modifique os ítens em VERMELHO colocando o endereço de seus links, os títulos e o nome para os links.

Em AZUL é onde você deverá nomear as "class" para depois colocarmos os estilos desejados em cada botão.

Estilos para imagens como background

Na Guia "Layout" em "Editar HTML" salve uma cópia de seu template clicando em "Baixar Modelo Completo".

Coloque os estilos a seguir ACIMA da tag ]]>

/* ----- Menu com Imagens ----- */
#menu {
margin: 10px 0 0 2px;
list-style: none;
font-weight: bold;
font-family: Helvetica, Arial;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
padding: 2px 0 3px 3px;
margin: 1px 12px 0 0;
line-height: 1.6em;
font-size: 0.9em;
}
#menu li a {
padding: 0;
text-decoration: none;
color: #000;
}
#menu li a:hover {
padding: 0;
text-decoration: underline;
color: #000;
}
#menu li span {
display: block;
float: left;
padding: 0 0px 0 22px;
}
#menu li span:hover {
filter:alpha(opacity=60);
-moz-opacity: 0.60;
opacity: 0.60;
}
#menu li span.inicio {
background: url('http://lh5.ggpht.com/_ecj_-xaKLE0/SXYyRTcttpI/AAAAAAAABNk/Fe5gIsGkFEg/house.png') no-repeat;
}
#menu li span.sobre {
background: url('http://lh3.ggpht.com/_ecj_-xaKLE0/SXYyRfTLIpI/AAAAAAAABNs/44inQex7h-s/page.png') no-repeat;
}
#menu li span.mapadosite {
background: url('http://lh4.ggpht.com/_ecj_-xaKLE0/SXYyRgvTnbI/AAAAAAAABN0/79FlEPWE6dU/map_go.png') no-repeat;
}
#menu li span.feed {
background: url('http://lh5.ggpht.com/_ecj_-xaKLE0/SXYyRvC4sAI/AAAAAAAABN8/4DDljjnqgPs/feed.png') no-repeat;
}
#menu li span.contato {
background: url('http://lh4.ggpht.com/_ecj_-xaKLE0/SXYyRvcTfAI/AAAAAAAABOE/Nl1PcJk3CoA/email.png') no-repeat;
}

Substitua onde está em VERMELHO pelo endereço de suas imagens. Onde está AZUL você deve repetir o nome das "class" exatamente da maneira que você nomeou ao construir a lista de links.

Visualize e se estiver tudo ok, salve seu template.


Aproveitando o mesmo raciocínio, iremos agora criar um menu em que, quando o mouse passa sobre o link, é mostrada uma borda inferior de cor diferente para cada botão.

A mesma lista de links, com as mesmas "class" foram aproveitadas.

Estilos para borda inferior em "hover"


/* ----- Menu com Bordas em Hover ----- */
#menu { margin: 10px 0 0 2px; }

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li { display: inline; }

#menu ul li a {
line-height: 20px;
color: red;
padding: 5px 15px 5px 15px;
margin: 0;
text-decoration: none;
font-weight: bold;
font-family: Arial, Sans-serif;
font-size: 13px;
font-variant: small-caps;
}
#menu ul li a:hover {
color: black;
text-decoration: none;
}
#menu li span {
display: block;
float: left;
padding: 0 0 0 0;
border-bottom: 3px solid transparent;
}

#menu li span.inicio:hover {
border-bottom: 3px solid red;
}
#menu li span.sobre:hover {
border-bottom: 3px solid blue;
}
#menu li span.mapadosite:hover {
border-bottom: 3px solid black;
}
#menu li span.feed:hover {
border-bottom: 3px solid green;
}
#menu li span.contato:hover {
border-bottom: 3px solid fuchsia;
}


Estes são alguns exemplos do que é possível fazer se nomearmos com "span class" os ítens de lista de um menu. Use sua criatividade, construa outros menus colocando background de cores diferentes, modificando fontes, cores de fontes, etc e deixe o link aqui nos comentários para que também possamos apreciar.

Nenhum comentário:

Postar um comentário