Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/05/2012, 04:35
Avatar de 60NZ4
60NZ4
 
Fecha de Ingreso: mayo-2012
Ubicación: 404 Not found
Mensajes: 112
Antigüedad: 12 años, 7 meses
Puntos: 2
Menu Desplegable hacia abajo con js

buenas amigos, la verdad se 0 de javascript, pero indagando en el tema, he pillado un código muy bueno para un menú desplegable,el efecto que quiero conseguir es muy similar al que hay en el meno de inicio en esta pagina por ejemplo, bueno el caso es que el código que me he descargado, me pone el menú hacia la derecha,yo quiero que se despliegue hacia abajo, aqui os dejo el codigo, porfavor decirme donde debo retocar para desplegar hacia abajo, no tengo tiempo ahora para aprender javascript jeje, aunque lo tengo en mis futuros plantes =)

Aqui el codigo, tal cual
Código Javascript:
Ver original
  1. /************************************************************************************************************
  2.     (C) www.dhtmlgoodies.com, November 2005
  3.    
  4.     This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.  
  5.    
  6.     Terms of use:
  7.     You are free to use this script as long as the copyright message is kept intact. However, you may not
  8.     redistribute, sell or repost it without our permission.
  9.    
  10.     Thank you!
  11.    
  12.     www.dhtmlgoodies.com
  13.     Alf Magne Kalleland
  14.    
  15.     ************************************************************************************************************/
  16.  
  17.     var timeBeforeAutoHide = 700;   // Microseconds to wait before auto hiding menu(1000 = 1 second)
  18.     var slideSpeed_out = 10;    // Steps to move sub menu at a time ( higher = faster)
  19.     var slideSpeed_in = 10;
  20.        
  21.    
  22.     var slideTimeout_out = 25;  // Microseconds between slide steps ( lower = faster)
  23.     var slideTimeout_in = 10;   // Microseconds between slide steps ( lower = faster)
  24.    
  25.     var showSubOnMouseOver = true;  // false = show sub menu on click, true = show sub menu on mouse over
  26.     var fixedSubMenuWidth = false;  // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
  27.    
  28.     var xOffsetSubMenu = 0;     // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
  29.    
  30.     var slideDirection = 'right';   // Slide to left or right ?
  31.    
  32.     /* Don't change anything below here */
  33.    
  34.     var activeSubMenuId = false;
  35.     var activeMainMenuItem = false;
  36.     var currentZIndex = 1000;      
  37.     var autoHideTimer = 0;
  38.     var submenuObjArray = new Array();
  39.     var okToSlideInSub = new Array();
  40.     var subPositioned = new Array();
  41.    
  42.  
  43.     function stopAutoHide()
  44.     {
  45.         autoHideTimer = -1;
  46.     }
  47.    
  48.     function initAutoHide()
  49.     {
  50.         autoHideTimer = 0;
  51.         if(autoHideTimer>=0)autoHide();
  52.     }
  53.    
  54.     function autoHide()
  55.     {
  56.        
  57.         if(autoHideTimer>timeBeforeAutoHide)
  58.         {
  59.            
  60.             if(activeMainMenuItem){
  61.                 activeMainMenuItem.className='';
  62.                 activeMainMenuItem = false;
  63.             }
  64.            
  65.             if(activeSubMenuId){
  66.                 var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
  67.                 showSub();
  68.             }
  69.         }else{
  70.             if(autoHideTimer>=0){
  71.                 autoHideTimer+=50;
  72.                 setTimeout('autoHide()',50);
  73.             }
  74.         }
  75.     }  
  76.    
  77.     function getTopPos(inputObj)
  78.     {      
  79.       var returnValue = inputObj.offsetTop;
  80.       while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
  81.       return returnValue;
  82.     }
  83.    
  84.     function getLeftPos(inputObj)
  85.     {
  86.       var returnValue = inputObj.offsetLeft;
  87.       while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
  88.       return returnValue;
  89.     }
  90.    
  91.     function showSub()
  92.     {
  93.         var subObj = false;
  94.         if(this && this.tagName){
  95.             var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
  96.             okToSlideInSub[numericId] = false;
  97.             var subObj = document.getElementById('subMenuDiv' + numericId);
  98.             if(activeMainMenuItem)activeMainMenuItem.className='';
  99.             if(subObj){
  100.                 if(!subPositioned[numericId]){
  101.                     if(slideDirection=='right'){
  102.                         subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
  103.                     }else{
  104.                         subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
  105.                        
  106.                     }
  107.                     submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
  108.                     subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
  109.                     subPositioned[numericId] = true;
  110.                 }              
  111.                 subObj.style.visibility = 'visible';
  112.                 subObj.style.zIndex = currentZIndex;
  113.                 currentZIndex++;   
  114.                 this.className='activeMainMenuItem';
  115.                 activeMainMenuItem = this;
  116.             }
  117.         }else{
  118.             var numericId = activeSubMenuId;
  119.         }
  120.         if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
  121.         if(numericId!=activeSubMenuId && this && subObj){
  122.             subObj.style.width = '0px';
  123.             slideMenu(numericId,slideSpeed_out);
  124.             activeSubMenuId = numericId;
  125.         }else{
  126.             if(numericId!=activeSubMenuId)activeSubMenuId = false;
  127.         }
  128.         if(showSubOnMouseOver)stopAutoHide();
  129.     }
  130.    
  131.     function slideMenu(menuIndex,speed){
  132.         var obj = submenuObjArray[menuIndex]['divObj'];
  133.         var obj2 = submenuObjArray[menuIndex]['ulObj'];
  134.         var width = obj.offsetWidth + speed;
  135.         if(speed<0){
  136.             if(width<0)width = 0;
  137.             obj.style.width = width + 'px';
  138.             if(slideDirection=='left'){
  139.                 obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
  140.                 obj2.style.left = '0px';
  141.             }else{
  142.                 obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
  143.             }
  144.             if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
  145.                 obj.style.visibility = 'hidden';
  146.                 obj.style.width = '0px';
  147.                 if(activeSubMenuId==menuIndex)activeSubMenuId=false;
  148.             }
  149.            
  150.         }else{
  151.             if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
  152.             if(slideDirection=='left'){
  153.                 obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
  154.                 obj2.style.left = '0px';
  155.             }else{
  156.                 obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
  157.             }      
  158.            
  159.             obj.style.width = width + 'px';
  160.             if(width<submenuObjArray[menuIndex]['width']){
  161.                 setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
  162.             }else{
  163.                 okToSlideInSub[menuIndex] = true;
  164.             }
  165.         }
  166.     }
  167.     function resetPosition()
  168.     {
  169.         subPositioned.length = 0;
  170.     }
  171.            
  172.     function initLeftMenu()
  173.     {
  174.         var menuObj = document.getElementById('dhtmlgoodies_menu');
  175.         var mainMenuItemArray = new Array();
  176.        
  177.         var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
  178.         while(mainMenuItem){
  179.             if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
  180.                 mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
  181.                 var aTag = mainMenuItem.getElementsByTagName('A')[0];
  182.                 if(showSubOnMouseOver)
  183.                     aTag.onmouseover = showSub;
  184.                 else
  185.                     aTag.onclick = showSub;
  186.             }
  187.             mainMenuItem = mainMenuItem.nextSibling;
  188.         }      
  189.        
  190.         var lis = menuObj.getElementsByTagName('A');
  191.         for(var no=0;no<lis.length;no++){
  192.             if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
  193.             lis[no].onmouseout = initAutoHide;
  194.             lis[no].onmousemove = stopAutoHide;
  195.         }
  196.                
  197.         for(var no=0;no<mainMenuItemArray.length;no++){
  198.             var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
  199.             if(sub){
  200.                 mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
  201.                 var div = document.createElement('DIV');
  202.                 div.className='dhtmlgoodies_subMenu';
  203.                 document.body.appendChild(div);
  204.                 div.appendChild(sub);
  205.                 if(slideDirection=='right'){
  206.                     div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
  207.                 }else{
  208.                     div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
  209.                 }
  210.                 div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
  211.                 div.id = 'subMenuDiv' + (no+1);
  212.                 sub.id = 'submenuUl' + (no+1);
  213.                 sub.style.position = 'relative';   
  214.  
  215.                 if(navigator.userAgent.indexOf('Opera')>=0){
  216.                     submenuObjArray[no+1] = new Array();
  217.                     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
  218.                     submenuObjArray[no+1]['divObj'] = div;
  219.                     submenuObjArray[no+1]['ulObj'] = sub;
  220.                     submenuObjArray[no+1]['width'] = sub.offsetWidth;
  221.                     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
  222.                 }
  223.                 sub.style.left = 1 - sub.offsetWidth + 'px';   
  224.                
  225.                 // if(document.all)div.style.width = '1px';
  226.                    
  227.                 if(navigator.userAgent.indexOf('Opera')<0){
  228.                     submenuObjArray[no+1] = new Array();
  229.                     submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
  230.                     submenuObjArray[no+1]['divObj'] = div;
  231.                     submenuObjArray[no+1]['ulObj'] = sub;
  232.                     submenuObjArray[no+1]['width'] = sub.offsetWidth;
  233.                    
  234.                    
  235.                    
  236.                     submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
  237.                     if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
  238.                 }  
  239.  
  240.                 if(!document.all)div.style.width = '1px';          
  241.                    
  242.             }          
  243.         }
  244.            
  245.  
  246.        
  247.        
  248.         menuObj.style.visibility = 'visible';
  249.        
  250.         window.onresize = resetPosition;
  251.     }
  252.    
  253.    
  254.     window.onload = initLeftMenu;

¿que debo retocar para que el menu se despliegue hacia abajo en lugar de hacia la derecha?
__________________
Nadie nace aprendido, un experto es simplemente alguien que ya ha cometido muchos errores