Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

Compartilhe e guarde

Enquete

Que tipo de conexão com a internet você utiliza?

Banda larga a cabo
3G
Via Rádio
Discada
Dedicado
Outra não especificada
Via Satélite

Home Código Fonte JavaScript - DHTML Diversos

Menu escondido que ao clicar se move para a direita

Com este script é possível criar um menu que fica escondido e só aparece a clicar em um link. O efeito é bem interessante e pode ser útil em algum momento.

Pode ser utilizado em sites que não queiram deixar o menu a vista e também em sites que não tenham espaços disponíveis para o menu.

<head>
<style>TD{font-family:verdana, arial,helvetica; font-size:8pt} BODY{background-color:#ffffff} A{color:Navy; text-decoration:none} A:hover{color:#000000} A:visited:{color:#000000} DIV{font-family:verdana,arial,helvetica; font-size:8pt;}</style><script>

ie=document.all?1:0
n=document.layers?1:0

lshow=60
var move=10;menuSpeed=40
var moveOnScroll=true

var tim;var ltop;function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
 this.state=1
 this.go=0
 this.width=n?this.css.document.width:eval(obj+'.offsetWidth')
 this.left=b_getleft
this.obj = obj + "Object";  eval(this.obj + "=this") 
}
function b_getleft(){
 var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft); return gleft;}

function moveMenu(){
 if(!oMenu.state){
  clearTimeout(tim)
  mIn() 
 }else{
  clearTimeout(tim)
  mOut()
 }
}
function mIn(){
 if(oMenu.left()>-oMenu.width+lshow){
  oMenu.go=1
  oMenu.css.left=oMenu.left()-move
  tim=setTimeout("mIn()",menuSpeed)
 }else{
  oMenu.go=0
  oMenu.state=1
 } 
}
function mOut(){
 if(oMenu.left()<0){
  oMenu.go=1
  oMenu.css.left=oMenu.left()+move
  tim=setTimeout("mOut()",menuSpeed)
 }else{
  oMenu.go=0
  oMenu.state=0
 } 
}

function checkScrolled(){
 if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop
 if(n) setTimeout('checkScrolled()',30)
}

function menuInit(){
 oMenu=new makeMenu('divMenu')
 scrolled=n?"window.pageYOffset":"document.body.scrollTop"
 oMenu.css.left=-oMenu.width+lshow
 ltop=(n)?oMenu.css.top:oMenu.css.pixelTop; oMenu.css.visibility='visible'
 if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();}
onload=menuInit;</script>
</head>
<body>
<div id=divMenu style="position:absolute; top:0; left:0; height:100; width:280; visibility:hidden"><a href="javascript://">Link1</a> 
            - <a href="javascript://">Link2</a> - <a href="javascript://">Link3</a> 
            - <a href="javascript://">Link4</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript://" onClick="moveMenu()">MENU</a></div>
</body>
</html>

<head>
<style>TD{font-family:verdana, arial,helvetica; font-size:8pt} BODY{background-color:#ffffff} A{color:Navy; text-decoration:none} A:hover{color:#000000} A:visited:{color:#000000} DIV{font-family:verdana,arial,helvetica; font-size:8pt;}</style><script>

ie=document.all?1:0
n=document.layers?1:0

lshow=60
var move=10;menuSpeed=40
var moveOnScroll=true

var tim;var ltop;function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
 this.state=1
 this.go=0
 this.width=n?this.css.document.width:eval(obj+'.offsetWidth')
 this.left=b_getleft
this.obj = obj + "Object";  eval(this.obj + "=this") 
}
function b_getleft(){
 var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft); return gleft;}

function moveMenu(){
 if(!oMenu.state){
  clearTimeout(tim)
  mIn() 
 }else{
  clearTimeout(tim)
  mOut()
 }
}
function mIn(){
 if(oMenu.left()>-oMenu.width+lshow){
  oMenu.go=1
  oMenu.css.left=oMenu.left()-move
  tim=setTimeout("mIn()",menuSpeed)
 }else{
  oMenu.go=0
  oMenu.state=1
 } 
}
function mOut(){
 if(oMenu.left()<0){
  oMenu.go=1
  oMenu.css.left=oMenu.left()+move
  tim=setTimeout("mOut()",menuSpeed)
 }else{
  oMenu.go=0
  oMenu.state=0
 } 
}

function checkScrolled(){
 if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop
 if(n) setTimeout('checkScrolled()',30)
}

function menuInit(){
 oMenu=new makeMenu('divMenu')
 scrolled=n?"window.pageYOffset":"document.body.scrollTop"
 oMenu.css.left=-oMenu.width+lshow
 ltop=(n)?oMenu.css.top:oMenu.css.pixelTop; oMenu.css.visibility='visible'
 if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();}
onload=menuInit;</script>
</head>
<body>
<div id=divMenu style="position:absolute; top:0; left:0; height:100; width:280; visibility:hidden"><a href="javascript://">Link1</a> 
            - <a href="javascript://">Link2</a> - <a href="javascript://">Link3</a> 
            - <a href="javascript://">Link4</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript://" onClick="moveMenu()">MENU</a></div>
</body>
</html>

Este código foi útil para você?

Nota	Comentário
1	denunciar deutilt comentou em 14/9/2009 naum deu certo naaao deu certo porradaria!

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Fabio Poletto

Tags

DHTML

Efeitos

JavaScript

Compartilhe e guarde

Enquete

Que tipo de conexão com a internet você utiliza?

Menu escondido que ao clicar se move para a direita

naum deu certo

Comente