Foros del Web » Programando para Internet » Javascript »

ayuda para un menu desplegable

Estas en el tema de ayuda para un menu desplegable en el foro de Javascript en Foros del Web. hola muy buenas tengo un menu desplegable de la pagina http://simplythebest.net/scripts/ ,,,,,, el problema es cuando el menu lo agrego a la pagina .. que ...
  #1 (permalink)  
Antiguo 17/10/2004, 23:04
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 8 meses
Puntos: 3
ayuda para un menu desplegable

hola muy buenas tengo un menu desplegable de la pagina http://simplythebest.net/scripts/,,,,,,
el problema es cuando el menu lo agrego a la pagina .. que al tener justo debajo del menu desplegable otra cosa ,,, no sale el despliegue,,, y yo quiero saber como se hace para que el despliege salga por encima de lo que tenga puesto justo debajo,,,

bueno aqui os dejo el codigo del menu desplegable por si acaso:
Código:
<html>

<head>
 <script type="text/javascript" language="JavaScript">
<!---
// Use Freely as long as following disclaimer is intact ::
//---------------------------------------------------------------
// Cross Browser Multi-Orientation Menu v1.5 17th August 2004
// This script written by Rik Comery. www.ricom.co.uk
// For support, visit the "Resources" section at www.ricom.co.uk
// All rights reserved.
// Featured in the SimplytheBest DHTML Scripts Library at http://simplythebest.net/scripts/

//  MENU ITEMS //
// DUPLICATE THIS ENTIRE SECTION FOR MULTIPLE MENUS.  PLEASE SEE THE INSTRUCTIONS FILE FOR DETAILS ///
var Menu1 = new Array ()
var subMenu1 = new Array ()

   Menu1[0] = new Array("Principal", "http://planmagic.com","_top", "left")
     subMenu1[0] = new Array()

   Menu1[1] = new Array("Propiedades", "http://planmagic.com/products.html","_top", "left")
     subMenu1[1] = new Array()
     subMenu1[1][0] = new Array ("Business plan", "http://planmagic.com/business_planning.html","_top")
     subMenu1[1][1] = new Array ("Marketing plan", "http://planmagic.com/marketing_planning.html","_top")
     subMenu1[1][2] = new Array ("Web marketing plan", "http://planmagic.com/webquest.html","_top")
     subMenu1[1][3] = new Array ("Financial plan", "http://planmagic.com/financial_planning.html","_top")
     subMenu1[1][4] = new Array ("Hospitality industry", "#808080","#FFFF88")               //
     subMenu1[1][5] = new Array ("Restaurant plan", "http://plan-a-restaurant.com","_top")
     subMenu1[1][6] = new Array ("Bar business plan", "http://planmagic.com/business_plan/bar_business_plan.html","_top")
     subMenu1[1][7] = new Array ("Bed & Breakfast plan", "http://planmagic.com/business_plan/bed_and_breakfast_business_plan.html","_top")
     subMenu1[1][8] = new Array ("Hotel business plan", "http://planmagic.com/business_plan/hotel_business_plan.html","_top")

   Menu1[2] = new Array("Venda Su propiedad", "http://planmagic.com/download.html","_top", "left")
     subMenu1[2] = new Array()

   Menu1[3] = new Array("Contactar", "http://planmagic.com/register.html","_top", "left")
     subMenu1[3] = new Array()

   Menu1[4] = new Array("Ubicacion", "http://ricom.co.uk/contacts.php","_top", "right")
     subMenu1[4] = new Array()

   Menu1[5] = new Array("Quienes Somos", "http://planmagic.com/toolkit/toolkit.html","_top", "left")
     subMenu1[5] = new Array()

/// FORMAT MENU  ///
menuStyle = "3d"                                  // Menu Style (flat, 3d)
cellPadding = "3"                                   // Cell Padding
cellBorder = 1                                      // Border width (for no border, enter 0)  THIS VALUE APPLIES TO ALL MENUS
verticalOffset = "0"                                // Vertical offset of Sub Menu.
horizontalOffset = "0"                              // Horizontal offset of Sub Menu.
subMenuDelay = 2                                    // Time sub menu stays visible for (in seconds). THIS VALUE APPLIES TO ALL MENUS
subIndicate = 1                                     // Show if a sub menu is present (use 0 for "no")  THIS VALUE APPLIES TO ALL MENUS
indicator = "->" // Symbol to show if a sub menu is present (subIndicate must be to set to 1)
                                                    // Use standard HTML <img> tag. You can use a character instead of an image.
                                                    // e.g.      indicator = ">"
// Main Menu Items
menuWidth = "15%"                  // Width of menu item.  Use 0 for default
borderColor = "Black"            // Border Colour (flat mode only)
borderHighlight = "#97BBD3"      // Border Highlight Colour (3d mode only)
borderShadow = "#31556D"         // Border Shadow Colour (3d mode only)
menuBackground = "#2b83c4"       // Cell Background Colour
menuHoverBackground = "beige"    // Cell Background Colour on mouse rollover
fontFace = "arial"               // Font Face
fontColour = "#FFFFFF"           // Font Colour
fontHoverColour = "#2b83c4"      // Font Colour on mouse rollover
fontSize = "8pt"                 // Font Size
fontDecoration = "none"          // Style of the link text (none, underline, overline, line-through)
fontWeight = "normal"            // Font Weight (normal, bold)

// Sub Menu Items
smenuWidth = "0"                 // Width of sub menu item.  Use 0 for default
sborderColor = "Black"           // Border Colour (flat mode only)
sborderHighlight = "#E9E9E2"     // Border Highlight Colour (3d mode only)
sborderShadow = "#83837C"        // Border Shadow Colour (3d mode only)
smenuBackground = "beige"        // Cell Background Colour
smenuHoverBackground = "#2b83c4" // Cell Background Colour on mouse rolloverr
sfontFace = "arial"              // Font Face
sfontColour = "#2b83c4"          // Font Colour
sfontHoverColour = "#FFFFFF"     // Font Colour on mouse rollover
sfontSize = "8pt"                // Font Size
sfontDecoration = "none"         // Style of the link text (none, underline, overline, line-through)
sfontWeight = "normal"           // Font Weight (normal, bold)

quantity = 1
/// END FORMAT MENU  ////

/// DO NOT EDIT BELOW THIS LINE  ///
// Browser Sniffer
var isIE = (document.getElementById && document.all)?true:false;
var isNS4 = (document.layers)?true:false;
var isNS6 = (document.getElementById && !document.all)?true:false;
var timer;
var obj = (isIE)?"document.all":"document.getElementById"
// Menu Styles
function createStyles(quant){
styleBorder=(menuStyle.split(",")[quant-1].toLowerCase() == "flat")?cellBorder:0
  document.writeln ('<style>');
  document.writeln ('.rcMenuStatic'+quant+' {font-family:'+fontFace.split(",")[quant-1]+';font-size:'+fontSize.split(",")[quant-1]+';color:'+fontColour.split(",")[quant-1]+';font-weight:'+fontWeight.split(",")[quant-1]+';background-color:'+menuBackground.split(",")[quant-1]+'; cursor:hand; text-decoration:'+fontDecoration.split(",")[quant-1]+'}');
  document.writeln ('.rcMenuHover'+quant+'  {font-family:'+fontFace.split(",")[quant-1]+';font-size:'+fontSize.split(",")[quant-1]+';color:'+fontHoverColour.split(",")[quant-1]+';font-weight:'+fontWeight.split(",")[quant-1]+';background-color:'+menuHoverBackground.split(",")[quant-1]+'; cursor:hand; text-decoration:'+fontDecoration.split(",")[quant-1]+'}');
  document.writeln ('.rcSubMenuStatic'+quant+' {font-family:'+sfontFace.split(",")[quant-1]+';font-size:'+sfontSize.split(",")[quant-1]+';color:'+sfontColour.split(",")[quant-1]+';font-weight:'+sfontWeight.split(",")[quant-1]+';text-decoration:'+sfontDecoration.split(",")[quant-1]+';background-color:'+smenuBackground.split(",")[quant-1]+'; cursor:hand}');
  document.writeln ('.rcSubMenuHover'+quant+'  {font-family:'+sfontFace.split(",")[quant-1]+';font-size:'+sfontSize.split(",")[quant-1]+';color:'+sfontHoverColour.split(",")[quant-1]+';font-weight:'+sfontWeight.split(",")[quant-1]+';text-decoration:'+sfontDecoration.split(",")[quant-1]+';background-color:'+smenuHoverBackground.split(",")[quant-1]+'; cursor:hand}');
  document.writeln ('</style>');
}
// Build and show the main menu items
function showMenus(quant,definedOrientation)

Última edición por gachon; 18/10/2004 a las 07:02
  #2 (permalink)  
Antiguo 17/10/2004, 23:07
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 8 meses
Puntos: 3
sigue el codigo no cabe:
Código:
{
  createStyles(quant);
  if(definedOrientation!=""){orientation=definedOrientation}
  if (orientation.toLowerCase() == "vertical"){document.writeln ('<table border="0" cellpadding="0" cellspacing="'+styleBorder+'" bgColor="'+borderColor.split(",")[quant-1]+'">')}
  else{document.writeln ('<table border="0" cellpadding="0" cellspacing="'+styleBorder+'" bgColor="'+borderColor.split(",")[quant-1]+'"><tr>')}
  for (x=0; x<eval("Menu"+quant).length; x++)
  {
    if (orientation.toLowerCase()=="vertical") document.writeln('<tr>')
    document.writeln ('<td width="'+menuWidth+'" onclick="tdMouseClick(\''+quant+'mainLink'+x+'\')" onMouseOver="hoverMenu(); popDown(\''+quant+'\','+x+', \''+quant+'button'+x+'\',\''+orientation+'\'); " onMouseOut="clearMenu('+quant+','+x+')" ')
    if (menuStyle.split(",")[quant-1].toLowerCase() == "3d"){document.writeln ('style="border-left:'+cellBorder+'px solid '+borderHighlight.split(",")[quant-1]+';border-top:'+cellBorder+'px solid '+borderHighlight.split(",")[quant-1]+';border-right:'+cellBorder+'px solid '+borderShadow.split(",")[quant-1]+';border-bottom:'+cellBorder+'px solid '+borderShadow.split(",")[quant-1]+';"');}
    document.writeln ('><div id="'+quant+'button'+x+'"><table border="0" cellpadding="'+cellPadding.split(",")[quant-1]+'" cellspacing="0" width="100%"><tr><td class="rcMenuStatic'+quant+'" id="'+quant+'cell'+x+'" nowrap>');
    document.writeln ('<a id="'+quant+'mainLink'+x+'" href="'+eval("Menu"+quant)[x][1]+'" target="'+eval("Menu"+quant)[x][2]+'" class="rcMenuStatic'+quant+'">'+eval("Menu"+quant)[x][0]+'</a></td>');
    if (subIndicate == 1&&eval("subMenu"+quant)[x].length>=1){
      document.writeln('<td class="rcMenuStatic'+quant+'" id="'+quant+'cell'+x+'a" align="right">');
      document.writeln ('<a id="'+quant+'mainLink'+x+'a" href="'+eval("Menu"+quant)[x][1]+'" target="'+eval("Menu"+quant)[x][2]+'" class="rcMenuStatic'+quant+'">'+indicator+'</a></td>');}
    document.writeln ('</tr></table></div></td>');
    if (orientation.toLowerCase()=="vertical") document.writeln('</tr>')
  }
  if (orientation.toLowerCase() == "vertical"){document.writeln ('</table>');}
  else{document.writeln ('</tr></table>');}
// Build the sub menu items
  for (x=0; x<eval("Menu"+quant).length; x++)
  {
    if (eval("subMenu"+quant)[x].length > 0)
    {
      document.writeln ('<div id="'+quant+'MENU'+x+'" style="visibility:hidden; position:absolute; z-index:2" >');
      document.writeln ('<table width="'+smenuWidth.split(",")[quant-1]+'" border="0" cellpadding="'+cellPadding.split(",")[quant-1]+'" cellspacing="'+styleBorder+'" bgColor="'+sborderColor.split(",")[quant-1]+'">');
      for (y=0; y<eval("subMenu"+quant)[x].length; y++)
      {
        document.writeln ('<tr>');
        if (eval("subMenu"+quant)[x][y][1].indexOf("#") != -1)
        {
          document.writeln ('<td bgColor="'+eval("subMenu"+quant)[x][y][2]+'" id="'+quant+'subMenu'+x+y+'" onMouseOver="hoverMenu(); highlightMenu(\'sub\','+x+','+y+',\'\','+quant+')" nowrap')
          if (menuStyle.split(",")[quant-1].toLowerCase() == "3d"){document.writeln ('style="border-left:'+cellBorder+'px solid '+sborderHighlight.split(",")[quant-1]+';border-top:'+cellBorder+'px solid '+sborderHighlight.split(",")[quant-1]+';border-right:'+cellBorder+'px solid '+sborderShadow.split(",")[quant-1]+';border-bottom:'+cellBorder+'px solid '+sborderShadow.split(",")[quant-1]+';"');}
          document.writeln ('><p style="font-family:'+sfontFace.split(",")[quant-1]+'; font-size:'+sfontSize.split(",")[quant-1]+'; color:'+eval("subMenu"+quant)[x][y][1]+'"id="'+quant+'subLink'+x+y+'">'+eval("subMenu"+quant)[x][y][0]+'</p></td></tr>');
        }
        else
        {
          document.writeln ('<td id="'+quant+'subMenu'+x+y+'" class="rcSubMenuStatic'+quant+'" onMouseOver="hoverMenu(); highlightMenu(\'sub\','+x+','+y+',\'\','+quant+')" onMouseOut="clearMenu('+quant+','+x+');" onclick="tdMouseClick(\''+quant+'subLink'+x+y+'\')" nowrap')
          if (menuStyle.split(",")[quant-1].toLowerCase() == "3d"){document.writeln ('style="border-left:'+cellBorder+'px solid '+sborderHighlight.split(",")[quant-1]+';border-top:'+cellBorder+'px solid '+sborderHighlight.split(",")[quant-1]+';border-right:'+cellBorder+'px solid '+sborderShadow.split(",")[quant-1]+';border-bottom:'+cellBorder+'px solid '+sborderShadow.split(",")[quant-1]+';"');}
          document.writeln ('><a id="'+quant+'subLink'+x+y+'" href="'+eval("subMenu"+quant)[x][y][1]+'" target="'+eval("subMenu"+quant)[x][y][2]+'" class="rcSubMenuStatic'+quant+'">'+eval("subMenu"+quant)[x][y][0]+'</a></td></tr>');
        }
      }
      document.writeln ('</table></div>');
    }
  }
}
// Change colour or menu and submenu items when the mouse hovers over.
function highlightMenu(element,mainMenu,dropMenu,state,quant)
{
  hoverMenu();
  state=(state == "hover")?"rcMenuHover"+quant:"rcMenuStatic"+quant
  if (element == "sub")
  {
    for (x=0; x < eval("subMenu"+quant)[mainMenu].length; x++)
    {
      if (eval("subMenu"+quant)[mainMenu][x][1].indexOf("#") == -1){
        eval(obj+'("'+quant+'subMenu'+mainMenu+x+'").className = "rcSubMenuStatic'+quant+'"')
        eval(obj+'("'+quant+'subLink'+mainMenu+x+'").className = "rcSubMenuStatic'+quant+'"')
      }
    }
    if (eval("subMenu"+quant)[mainMenu][dropMenu][1].indexOf("#") == -1)  {
      eval(obj+'("'+quant+'subMenu'+mainMenu+dropMenu+'").className="rcSubMenuHover'+quant+'"')
      eval(obj+'("'+quant+'subLink'+mainMenu+dropMenu+'").className="rcSubMenuHover'+quant+'"')
    }
  }
  else
  {
    eval(obj+'("'+quant+'cell'+mainMenu+'").className = "'+state+'"')
    eval(obj+'("'+quant+'mainLink'+mainMenu+'").className = "'+state+'"')
    if (subIndicate == 1&&eval("subMenu"+quant)[mainMenu].length>=1)
    {
      eval(obj+'("'+quant+'cell'+mainMenu+'a").className = "'+state+'"')
      eval(obj+'("'+quant+'mainLink'+mainMenu+'a").className = "'+state+'"')
    }
  }
}
// Find positioning for sub menus
function getOffset(obj, dim)
{
  if(dim=="left")
  {
    oLeft = obj.offsetLeft;
    while(obj.offsetParent!=null)
    {
      oParent = obj.offsetParent
      oLeft += oParent.offsetLeft
      obj = oParent
    }
    return oLeft
  }
  else if(dim=="top")
  {
    oTop = obj.offsetTop;
    while(obj.offsetParent!=null)
    {
      oParent = obj.offsetParent
      oTop += oParent.offsetTop
      obj = oParent
    }
    return oTop
  }
  else if(dim=="width")
  {
    oWidth = obj.offsetWidth
    return oWidth
  }
  else if(dim=="height")
  {
    oHeight = obj.offsetHeight
    return oHeight
  }
  else
  {
    alert("Error: invalid offset dimension '" + dim + "' in getOffset()")
    return false;
  }
}
// Show sub menus
function popDown(quant, param, id, orientation)
{
  var cellBorderOffset = (isNS6)?cellBorder:eval(cellBorder*2)
  var browserAdjustment = (isNS6)?cellBorder:0
  var menu;
  var button;

  if (id)
  {
    getOffset(eval(obj+'(id)'),'left');
    getOffset(eval(obj+'(id)'),'top');
    getOffset(eval(obj+'(id)'),'width');
    getOffset(eval(obj+'(id)'),'height');

    if (eval("Menu"+quant+"["+param+"][3]")=="right" && eval("subMenu"+quant+"["+param+"].length")>0)
    {
      oLeft=oLeft
      oLeft=oLeft+oWidth;
      getOffset(eval(obj+'("'+quant+'MENU'+param+'")'),'width');
      oLeft=oLeft-oWidth ;
      alignAdjustment = cellBorder*2 + 1
    }
    else
    {
      alignAdjustment = 0
      oLeft=oLeft
    }
  }


  n = 0;
  while (n < eval("Menu"+quant).length)
  {
    menu = quant+"MENU"+n
    if (param == n)
    {
      theObj = eval(obj+'(menu)');
      if (theObj)
      {
         theObj.style.visibility = "visible"
          if (orientation.toLowerCase()=="vertical"){
            theObj.style.left=(menuStyle.split(",")[quant-1].toLowerCase()=="flat")?oLeft+oWidth+cellBorder+parseInt(horizontalOffset.split(",")[quant-1]):oLeft+oWidth+cellBorderOffset+parseInt(horizontalOffset.split(",")[quant-1]);
            theObj.style.top=(menuStyle.split(",")[quant-1].toLowerCase()=="flat")?oTop-cellBorder+parseInt(verticalOffset.split(",")[quant-1]):oTop+parseInt(verticalOffset.split(",")[quant-1])-browserAdjustment}
          else{
            theObj.style.left=(menuStyle.split(",")[quant-1].toLowerCase()=="flat")?oLeft-cellBorder+parseInt(horizontalOffset.split(",")[quant-1])+alignAdjustment:oLeft+parseInt(horizontalOffset.split(",")[quant-1])-browserAdjustment+alignAdjustment;
            theObj.style.top=(menuStyle.split(",")[quant-1].toLowerCase()=="flat")?oTop+oHeight+cellBorder+parseInt(verticalOffset.split(",")[quant-1]):oTop+oHeight+cellBorderOffset+parseInt(verticalOffset.split(",")[quant-1]);}
        }

       highlightMenu('main',n,'','hover',quant)
       if (eval("subMenu"+quant)[param].length > 0)
       {
         for (x=0; x<eval("subMenu"+quant)[param].length; x++)
         {
           if(eval("subMenu"+quant)[param][x][1].indexOf("#") == -1){
             eval (obj+'("'+quant+'subMenu'+param+x+'").className = "rcSubMenuStatic'+quant+'"')
             eval (obj+'("'+quant+'subLink'+param+x+'").className = "rcSubMenuStatic'+quant+'"')
           }
         }
       }
    }
    else
    {
      for (x=1; x<quantity+1; x++)
      {
        menu = x+"MENU"+n
        //alert(menu)
        if (eval(obj+'(menu)'))
        {
          eval(obj+'(menu).style.visibility = "hidden"')
        }
        highlightMenu ('main',n,'','static',quant)
      }
    }
    n++
  }
}
// Re-set timer for sub menus
function hoverMenu()
{
  #3 (permalink)  
Antiguo 17/10/2004, 23:09
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 8 meses
Puntos: 3
y sigue;
Código:
if(timer)
  clearTimeout(timer)
}
// Set timer for sub menus
function clearMenu(quant,menu)
{
  setDelay = subMenuDelay*1000
  delay = (eval("subMenu"+quant)[menu].length > 0)?setDelay:1

  timer = setTimeout("popDown("+quant+","+(eval("Menu"+quant).length + 1)+")",delay)
}
// when you click the box, perform the same function as if the user had clicked the hyperlink
function tdMouseClick(theElement)
{
  eval(obj+'(theElement).click()')
}
//-->
</script>
</head>

<body onresize="window.location.href = window.location.href">
<script type="text/javascript" language="JavaScript">showMenus(1,'Horizontal')</script>

</body>

</html>


bueno muchas gracias y slaudos

Última edición por gachon; 17/10/2004 a las 23:10
  #4 (permalink)  
Antiguo 18/10/2004, 14:07
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 8 meses
Puntos: 3
por favor no sabeis como se hacer,,,
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 01:18.