Mostrando Codigo - Dhtml
Simple menu dinamico
Mostramos un menu dinamico desde la parte izquierda de la pagina
CODIGO
<!-- Codigo ofrecido por Tutores.org -->
<html>
<head>
<title>Tutores.org</title>
<style>
#divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
#divMenu a{text-decoration:none;}
#divMenu a:hover{color:red;}
</style>
<script language="JavaScript1.2">
/********************************************************************************
Escript Traducido y modificado para tutores.org
Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
Copyright (C) 1999 Thomas Brattli @ www.bratta.com
This script is made by and copyrighted to Thomas Brattli
This may be used freely as long as this msg is intact!
This script has been featured on http://www.dynamicdrive.com
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
ns6=document.getElementById&&!document.all?1:0
//Variables que pueden ser modificadas
//Cuanto de la capa queremos visible
lshow=60
//Cantidad de pixeles para el movimiento
var move=10;
//Velocidad en milisegundos
menuSpeed=40
//Aun se muestra si el visitante hace scroll en la pagina
var moveOnScroll=true
/********************************************************************************
No cambiar nada a partir de aqui
********************************************************************************/
//Definiendo variables
var ltop;
var tim=0;
//Object constructor
function makeMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
if (n) this.css=eval(nest+'document.'+obj)
else if (ns6) this.css=document.getElementById(obj).style
else if (ie) this.css=eval(obj+'.style')
this.state=1
this.go=0
if (n) this.width=this.css.document.width
else if (ns6) this.width=document.getElementById(obj).offsetWidth
else if (ie) this.width=eval(obj+'.offsetWidth')
this.left=b_getleft
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_getleft(){
if (n||ns6){ gleft=parseInt(this.css.left)}
else if (ie){ gleft=eval(this.css.pixelLeft)}
return gleft;
}
/********************************************************************************
Decidimos la accion para el movimiento del menu
********************************************************************************/
function moveMenu(){
if(!oMenu.state){
clearTimeout(tim)
mIn()
}else{
clearTimeout(tim)
mOut()
}
}
//Menu in
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
}
}
//Menu out
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
}
}
/********************************************************************************
Miramos si la pagina contiene scroll
********************************************************************************/
function checkScrolled(){
if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop)
if(n||ns6) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Esta parte produce el menu y movimiento
********************************************************************************/
function menuInit(){
oMenu=new makeMenu('divMenu')
if (n||ns6) scrolled="window.pageYOffset"
else if (ie) scrolled="document.body.scrollTop"
oMenu.css.left=-oMenu.width+lshow
if (n||ns6) ltop=oMenu.css.top
else if (ie) ltop=oMenu.css.pixelTop
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
//Iniciando menu
window.onload=menuInit;
</script>
</head>
<body>
<div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:F0F0F0">
<nobr>
<a href="http://www.google.com">Google</a> -
<a href="http://www.yahoo.com">Yahoo</a> -
<a href="http://www.altavista.com/">Altavista</a> -
<a href="javascript://" onclick="moveMenu()" style="background-color:gree;text-decoration:none">MENU</a>
</nobr>
</div>
</body>
</html>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Simple menu dinamico" href="http://www.tutores.org/codigo/384/" target="_blank">Simple menu dinamico</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Simple menu dinamico" href="http://www.tutores.org/codigo/384/" target="_blank">Simple menu dinamico</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
jormaz 24-09-2007 10:13:52
Hola la idea de este scrip es muy buena pero creo que no funciona muy bien. En FFox con la etiqueta
<!DOCTYPE HTML PUBLIC... sale desplagado.
Además sale en la parte de arriba(en IE FF y Opera) de la página cuando en el body al cargar el div "divmenu" pone
¿Alguno sabe de un ejemplo similar que deplegue un div desde la izquierda como hace este menú y que se pueda utilizar como columna de contenido extra que se pueda mostrar o ocultar con onclick?
<!DOCTYPE HTML PUBLIC... sale desplagado.
Además sale en la parte de arriba(en IE FF y Opera) de la página cuando en el body al cargar el div "divmenu" pone
<div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:F0F0F0">
...tendría que salir mas abajo no?¿Alguno sabe de un ejemplo similar que deplegue un div desde la izquierda como hace este menú y que se pueda utilizar como columna de contenido extra que se pueda mostrar o ocultar con onclick?
INSERTAR COMENTARIO