Dropdownbox menu

Jeg kan ikke give dig en løsning, da jeg ikke har den.
Men jeg ville måske selv prøve at gribe det an på følgende måde:

Find et DHTML menu, som virker som du ønsker!
Den må have noget opbygning af menuen på en måde ala:

AddMenu(Navn,Url,Submenu,osv....)

Den retter vi så efterfølgende "bare" til, så den fodres med input fra dit database udtræk.

Prøv at find en menu først, så vil jeg gerne kigge nærmere på det! (har bare ikke så meget tid i dag)

hej jakobdo... det lyder rigtig godt! Jeg finder lige en pæn menu, og så vender jeg tilbage til dig.... du ved forresten ikke hvor man kan finde flotte menuer?

Fandt lige denne side på www.google.com - http://simplythebest.net/scripts/DHTML_scripts/dhtml_menu_scripts.html

jeg synes den menu her, er alt for fed: http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_52.html

tror du vi kan få den til at virke med min database?

det kan forresten være at den ikke er for fed igen alligevel... vil nemlig gerne selv kunne bestemme hvor menuen skal placeres.... lige nu kigger jeg på en menu der hedder coolmenu... tror næsten det bliver den!

ok.... har sku besluttet mig til at de skal være den her menu: http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_79.html

tror du vi kan lave nogte med den? :)

Ok!

Så bygger du bare dem her:

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

Menu1[1] = new Array("Business software", "http://planmagic.com/products.html","_blank", "left")
subMenu1[1] = new Array()
subMenu1[1][0] = new Array ("Business plan", "http://planmagic.com/business_plan.html","_blank")
subMenu1[1][1] = new Array ("Marketing plan", "http://planmagic.com/marketing_plan.html","_blank")

Menu1[2] = new Array("Downloads", "http://planmagic.com/download.html","_blank", "left")
subMenu1[2] = new Array()

Op fra dit database udtræk!

ok.... det er selv koden til at lave udtrækningen jeg er i tvivl om at få lavet! Du kan vel ikke vise mig hvordan den skal se ud, med de indformationer omkring min database, som jeg skrev i starten af dette spørgsmål?

Hvordan er din tabel bygget op?

som beskrevet i indledningen til det her spørgsmål!

tabellen hedder menu og den indeholder:
id
titel
link
knytning

hvor knytning indeholder idet på den menu undermenuen knytter sig til! Hvis det er en hovedmenu vil der være et 0 i knytning!

Så tror jeg sgu den var der:

//HUSK Forbind til din MYSQL...
//Brug denne i stedet for punkt 4 på siden:
//http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_79.html

$query = mysql_query("SELECT * FROM menu ORDER BY knytning,id");
while($row = mysql_fetch_assoc($query))
{
    if($row['knytning'] == 0)
    {
        echo "Menu1[" . $row['id'] . "] = new Array(\"" . $row['titel'] . "\", "\" . $row['link'] . "\","_top", "left")
        echo "subMenu1[" . $row['id'] . "] = new Array()";
    }
    else
    {
        echo "subMenu1[" . $row['knytning'] . "][" . $row['id'] . "] = new Array (\"" . $row['titel'] . "\", \"" . $row['link'] . "\","_blank")
    }
}

Hej Jakobdo... Nu ahr jeg lavet følgende stykke kode:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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 ()
  <?
include ("../connect/connect.php");

$query = mysql_query("SELECT * FROM menu ORDER BY knytning,id");
while($row = mysql_fetch_assoc($query))
{
    if($row['knytning'] == 0)
    {
        echo "Menu1[" . $row['id'] . "] = new Array(\"" . $row['titel'] . "\", "\" . $row['link'] . "\","_top", "left")";
        echo "subMenu1[" . $row['id'] . "] = new Array()";
    }
    else
    {
        echo "subMenu1[" . $row['knytning'] . "][" . $row['id'] . "] = new Array (\"" . $row['titel'] . "\", \"" . $row['link'] . "\","_blank")";
    }
}
?>
/// FORMAT MENU  ///
menuStyle = "flat"                                  // 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 = "<img src='images/arrow-down.gif' border='0'>" // 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 = "0"                  // 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)
{
  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()
{
  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>

men det kommer desværre op med følgende fejl:


Warning: Unexpected character in input: '\' (ASCII=92) state=1 in /customers/domæne.dk/domæne.dk/httpd.www/menuer/menu3b.php on line 29

Parse error: parse error, unexpected '\"', expecting ',' or ';' in /customers/domæne.dk/domæne.dk/httpd.www/menuer/menu3b.php on line 29

Prøv denne kode istedet:

<?
include ("../connect/connect.php");

$query = mysql_query("SELECT * FROM menu ORDER BY knytning,id");
while($row = mysql_fetch_assoc($query))
{
    if($row['knytning'] == 0)
    {
        echo "Menu1[" . $row['id'] . "] = new Array(\"" . $row['titel'] . "\", "\" . $row['link'] . "\",\"_top\", \"left\")";
        echo "subMenu1[" . $row['id'] . "] = new Array()";
    }
    else
    {
        echo "subMenu1[" . $row['knytning'] . "][" . $row['id'] . "] = new Array (\"" . $row['titel'] . "\", \"" . $row['link'] . "\",\"_blank\")";
    }
}
?>

der opstår desværre den samme fejl!

Tada...

<?
include ("../connect/connect.php");

$query = mysql_query("SELECT * FROM menu ORDER BY knytning,id");
while($row = mysql_fetch_assoc($query))
{
    if($row['knytning'] == 0)
    {
        echo "Menu1[" . $row['id'] . "] = new Array(\"" . $row['titel'] . "\", \"" . $row['link'] . "\",\"_top\", \"left\")";
        echo "subMenu1[" . $row['id'] . "] = new Array()";
    }
    else
    {
        echo "subMenu1[" . $row['knytning'] . "][" . $row['id'] . "] = new Array (\"" . $row['titel'] . "\", \"" . $row['link'] . "\",\"_blank\")";
    }
}
?>

nu har jeg sat den nye sætning ind i koden, og der kommer ikke nogen fejl mere. Men tilgengæld bliver menuen hellere ikke vist. Min kode ser sådan her ud nu:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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 ()
<?
include ("../connect/connect.php");

$query = mysql_query("SELECT * FROM menu ORDER BY knytning,id");
while($row = mysql_fetch_assoc($query))
{
    if($row["knytning"] == 0)
    {
        echo "Menu1[" . $row["id"] . "] = new Array(\"" . $row["titel"] . "\", \"" . $row["link"] . "\",\"_top\", \"left\")";
        echo "subMenu1[" . $row["id"] . "] = new Array()";
    }
    else
    {
        echo "subMenu1[" . $row["knytning"] . "][" . $row["id"] . "] = new Array (\"" . $row["titel"] . "\", \"" . $row["link"] . "\",\"_blank\")";
    }
}
?>
/// FORMAT MENU  ///
menuStyle = "flat"                                  // 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 = "<img src='images/arrow-down.gif' border='0'>" // 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 = "0"                  // 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)
{
  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()
{
  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>

men jeg kan ikke rigtigt se at der er nogen fejl!

Har du et link til din side?
Jeg tror måske det kan skyldes at id er tælles fra 0 -> ...

linket er dete: http://www.gentlemens-world.dk/menuer/menu3b.php

Problemet er, tror jeg, at den vil have tal som starter nede fra.
Jeg tænkte på om du kunne ændre din data struktur en smule i din DB, så det måske blev:

TABEL menu
id
titel
link
menu //0=første menu
submenu //NULL hvis hovedmenu

Så skulle jeg mene jeg kan rette menuen til!

du mener at jeg i feltet menu skal give hovedmenuerne tal fra 0 og op efter og samtidigt skal de have NULL som værdi i submenu?

Problemet er at jeg er i gang med at lave de sådan at der kan tilføjes menupunkter via en form... dette betyder at man har mulighed for at tilføje menu punkter og slette dem som de passer en... jeg går ud fra at det har betydning. Har det ikke?

Prøv denne kode:

<?
include ("../connect/connect.php");

$query = mysql_query("SELECT * FROM menu ORDER BY knytning,id");

$menu = 0;
$menuArr = array();
$submenu = 0;
$lastKnytning = 0;

while($row = mysql_fetch_assoc($query))
{
    if($row['knytning'] == 0)
    {
        echo "Menu1[" . $menu . "] = new Array(\"" . $row['titel'] . "\", \"" . $row['link'] . "\",\"_top\", \"left\")\n";
        echo "subMenu1[" . $menu . "] = new Array()";
        $menuArr[$menu] = $row['id'];
        $menu++;
    }
    else
    {
        if($lastKnytning != $row['knytning'])
            $submenu = 0;
       
        echo "subMenu1[" . array_search($row['knytning'],$menuArr) . "][" . $submenu . "] = new Array (\"" . $row['titel'] . "\", \"" . $row['link'] . "\",\"_blank\")\n";
        $submenu++;
    }
}
?>

Hej Jakobdo!

Det virker hellere ikke. så det kan godt være at jeg bare skal droppe ideen om at få menuen til at virke :(

Det skal sgu virke!
Men jeg har svært ved at hjælpe meget mere, da jeg ikke kan rode direkte i database og teste i PHP samtidig!
Men hvis dette måske er en mulighed, er du velkommen til at fange mig på msn:

jakobdo(snabel a)hotmail dot com