• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Javascript für dropDown Menü erweitern

  • Ersteller Ersteller matibaski
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
M

matibaski

Guest
Mahlzeit!
Ich habe folgendes:
In meiner Homepage habe ich von einem Freund erhaltene DropDown Codes, die mit JS und CSS sind.
Die CSS Codes sind mir alle klar.
Doch ich habe nun vor, das erste Dropdownmenü zu verdoppeln (About me, Community)
Und nun habe ich be CSS alles verändert, das ich gebraucht habe.
Doch:
Beim Javascript komme ich nicht draus, was ich machen muss, um mehrere DropDownmenü's zu öffnen.
Dies ist der JS Code:
Code: 
<script type="text/javascript">
<!--
startList = function()
{
if (document.all&&document.getElementById)
{
navRoot = document.getElementById("community");
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI")
{
node.onmouseover=function()
{
this.className+=" over";
}
node.onmouseout=function()
{
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//-->
</script>
und dies ist der css code:
Code: 
<ul id="about">
<li>
<a href="index.php?site=onama">O nama</a>
<ul style="position: absolute; left: 0px; top: 29px">
<li><a href="#">Biografija</a></li>
<li><a href="#">Slike</a></li>
<li><a href="#">Dalje...</a></li>
</ul>
</li>
</ul>

Ich weiss, dass der JS-Skript das DropDown Menü nimmt, dass die ID hat, die dort stehen:
<ul id="about"> & navRoot = document.getElementById("about");

Doch wie kann ich den erweitern, (den JS Code), dass ich mehrere DropDownmenü's habe?

Hier ist die CSS Formatierung: (Vielleicht hilft die euch weiter)
Code: 
ul
{
margin: 0;
padding: 0;
list-style: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}


ul li
{
position: relative;
}

li ul
{
position: absolute;
left: 159px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a, a:hover
{
display: block;
text-decoration: none;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
padding: 5px;
}

ul li a
{

color: #777;
font-weight: bold;
background: #0000000; /* IE6 Bug */
}

ul li a:hover
{
color: black;
background: white; /* IE6 Bug */
}

/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul
{
display: block;
}

/* Schriftstil, Abstände */

body {
margin-top: 0px; 
margin-left: 0px; 
margin-right: 0px;
margin-bottom: 0px; 
color: #FFFFFF;  
background-color:#000000; 
font-family: Verdana,Arial; 
font-size: 10pt;
}

table, tr, td { 
color: #FFFFFF;
font-family: Verdana,Arial; 
font-size: 10pt
}
Schreibt nicht: Frag doch deinen Freund!
Der ist im Urlaub! :D
 
Auf die schnelle
HTML: 
<table>
  <tr>
    <td>
      <ul id="about">
        <li>
          <a href="index.php?site=onama">O nama</a>
          <ul style="position: absolute; left: 0px; top: 29px">
            <li><a href="#">Biografija</a></li>
            <li><a href="#">Slike</a></li>
            <li><a href="#">Dalje...</a></li>
          </ul>
        </li>
      </ul>
    </td>
    <td>
      <ul id="about">
        <li>
          <a href="index.php?site=onama">O nama</a>
          <ul style="position: absolute; left: 0px; top: 29px">
            <li><a href="#">Biografija</a></li>
            <li><a href="#">Slike</a></li>
            <li><a href="#">Dalje...</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>
</table>
Ich würde dann allerdings noch aus der 2. about id eine andere machen
und dann bei navRoot = document.getElementById("about"); eine liste
mit allen ids der menüs. warum? weil man nur 1x die gleiche id in validem
code haben darf
 
Wie mache ich eine Liste beim 2. About?
Ich kenne micht mit JS nicht aus. :D

Es ist dieser Code:
Code: 
navRoot = document.getElementById("about");

Ich dachte an:
("about" , "name2");
oder
("about"), ("name2");
oder
("about , name2");

Aber ich denke dass das sehr undwarscheindlich ist.
 
Z.B. so
Code: 
startList = function()
{
  if (document.all&&document.getElementById)
  {
    navRoot = document.getElementsByTagName("ul");
    for (x=0; x<navRoot.length; x++) {
      for (i=0; i<navRoot[x].childNodes.length; i++)
      {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI")
        {
          node.onmouseover=function() 
          {
            this.className+=" over";
          }
          node.onmouseout=function()
          {
            this.className=this.className.replace(" over", "");
          }
        }
      }
    }
  }
}
 
Lol.
muss ich dann <ul id="ul">..</ul> machen?

bis jetzt war die id=about
 
Hallo matibaski,
ein wenig Eigeninitiative sollte man schon mitbringen...
Guck dir an wie die JS Funktion heißt:
getElementsByTagName("ul")
-> selfhtml gucken und wissen, das man sich damit alle
<ul>s holt und diese in einer Liste hat.
http://html.de/member.php?u=4004
 
Hab den Code ja schon ausprobiert.
Jedoch wurde schlussendlich gar keines geöffnet.
:D
 
Folgende Frage stellt sich mir, hat sich bei dir überhaupt eines
geöffnet? Bevor du die Frage hier gestellt hat? Denn wenn ich deinen
Code aus Post 1 zur Basis nehme, und mir das ganze im Internet
Explorer angucke, funktioniert doch nicht einmal 1 Menü Punkt.
Liegt natürlich daran, das der IE v6 keinen CSS Hover Effekt bei
<ul>s unterstützt.
 
So, nochmal ich. Was ein gefrickel.
Nun sollte es gehen:
Code: 
<script type="text/javascript">
function bla() {
  //navRoot = document.getElementById("about");
  navRoot = document.getElementsByTagName("ul");
  for (x=0; x<navRoot.length; x++) {
    for (i=0; i<navRoot[x].childNodes.length; i++) {
      node = navRoot[x].childNodes[i];
      if (node.nodeName=="LI") {
        node.onmouseover=function() {
          this.className+=" over";
        }
        node.onmouseout=function() {
          this.className=this.className.replace(" over", "");
        }
      }
    }
  }
}
</script>
</head>
<body onload="bla()">
<table>
  <tr>
    <td>
      <ul id="about">
        <li>
          <a href="index.php?site=onama">O nama</a>
          <ul style="position: absolute; left: 0px; top: 29px">
            <li><a href="#">Biografija</a></li>
            <li><a href="#">Slike</a></li>
            <li><a href="#">Dalje...</a></li>
          </ul>
        </li>
      </ul>
    </td>
    <td>
      <ul id="about">
        <li>
          <a href="index.php?site=onama">O nama</a>
          <ul style="position: absolute; left: 0px; top: 29px">
            <li><a href="#">Biografija</a></li>
            <li><a href="#">Slike</a></li>
            <li><a href="#">Dalje...</a></li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>
</table>
</body>
</html>
 
Danke, jetzt gehts.
sorry, aber ich kapiere wirklich noch "0" von Javascript.
Ich weiss vielleicht was man mit dem macht, und Codes kopieren kann ich auch.
Aber ich weiss eben nicht mal was das Semikolon oder die {} für eine Bedeutung in Javascript haben.

Nach PHP mache ich glaube ich nicht MySQL sondern JS.
Mal schau'n.

Danke auf jeden Fall!

edit:
Geht alles, nur wenn ich mti der Maus weggehe vom Dropdown, ohne etwas geklickt zu haben, dann bleibt der offen.

Kannst du mal schauen.
http://habboville.paradoxe/Exponent/index2.php

Liegt sehrwarscheindlich am javaSkript. Kannste wieder helfen?

edit2:
Hab mir die Seite mal im IE angeschaut. Dort funzt es. Ich benutze normalerweise FF und dort bleibt einfach jedes Offen, bei dem ich drüberge"overt" bin. Die schliessen sich erst, wenn ich eines anklicke.
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben