Suche Tutorial zu CSS Popup-Menü

[Dreamer]

Hallo,

ich habe mit PS eine Menüleiste erstellt. In DW habe ich für jeden der 6 grafischen Menülinks eine Area mit Verknüpfung bestimmt. bzw. ein Menülink davon (Produkte) soll ein Untermenü aufrufen

ich suche ein Tutorial, wie ich bei Mouseover über eine Area eines Images eine Div-Ebene erscheinen lasse und bei Mouseout soll die Div-Ebene wieder verschwinden. Ich kann in DW zwar das Verhalten Popupmenü zeigen nehmen, doch JS möchte ich alleine wegen der Kilobyte (JS-Libary braucht 30 KB).

Hab`s sowas früher schon erstellt mit Ebene visible und Ebene hidden, hab aber wieder alles vergessen und steh momentan auf`m Schlauch und faul bin ich auch grad (nur Schreiben, das geht immer...) Tja und jetzt ist CSS groß in Mode, da muss ich natürlich mithalten



Wäre über Tips und Tuts dankbar,

dreamer

[Terry]

Ich bin mir nicht sicher, ob ich Dich jetzt richtig verstanden habe. Suchst Du so einen ähnlichen Effekt, wie er hier zu sehen ist zum Bilder zeigen? Wenn ja, dann zieh Dir den Quelltext - gehört aber noch ein Javascript dazu, ohne geht´s nicht. Das ist hier ausgelagert - aber das findest Du schon.
Ich hätte auch noch ein anderes Script ohne dass das Bild stehen bleibt bei Mausklick. Es wird dann nur bei Onmouseover gezeigt und verschwindet wieder, wenn die Maus weggeht. Für meine Zwecke fand ich dies aber besser.

[Dreamer]

Nochmals

Ich suche ein Tut, wie ich ein Popup-menü in CSS erstelle, das auch mit dem IE fkt.

Diese JS-Spielereien benötigen allein 30 KB und das für 3 Sublinks in einem Popup-Submenü... etwas aufgebläht das ganze...

Bastien

[webmichl]

Original geschrieben von Dreamer
für 3 Sublinks in einem Popup-Submenü...

Ein 3-Ebenen-Popup-Menu nur in CSS? Ich will nicht behaupten, daß es nicht geht, aber woher soll zB Ebene2 wissen, daß sie noch aktiv ist, wenn sich der Cursor über Ebene 3 befindet?

Ich gehe mal sehr stark davon aus, daß Du um JS nicht herunkommen wirst...

[Jürgen]

Hallo,

schließe mich Webmichl an, ich kenne auch keine Lösung, die mit allen modernen Browsern ein Popupmenü rein auf CSS Basis möglich macht. Theoretisch ist da viel möglich, aber die Browser (vor allem IE) spielen da nicht ganz mit. Und mit 3 Ebenen sehe ich da auch schwarz.

Außerdem musst du ja die 30 kb JS-Datei nur ein einziges Mal laden, daher sehe ich das nicht so negativ. Aber die funktioniert dann wenigstens in allen gängigen Browsern, was ja nicht ganz unwichtig ist. Ich würde daher ohnehin diese zuverlässige Variante bevorzugen.

Gruß, Jürgen

[Dreamer]

Hallo Webmichel,

kein 3 Ebenen-Popup sondern lediglich eine grafische Menüleiste in einem Div. Die Menüleiste unterteilt sich in 6 Bereiche bzw. Links. Alle 6 sind mit DW als rechteckige Areas gekennzeichnet. Nur 1 Menüpunkt soll beim drüberfahren also mouseover einen Div erscheinen(zu Beginn ist dieser hidden) lassen, der z.b. 3 Links beinhaltet bzw. eine Grafik mit area-Links.

Ich habe das ganze bisher probeweise so erstellt, dass bei mouseover über den arealink auf der Menüleiste die unsichtbare(hidden) Ebene mit z.B. 3 Textlinks sichtbar(show) wird. Die vormals unsichtbare Ebene habe ich mit der Fkt. onmouseup belegt, d.h. das Submenü bzw. die jetzt sichtbare Ebene schließt nur auf eine Mausklick auf selbiges.

Wie bekomme ich jetzt das Submenü dazu wieder unsichtbar zu werden, wenn ich mit der Maus aus dem Submenübereich herausfahre. Mouseout fkt. hier nicht???

Bastien

[UweB]

@Dreamer
Das hört sich so an, als ob Du da schon jetzt JS benutzt. Ohne JS geht es - meiner Meinung nach - nur, wenn man den IE ausser acht lässt. Und wer benutzt schon den IE...

@Terry
Was da auf Deiner Seite passiert, würde schon ohne Script gehen
Ein Beispiel:
http://www.indibalou.de/tp/test7.html
Wenn ich das richtig sehe gibt es auf Deiner Seite sechs mal die id "galerie". ids sollten einmalig sein...

Gruß
Uwe

[Dreamer]

Hallo,

es stimmt, ich benutze Javascript, zumindest etwas, gerade mal 1 KB groß.
Das Verhalten Ebene zeigen und verbergen, nicht Popupmenü erstellen per Verhalten, denn das gebraucht die JS-Libary menu.js o.ä. mit 30 KB Größe.

Mittlerweile ist es mir egal ob ich JS oder nicht, ich will aber nicht dieses vorgefertigte Menü in JS von Dreamweaver, das 30 sinnlose KB groß ist sondern lediglich den Layer anzeigen bei Mouseover des areaimages über einen best. Link und wenn ich mit der Maus der sichtbaren Layer verlasse soll er wieder hidden sein. Das Problem an der Sache: ES Funktioniert nicht, obwohl logisch ok...

Bastien

[Jürgen]

Hilft dir dieses Tutorial von Matthias evtl. weiter?
http://www.eruption.ch/tut/tut.htm

Ich denke, das ist doch genau das, was du tun möchtest, oder?

[Terry]

Hallo Uwe,
vielen Dank für Deine Test-Seite - habs mir gleich mal kopiert - kann ich bestimmt noch mal gebrauchen.

Ist trotzdem nicht identisch, da bei mir ja das Bild auf onmouseclick hin alleine stehen bleibt.

Danke auch für den Hinweis mit den ids - wird geändert!

[UweB]

Hallo Terry,
schön, wenn Du´s gebrauchen kannst.
Ich habe mir Deine Seite noch mal angesehen. Nur die beiden unteren Bilder bleiben bei mir stehen (Mozilla u. IE), deshalb war mir das heute morgen nicht aufgefallen.
Eine "OnMouseKlick"-Lösung scheitert ohne JS - wie so oft - am IE. Für (fast) alle anderen Browser reicht es a:hover um a:focus zu ergänzen.

Gruß
Uwe

[Terry]

Hallo Uwe (ist ja eigentlich ziemlich off-topic - aber was solls...) - die anderen Bilder bleiben auch auf OnMouseKlick stehen - allerdings kommt man leicht mit der Maus auf ein anderes - und dann springt es halt wieder um - vielleicht wäre es besser, links nur eine Reihe thumbnails zu machen... Überleg ich noch mal.
- jedenfalls noch mal vielen Dank für die CSS- Tipps ...

[Dreamer]

Hallo Jürgen,

erstmal DANKE für das Tut, habs früher auch mal so gemacht und wies der Herrgott so will hats damals nicht gefunzt(das Tut ist übrigens lückenhaft formuliert...) und das Tut funzt auch nicht. Beispiel hier bitte:

Klar ist: Ich ordne einem Button das Verhalten zu, dass er seine Untermenüebene(die vorher ausgeblendet war) sichtbar macht mit mouseover.

Unklar bzw. was nicht fkt. ist: Nun lege ich einen riesigen(wie in dem Tut) Layer genannt "hiddenarea" unter das Submenü. Links rechts und unter dem Submenü befindet sich nun also der Bereich der hiddenarea. Auf diesen Bereich möchte ich das Verhalten onmouseover(also sobald ich das Submenü mit dem Zeiger verlasse und die hiddenarea mit dem Zeiger berühre) legen, was aber nicht geht. Dreamweaver macht immer automatisch ein onmouseclick daraus, was aber total benutzerunfreundlich ist:-) (wer klickt schon um ein Popup-menü zu schließen???)

Kannst du mir helfen???

Grüße,

dreamer

[Jürgen]

Original geschrieben von Dreamer
Auf diesen Bereich möchte ich das Verhalten onmouseover(also sobald ich das Submenü mit dem Zeiger verlasse und die hiddenarea mit dem Zeiger berühre) legen, was aber nicht geht. Dreamweaver macht immer automatisch ein onmouseclick daraus, was aber total benutzerunfreundlich ist:-) (wer klickt schon um ein Popup-menü zu schließen???)

Und warum änderst du das Verhalten nicht auf "onmouseover"
In der Verhaltenpalette auf das "onClick" klicken, dann stehen dir alle Eventhandler zur Verfügung. Was ist daran benutzerunfreundlich? DW kann ja nicht wissen, was du tun willst

[Dreamer]

Sorry Jürgen, aber mit benutzerunfreundlich meinte ich natürlich nicht den DW sondern ich meinte es sei benutzerunfr. wenn ein Surfer das Untermenü wegklicken muss...

Um Gottes Willen, nie würde ich auch nur ein Haar an dem DW kritisieren

Ich probiers sofort aus...

dreamer, Danke