Ankündigung

Einklappen
Keine Ankündigung bisher.

Untermenü

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Untermenü

    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

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

    Code:
    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
    Der G-Translator


  • #2
    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

    Kommentar


    • #3
      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.
      Code:
      <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
      Der G-Translator

      Kommentar


      • #4
        bei mir wird alles richtig angezeigt.
        allerdings solltest du vielleicht mal am ende
        Code:
        </body>
        </html>
        einfügen. aber eigentlich ändert das bei mir nichts.
        privater Blog

        Kommentar

        Lädt...
        X