Este menu se comporta da seguinte maneira:
Ao carregar a página, aparece no canto superior esquerdo uma pequena imagem que, quando clicada, faz surgir um menu no formato de barra horizontal. Quando se clica na imagem novamente ele retorna à posição original, escondido.
Instruções:
Mantenha os arquivos sempre na mesma pasta da página que irá utilizar o menu, tanto as imagens quanto o arquivo de scripts (scriptMenu.js).
Para usar o menu, chame a função drawMenu(). O modo mais prático é colocar no evento onLoad da tag BODY, como na página de exemplo.
Os parâmetros da função drawMenu() são:
showMenu.png: é a imagem que aparece quando o menu é exibido. Você pode trocar.
hideMenu.png: é a imagem mostrada quando o menu está escondido. Também pode ser trocada.
Programas: é o texto que aparece quando você coloca o mouse em cima da imagem. Pode ser trocado.
Programas|Configurações|Fechar sessão: são as opções do menu. No exemplo é apenas texo, mas pode ser qualquer coisa, imagens, links, botões, imagens e links, etc.
// JavaScript Document
function clickMenu(hideMenu,showMenu){
var menu=document.getElementById('hideMenu');
var img=document.getElementById('imgMenu');
if(menu.style.visibility=='visible'){
menu.style.visibility='hidden';
menu.style.display='none';
img.src=showMenu;
}else{
menu.style.visibility='visible';
menu.style.display='inline';
img.src=hideMenu;
}
}
function drawMenu(showMenu,hideMenu,labelMenu,optionMenu){
var styleMenu='';
document.body.innerHTML+=styleMenu;
var Menu=''+optionMenu+'
';
var newBody;
var Body=document.body.innerHTML;
newBody=Menu+Body;
document.body.innerHTML=newBody;
}
