DHTML: Menü in unterschiedliche Richtungen klappen/anzeigen?

[Hannes]

Hallo DHTML-Experten :)

Ist es möglich, ein Menü per DHTML nicht nur in der Standardstruktur:

Menü
|__ Submenü
|__ Submenü
      |__ Subsubmenü

zu klappen, sondern auch in anderen Variationen? Konkret möchte ich folgende Navigation umsetzen:

http://www.hellion.at/dhtmltemplate.gif

(Zustand beim Klicken auf "Projekt" und dann "Projekt3" gezeigt).

Die Navigation auf der linken Seite sollte evtl. einige Zentimeter nach unten versetzt gezeigt werden, ist das in DHTML möglich? Habe einige DHTML-Menubuilder und Beispielscripts ausprobiert, es handelt sich aber immer um die "klassischen" Ausklappmenüs.

Wäre sehr dankbar, wenn mir jemand weiterhelfen könnte!

lg
Hannes

[Christoph Schnauß]

hallo Hannes,

Ist es möglich, ein Menü per DHTML nicht nur in der Standardstruktur [...] zu klappen, sondern auch in anderen Variationen?

Ja.

Konkret möchte ich folgende Navigation umsetzen:
http://www.hellion.at/dhtmltemplate.gif

bissel große Schrift, aber wenn du es so möchtest ...

Das Problem ist, daß es derart viele Möglichkeiten gibt, so ein DHTML-Menü zu basteln, daß man dir keine Pauschal-Antwort geben kann. Du müßtest schon deinen bisherigen Code posten (oder besser noch als Textdatei auf eine temporäre Adresse laden und den link angeben), damit man sich konkret anschauen kann, welche "Bauart" du nun gerne haben möchtest und wo das Problem liegt, daß du es nicht hinbekommst. Irgendwelche Grafiken sind da so gut wie völlig unnütz.

Grüße aus Berlin

Christoph S.

[Chräcker Heller]

Hallo,

Ist es möglich, ein Menü per DHTML nicht nur in der
Standardstruktur(...)zu klappen, sondern auch in anderen
Variationen?

klar ;-) Du "must" Dir verinnerlichen, das diese Menüs auf den Seiten keine Funktionen des Betriebssystemes sind, die per Befehl angesprochen werden. Hier bedient man sich also keiner vorgefertigten Bibliotheken. Diese Menüs sind alle "simuliert" und "von Hand gemacht" (von irgendjemanden eben ;-)) - Es handelt sich um nichts anderes als um Div-Bereiche (also Links, die jeweils zusammengefast (je Ebene) in einem Div-Paar stehen) und diese Divbereiche werden per css

a) positioniert und
b) per CSS-manipulation (über Javascript) ein und ausgeblendet.

(Es gibt ja einen css-Wert der divbereiche auf sichtbar oder unsichtbar setzt) - WO nun die Divbereiche unsihtbar liegen und dann beim sichtbar werden erscheinen, und wie breit diese Divbereiche sind etc liegt alleine beim Ersteller des ganzen jedöns und ist fast nur von seiner Fantasie abhängig. (Wenn man bei Aufklappmenüs überhaubt von fantasie sprechen kann ;-))

Chräcker

[Hannes]

Danke für Eure Antworten!

Die Grafik stellt nicht die tatsächliche Navigation dar, sondern wurde nur zur Veranschaulichung in Photoshop auf die Schnelle zusammengetragen ;-)

Da werde ich mich wohl tiefer in DHTML eingraben müssen. Könnt ihr mir ein paar gute Tutorials empfehlen? Diejenigen, die ich via Google gefunden habe, waren recht lückenhaft, mit wenigen Beispielen..

Danke!
Hannes

[Christoph Schnauß]

hallo,

Könnt ihr mir ein paar gute Tutorials empfehlen?

Wie wärs mit SELFHTML?

Und wenn du zusätzlich etwas zum Studieren brauchst, schau dir einfach mal bei dem link, den Chräcker gern in seiner Signatur verwendet (http://www.schubladendinge.de) den Quelltext an *g*
Das ist eins der besten Beispiele, wie man DHTML sinnvoll einsetzen kann.

Grüße aus Berlin

Christoph S.

[Chräcker Heller]

Hallo,

Danke, aber Einspruch ;-))

Selfhtml ist als Tutorial nur bedingt zu gebrauchen. Nicht falsch verstehen, ich habe selber fast alles da raus gelernt, aber es ist doch eher ein Nachschlagewerk und eine Einführung und sicherlich ausgedruckt auch als Bettgeradesteller zu nutzen, aber nicht wirklich "für alle" Tutorial gebräuchlich....

schau dir einfach mal bei dem link, den Chräcker gern in seiner
Signatur verwendet (http://www.schubladendinge.de) den
Quelltext an *g*
Das ist eins der besten Beispiele, wie man DHTML sinnvoll
einsetzen kann.

naja, auch hier, wenn ich darf, Einspruch. Ich nutze auf dieser Seite nur dhtml, weil ich für Serverseitige Sprachen keine Lernzeit hatte ,-) Es ist eine typische Tesafilmseite. (Allerdings kann man da gut das ein und ausblenden von Div-bereichen sich anschauen;-))))

Besser fänd ich da das Stempelgeheimnis, wenn der Code dort nicht so fürchterlich (und fürchterlich veraltet) wäre.... Ich habe bereits einen besseren Stempelcode (sogar operatauglich ,-)) auf meiner heimischen Platte, aber da fehlt noch die cookie und Postkartenfunktion, und wie mein Terminkalender so aussieht ,-)))

Was aber niemanden abhalten soll, meine Seiten zu besuchen ;-))))))

Aber trotzdem: Danke! ;-)

Chräcker

[Chräcker Heller]

Hallo,

leider kenne ich kein gutes Tutorial, eigentlich kenne ich gar keins. (Vielleicht hänge ich mir mal ein "I" rum und schreib eins?)

Fürs erste: es ist nicht soooo schwer. Ehrlich nicht. Man muß es nur Schritt für Schritt versuchen.

Nimm einfach mal einen beliebigen div bereich, also

<div>dies wird mein erstes dhtmlscript</div>

1. und versuche mittels css (ruhig direkt per style="" in den html-Tag) diesen Divbereich an der "x/y" position 100,100 zu positionieren. (Siehe eben dazu selfhtml, positionierung von Elementen, würde ich raten....)

2. versuche dann, diesen Div-bereich direkt mit der visible-Eigenschaft (siehe selfhtml) auf unsichtbar zu schalten, also die Seite lädt - und man sieht nichts ,-)

3. setze einen weiteren link auf die Seite außerhalb des unsichtbaren Divbereiches, der, wenn man draufklickt, eine Javascriptfunktion eines Javascriptprogrammes aufruft. Diese Funktion soll den visibility-Wert des oben genannten Wertes von "unsichtbar" auf "sichtbar" ändern. (das ist der knifeligste Punkt.... dazu kannst Du in der Tat mein Script meiner Schubladenseite mal durchsuchen, hast Du die ersten beiden Punkte geschaft, dann könntest Du wissen, wonach Du suchen must....)

4. teste das immer mit zumindest den beiden Browsern IE und mozilla, am besten auch mit Opera, um ein gefühl dafür zu bekommen, worauf Du Dich einläst ,-))))

5. überlege, wie man den Link, der die JS-Funktion aufruft, dazu bekommen könnte, das bereits beim überfahren mit der Maus(!) die Funktion zum anzeigen des Divbereiches aufgerufen wird.

6. ändere den Code des Div so, das es wieder beim laden der Seite direkt erscheint und schreibe eine umgekehrte Funktion, also eine, die nach dem Klick auf dem Link das Div auf unsichtbar stellt.

7. überlege, wie man den Link dazu bringen könnte, das beim verlassen  des Linkbereiches mit der Maus diese ausblendfunktion startet.

8. erstelle zwei Divbereiche, blende beide aus, erstelle zwei Links und versuche, mit jedem Link ein bestimmten Divbereich ein bzw auszublenden. (Dazu muß der link der Ein-ausblendfunktion eine Zahl übergeben anhand die Funktion weiß, welches Div ein bzw ausgeblendet wird

usw usw...... so habe ich es gelernt. Stück für Stück.... Und es kann richtig Spaß machen ,-))))

Chräcker

PS. bitte nicht böse sein: ich beantworte weitere Fragen IM Forum sehr gerne, nur nicht per E-Mail ;-))))