Untermenü

[Simon9990]

Hi wie mach ich so ein Menü das wenn man mit der Mausdrübergeht das dann eben so ein Menü erscheint.
Das muss doch mit Mausover zu lösen sein oder?

Also ich hab da z.Bsp
den Link

Links

und wenn man mit der Maus drüberfährt soll da so eine Tabelle runtergehen.

Link
| 1er Link |
| 2er Link |
| ........ .. .|
|________|

Also so soll das ungefähr aussehen-
Nur wenn ich jetzt nur den Mouseover mache dann wird dann ist der Link eweg und meine Links sammlung wird so gross wie die Tabelle.
Was muss ich denn für einen Code eingeben das nur so eine Tabelle unten ran kommt?'

Gruss SImon

Würde das an deiner Stelle nicht mit PHP machen...
Nimm Javascript z.b. sowas:
http://www.javarea.de/index.php3?ope...igation&id=470

[Simon9990]

Hi ich wollte es ja mit Javascript machen sonst hätte ich es ja nicht ins Javascript Forum gepostet.
Aber egal also ich hab mir jetzt das Script geholt.

<style type="text/css">
 <!--
  body { font: 12px tahoma }
 //-->
 </style>
<script language="JavaScript">
function goToURL() { history.go(-1); }
</script>
  <style>
  .menu
  {
   background-color:#2B6Ebb;
   border:1px solid darkblue;
   width:150px;
   font-size:11px;
   font-family:verdana;
   position: absolute;
   font:bold;
   color: #ffffff;
   cursor: hand;
  }
  .item_panel
  {
    width:150px;
    border-left:1px solid darkblue;
    border-right:1px solid darkblue;
    clip:rect(0,150,0,0);
    position:absolute;
  }
  .item_panel a
  {
   text-decoration:none;
   color:black;
   cursor:hand;
  }
  .item
  {
   background-color: #E9F0F8;
   width: 148px;
   font-size: 10px;
   font-family: verdana;
   
  }
  </style>
  
  <script language="JavaScript">  
  var height = 20; // Hoehe der Menuekoepfe
  var iheight = 15; // Hoehe der Menueelemente
  var bgc = "#E9F0F8" // background color of the item
  var tc = "black" // text color of the item  
  var over_bgc = "white";
  var over_tc = "#004891";  
  var speed = 0;
  var timerID = "";
  var N = (document.all) ? 0 : 1;
  var width = 152;
  var self_menu = new Array();
function write_menu()
{
  smc = 0; // count the position of the self_menu
  document.write("<div style='position:absolute'>");
  mn = 0;
  mni = 1;
  start = -1;  
  for(i=0;i<Link.length;i++)
  {
   la = Link[i].split("|");
   if (la[0] == "0")
   {
    if(start == 0)
     {
      document.write("</div>");
      h =  csmc * iheight;
      tmn = mn; //-h
      self_menu[smc] = new Array(tmn,h,0,-2);
      smc++;
      mn--;
     }
     csmc = 0;
    document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
   }
   else
   {
    if(start == 1)
     {
      if(N)mn+=2;
       document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
       start = 0;
     }
    
    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>  "+ la[1] + "</div></a>");
    csmc++;
   }
  }
  if (start == 0)
   {
     document.write("</div>");
     h =  csmc * iheight;
     tmn = mn + 5; //-h
     self_menu[smc] = new Array(tmn,h,0);
     name = "down" + (self_menu.length-1);
     obj = document.getElementById(name);
     obj.style.borderBottomColor = "darkblue";
     obj.style.borderBottomWidth = 1;
     obj.style.borderBottomStyle = "solid";
   }
  document.write("</div>");}
function color(obj)
{
 document.getElementById(obj).style.backgroundColor = over_bgc;
 document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
 document.getElementById(obj).style.backgroundColor = bgc;
 document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
 if (timerID == "")
 {
 to = self_menu[nr+1][1]
 begin = nr + 2;
 if (timerID != "") clearTimeout(timerID);
 if (self_menu[nr+1][2] == 0)
 {
  self_menu[nr+1][2] = 1;
  if(nr == self_menu.length-2) {to++;}
  epull_down(begin,to,0);
 }
 else
 {
  to = 0;
  self_menu[nr+1][2] = 0;
  name = "down"+(nr+2);
  open_item = 0;
  for(i=0;i<nr;i++)
  {
   if(self_menu[i][2] == 1)
    {open_item += self_menu[i][1];
    }
  }
  if (N == false) {open_item-= (c*1)};
  if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
  else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
  epull_up(begin,to,val);
 }
 }
}

function epull_down(nr,to,nowv)
{
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
 for (i=nr;i<self_menu.length;i++)
 {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)+1;
 }
 nowv++;
 if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function epull_up(nr,to,nowv)
{
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
 for (i=nr;i<self_menu.length;i++)
 {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)-1;
 }
 nowv--;
 if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function startup(nr)
{
 write_menu();
 if (nr != 0)
 {
 for(i=0;i<self_menu.length;i++)
 {
  if(self_menu[i][3] == nr) pull_down(i,nr)
  i==self_menu.length;
 }
 }
}  
</script>
</head>
<body>
<table width=150>
<tr>
<td>
<script language="JavaScript">
      //Link[nr] = "position [0 is menu/1 is item],Link name,url,target (blank|top|frame_name)"
  var Link = new Array();
  Link[0] = "0|Filme";
  Link[1] = "1|DVD Rip|http://www.javarea.de|";
  Link[2] = "1|MVCD|http://www.javarea.de|";
  Link[3] = "1|Javarea.de|http://www.javarea.de|";
  Link[4] = "1|Javarea.de|http://www.javarea.de|";
  Link[5] = "0|Html Hilfe";
  Link[6] = "1|selfhtml|http://.|";
  Link[7] = "1|lerne html|http://.|"
  Link[8] = "0|Sonst";
  Link[9] = "1|Gästebuch|http://.|";
  Link[10] = "1|Kontakt|http://.p|";
  Link[11] = "0|noch mehr";
  Link[12] = "1|bla bla|";
  startup(4);
  </script>
  </td>
 </tr>
</table>

Nur wie binde ich das in meine PHP Seite ein?
Also wenn ich es einfach an die Stelle wo es sein soll den Code platziere dann sieht das ganz anders aus und es werden nur die Unterkategorien angezeigt aus irgendeinem Grund.

Wie mach ich das???
EIn Beispiel wäre echt gut.
Hab auch includen probiert funtzt auch nicht.

Gruss Simon

[imported_Ben]

bei mir wird alles richtig angezeigt.
allerdings solltest du vielleicht mal am ende

</body>
</html>

einfügen. aber eigentlich ändert das bei mir nichts.