Menu lateral dinâmico

Sempre gostei bastante de ter a possibilidade de ter as coisas bem arrumadas no blog e em busca de um menu dinâmico para alguns links, descobri como instalar um menu lateral dinâmico, como podem ver neste blog do lado esquerdo deste blog.

Para instalar este menu é preciso fazer o seguinte:

Copiar o código abaixo e cola-lo num programa de edição (eu uso o Bloco de Notas).

<!--
/*
Configure menu styles below
*/
YOffset=150; // no quotes!!
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=largura do menu; // Multiplo de 10, sem aspas!!
menuCols=2;
hdrFontFamily="tipo de letra dos titulos";
hdrFontColor="cor da letra dos titulos";
hdrBGColor="cor de fundo dos titulos";
hdrAlign="alinhamento horizontal dos titulos";
hdrVAlign="alinhamento vertical dos titulos";
hdrHeight="altura das colunas dos links";
linkFontFamily="tipo de letra dos links";
linkFontSize="tamanho da letra dos links";
linkBGColor="cor de fundo das colunas dos links";
linkOverBGColor="cor de fundo dos links ao passar o rato";
linkTarget="modo como o link abre";
linkAlign="alinhamento horizontal do link";
barBGColor="cor de fundo da barra que fica sempre visivel";
barFontFamily="tipo de letra da barra";
barFontSize="tamanho da letra na barra";
barFontColor="cor da letra na barra";
barVAlign="alinhamento vertical do texto da barra";
barWidth=largura da barra; // sem aspas!!
barText="Texto a apresentar na barra";
///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //cria titulo
ssmItems[1]=["Nome 1", "endereço 1", ""]
ssmItems[2]=["Nome 2", "endereço 2", ""]
ssmItems[3]=["Nome 3", "endereço 3", ""]

buildMenu();
//-->

Nota: tudo o que está a vermelho deve ser configurado!
Parametros:

• Para o tipo de letra podem usar qualquer uma. (Arial, Verdana, Georgia, etc.)
• Para o tamanho da letra podem usar algarismos. (1, 2, etc.)
• Para as cores podem usar qualquer código da tabela que podem encontrar ao fundo da coluna lateral deste blog antecedido por # (#FF0000 para o vermelho, por exemplo)
• Para os alinhamentos horizontais podem usar left, center ou right
• Para os alinhamentos verticais  podem usar top, center ou bottom
• Para as larguras e alturas devem usar valores numéricos (correspondentes a pixel)
• Para o modo como os links abrem podem usar _top (para abrir na mesma janela), ou _blank (para abrir numa janela nova)

Na parte inferior, onde podem ver "Menu" podem substituir pelo nome que desejarem dar ao cabeçalho dos links.
Para criar mais que uma categoria de links podem adicionar mais item seguindo a sequencia anterior. Deste modo:

ssmItems[0]=["Menu"] //cria titulo
ssmItems[1]=["Nome 1", "endereço 1", ""]
ssmItems[2]=["Nome 2", "endereço 2", ""]
ssmItems[3]=["Nome 3", "endereço 3", ""]
ssmItems[4]=["Menu 2"] //cria titulo 2
ssmItems[5]=["Nome 4", "endereço 4", ""]
ssmItems[6]=["Nome 5", "endereço 5", ""]
ssmItems[7]=["Nome 6", "endereço 6", ""]

Após ter tudo configurado, é preciso gravar o ficheiro e para isso devem escolher o nome ssmItems.js

No link abaixo podem baixar um segundo ficheiro necessário para o menu funcionar.
Baixar ficheiro (clicar com o botão direito do rato e escolher "Guardar ligação como..."

Depois de ter os dois ficheiros, é preciso aloja-los num local WEB (se precisarem de ajuda para isso podem pedir sugestões)

Para finalizar, copiem o códgo abaixo

<style type='text/css'>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>
<SCRIPT SRC='ENDEREÇO DE ALOJAMENTO/ssm.js' language='JavaScript1.2'>

</SCRIPT>

<SCRIPT SRC='ENDEREÇO DE ALOJAMENTO/ssmItems.js' language='JavaScript1.2'/>

substituir as partes a vermelho pelo endereço dos vosso ficheiros alojados e colar tudo logo após a tag <head> do código fonte do vosso blog.

O efeito é o que podem ver aqui.