Publicentral.com - promocion de paginas webpromocion de paginas web
Mostrando Codigo - Dhtml
Code

Dhtml - Simple menu dinamico

Códigos Dhtml

Mostramos un menu dinamico desde la parte izquierda de la pagina
Visitas: 38,024 - 16/04/2003
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


<!-- Codigo ofrecido por Tutores.org -->

  1. <title>Tutores.org</title>
  2.  
  3. #divMenu {font-family:arial,helvetica; font-size:12pt; font-weight:bold}
  4. #divMenu a{text-decoration:none;}
  5. #divMenu a:hover{color:red;}
  6. <script language="JavaScript1.2">
  7. /********************************************************************************
  8. Escript Traducido y modificado para tutores.org
  9. Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com
  10. Copyright (C) 1999 Thomas Brattli @ www.bratta.com
  11. This script is made by and copyrighted to Thomas Brattli
  12. This may be used freely as long as this msg is intact!
  13. This script has been featured on http://www.dynamicdrive.com
  14. ********************************************************************************
  15. Browsercheck:*/
  16. ie=document.all?1:0
  17. n=document.layers?1:0
  18. ns6=document.getElementById&&!document.all?1:0
  19.  
  20. //Variables que pueden ser modificadas
  21.  
  22. //Cuanto de la capa queremos visible
  23. lshow=60
  24.  
  25. //Cantidad de pixeles para el movimiento
  26. var move=10;
  27.  
  28. //Velocidad en milisegundos
  29. menuSpeed=40
  30.  
  31. //Aun se muestra si el visitante hace scroll en la pagina
  32. var moveOnScroll=true
  33.  
  34. /********************************************************************************
  35. No cambiar nada a partir de aqui
  36. ********************************************************************************/
  37. //Definiendo variables
  38.  
  39. var ltop;
  40. var tim=0;
  41.  
  42. //Object constructor
  43. function makeMenu(obj,nest){
  44.     nest=(!nest) ? '':'document.'+nest+'.'
  45.     if (n) this.css=eval(nest+'document.'+obj)
  46.     else if (ns6) this.css=document.getElementById(obj).style
  47.     else if (ie) this.css=eval(obj+'.style')                       
  48.     this.state=1
  49.     this.go=0
  50.         if (n) this.width=this.css.document.width
  51.         else if (ns6) this.width=document.getElementById(obj).offsetWidth
  52.         else if (ie) this.width=eval(obj+'.offsetWidth')
  53.     this.left=b_getleft
  54.     this.obj = obj + "Object";  eval(this.obj + "=this")   
  55. }
  56. //Get's the top position.
  57. function b_getleft(){
  58.         if (n||ns6){ gleft=parseInt(this.css.left)}
  59.         else if (ie){ gleft=eval(this.css.pixelLeft)}
  60.     return gleft;
  61. }
  62. /********************************************************************************
  63. Decidimos la accion para el movimiento del menu
  64. ********************************************************************************/
  65. function moveMenu(){
  66.     if(!oMenu.state){
  67.         clearTimeout(tim)
  68.         mIn()  
  69.     }else{
  70.         clearTimeout(tim)
  71.         mOut()
  72.     }
  73. }
  74. //Menu in
  75. function mIn(){
  76.     if(oMenu.left()>-oMenu.width+lshow){
  77.         oMenu.go=1
  78.         oMenu.css.left=oMenu.left()-move
  79.         tim=setTimeout("mIn()",menuSpeed)
  80.     }else{
  81.         oMenu.go=0
  82.         oMenu.state=1
  83.     }  
  84. }
  85. //Menu out
  86. function mOut(){
  87.     if(oMenu.left()<0){
  88.         oMenu.go=1
  89.         oMenu.css.left=oMenu.left()+move
  90.         tim=setTimeout("mOut()",menuSpeed)
  91.     }else{
  92.         oMenu.go=0
  93.         oMenu.state=0
  94.     }  
  95. }
  96. /********************************************************************************
  97. Miramos si la pagina contiene scroll
  98. ********************************************************************************/
  99. function checkScrolled(){
  100.     if(!oMenu.go) oMenu.css.top=eval(scrolled)+parseInt(ltop)
  101.     if(n||ns6) setTimeout('checkScrolled()',30)
  102. }
  103. /********************************************************************************
  104. Esta parte produce el menu y movimiento
  105. ********************************************************************************/
  106. function menuInit(){
  107.     oMenu=new makeMenu('divMenu')
  108.        if (n||ns6) scrolled="window.pageYOffset"
  109.        else if (ie) scrolled="document.body.scrollTop"
  110.     oMenu.css.left=-oMenu.width+lshow
  111.        if (n||ns6) ltop=oMenu.css.top
  112.        else if (ie) ltop=oMenu.css.pixelTop
  113.     oMenu.css.visibility='visible'
  114.     if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
  115. }
  116.  
  117.  
  118. //Iniciando menu
  119. window.onload=menuInit;
  120. </head>
  121.  
  122. <div id="divMenu" style="position:absolute; top:250; left:30; visibility:hidden; background-color:F0F0F0">
  123. <nobr>
  124.     <a href="http://www.google.com">Google</a> -
  125.     <a href="http://www.yahoo.com">Yahoo</a> -
  126.     <a href="http://www.altavista.com/">Altavista</a> -
  127.     <a href="javascript://" onclick="moveMenu()" style="background-color:gree;text-decoration:none">MENU</a>
  128. </nobr>
  129. </div>
  130. </body>
  131. </html>
  132.  



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 -->
COMENTARIOS
Comentario usuario
24-09-2007 10:13:52
5 5
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
<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

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.