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=''; var newBody; var Body=document.body.innerHTML; newBody=Menu+Body; document.body.innerHTML=newBody; }'+optionMenu+'