Christopher: sliding div-menu, aber das ganze auf den kopf gedreht

Hallo,

das ganze ist schwer zu erklären, am besten ihr schaut euch direkt mal die Seite an, dort ist dann ja auch der Quelltext.
Siehe -> Seite

Ich habe im Internet das Javascript gefunden was ich auf meiner Seite nutze, nun wollte ich gerne die "auslösende Schaltfläche" (in dem Fall ein div) unterhalb des entsprechenden Menu-Contents plazieren.
Im Beispiel ist es ja so, das bei einem Menuclick "darunter" ein Menu aufgeht. Ich hätte aber gerne das "darüber" das entsprechende Menü aufgeht und der Menulink dann quasi nach unten verschoben wird.
Auf meiner Seite kann man ja erahnen wie es dann aussehen soll :)
Ich habe zwar ne ganze Weile hin und her versucht, aber javascript ist eben nicht mein wirkliches Ding.
Kann mir vielleicht jemand sagen wie ich das Skript umschreiben müsste um besagtes Menu zu bekommen.
Danach wollte ich die Menüs dann noch nebeneinander setzen, aber das sollte ja kein Problem seinm, wichtiger wäre wirklich das ich es schaffe den entsprechenden content oberhalb des Menulinks erscheinen zu lassen.

  1. Hallo Christopher,

    Ich habe zwar ne ganze Weile hin und her versucht, aber javascript ist eben nicht mein wirkliches Ding.

    Da frage ich mich natürlich, was du denn versucht hast...

    Eine Erläuterung deines Codes:

    An dieser Stelle in initShowHideDivs() wird das "answer"-Div gesucht:

    var answer = divs[no].nextSibling;  
    while(answer && answer.tagName!='DIV'){  
    	answer = answer.nextSibling;  
    }
    

    divs[no] ist der "question"-Container [weiter oben: if(divs[no].className=='dhtmlgoodies_question')].
    Nun wird der nächte Knoten ausgwählt (http://de.selfhtml.org/javascript/objekte/node.htm#next_sibling@title=nextSibling).
    Dieser düfte aber noch nicht der Richtige sein, da noch Text zwischen den 2 divs steht (ein Zeilenumbruch). Das wird als einzelner Knoten betrachtet.
    Dafür gibt es dann die while-Funktion die checkt ob es sich bei dem aktuellen Knoten um einen div-Container handelt. Ist dem nicht so, wird der nächste Knoten ausgewählt. Diese Schleife wird also einmal durchlaufen in deinem Beispiel.

    Um den Code zu ändern musst du also Folgendes machen:

    Zuerst mal natürlich <div class="dhtmlgoodies_answer">...</div> über <div class="dhtmlgoodies_question">...</div> stellen.

    Sieht dann so aus (und das 3 mal):

    <div class="dhtmlgoodies_answer">...</div>  
    <div class="dhtmlgoodies_question">...</div>
    

    Anschließend in der Funktion initShowHideDivs() die Vorkommen von answer.nextSibling durch answer.http://de.selfhtml.org/javascript/objekte/node.htm#previous_sibling@title=previousSibling ersetzen.

    Alternativ kannst du auch einfach die while-Schleife rausnehmen und direkt
    var answer = divs[no].previousSibling.previousSibling;
    schreiben. Dann ist aber auch wichtig, dass Text zwischen den divs steht.

    Gruß,
    Dodwin

    --
    Dodwin
    1. Erstmal vielen vielen Dank, den Befehl kannte ich halt nicht. Hatte es mit "Zahlenspielen" versucht ... aber das dann doch so einfach ist hätte ich nicht gedacht.
      Naja, nochmal Danke, das klappt jetzt schonmal sehr gut.

      Jetzt habe ich nur noch das Problem das die Menus nebeneinander plaziert nicht 100% funktionieren. Klick ich ein Menu an, so drückt es die anderen zwei auch irgendwie nach unten.

      zum anschauen hier klicken

      Denke es liegt daran das ich ne Tabelle mit 3 Feldern gemacht habe und in jedes Feld einfach ein Menu gepackt habe. Wusste mir aber nicht anders zu helfen als eine Tabelle zu nehmen.

      Hat da vielleicht noch jemand ne Idee?

      1. Hallo Christopher,

        Klick ich ein Menu an, so drückt es die anderen zwei auch irgendwie nach unten.
        Denke es liegt daran das ich ne Tabelle mit 3 Feldern gemacht habe und in jedes Feld einfach ein Menu gepackt habe.

        Richtig. Standardmäßig besitzen Zellen in einer Tabelle die Eigenschaft den Inhalt vertikal zu zentrieren.
        Das kannst du z.B. so umgehen:
        <td style="http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align:top;">...</td>

        Dieser Inline Style ist aber recht unschön.
        Das zeigt sich z.B. dadurch, dass du diese Anweisung 3 mal, also für jede Tabellenzelle setzen willst.

        Um es also sauber zu machen könntest du oben in dem style-Bereich (<style type="text/css">...</style) Folgendes einfügen:

        td {  
          vertical-align:top;  
        }
        

        Das würde bedeuten, dass sämtliche Tabellen-Zellen den Text vertikal oben positionieren.
        Alternativ könntest du der Zelle auch eine Klasse zuweisen (<td class="vertOben">) und oben eine Formatierung für die Klasse angeben (vertOben {...}).

        Siehe http://de.selfhtml.org/css/formate/index.htm@title=SELFHTML für weitere Infos.

        Wusste mir aber nicht anders zu helfen als eine Tabelle zu nehmen.

        Wenn du es noch sauberer lösen willst, dann nimmst du eine Liste und sagst, dass diese horizontal verlaufen soll (Beispiel).

        Gruß,
        Dodwin

        --
        Dodwin
        1. Schade, klappt leider doch nicht.
          Wenn ich das ganze mit ner horizontalen Liste wie in deinem verlinkten Beispiel versuche, dann erscheinen trotzdem alle 3 Menüpunkte untereinander, anstatt nebeneinander.

          1. Hallo Christopher,

            Wenn ich das ganze mit ner horizontalen Liste wie in deinem verlinkten Beispiel versuche, dann erscheinen trotzdem alle 3 Menüpunkte untereinander, anstatt nebeneinander.

            Oh stimmt. Habe mir den CSS-Code von meinem Beispiel leider nicht genauer angeguckt.
            Dort wird davon ausgegangen, dass die Listenpunkte <li>...</li> ein http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente@title=inline-Element sind.
            Die Menüs sind allerdings http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente@title=block-Elemente.

            Der HTML-Code kann zwar gleich bleiben, aber den CSS-Code musst du ein wenig ändern:

            #navlist li {  
            list-style-type: none;  
            width:200px;  
            [ref:self812;css/eigenschaften/positionierung.htm#float@title=float]:left;  
            }
            

            Du wirst allerdings feststellen, dass float in dem Fall ein paar Nebenwirkungen hat, wenn du weiteren Text unter das Menü schreibst.
            Das kannst du einfach umgehen in dem du dem navcontainer eine feste Höhe gibst (CSS: #navcontainer {height:300px}).

            Die Pixel-Angaben musst du in den Beispielen natürlich noch verändern, damit sie passen.

            Einen schönen Abend,
            Dodwin

            --
            Dodwin