(MOZILLA) JavaScript-freies Klappmenü

[Cheatah]

Hi,

Fortführung von </archiv/2003/5/48195/>. Der aktuelle Stand der Dinge ist folgender:

submenu               { display:inline-block; padding:0; margin:0 0 0 0px; }
items > submenu       { display:block; }
text:after            { padding-left:4px; width:10px; height:10px; content:url(...); }
items                 { display:inline-block; visibility:hidden; padding:0 2px 4px 6px; margin:-1px 0 0 -16px; position:absolute; background-color:#FFFFFF; border:1px solid #000000; }
items.below           { display:block; margin:0 0 0 -7px; }
item                  { display:block; }
submenu:hover > items { visibility:visible; }
items                 { width:150px; }
item > *              { width:100%; display:block; }
(urspr. "item > a")

<submenu>
  <text>...</text>
  <items>
    <item>...</item>
    <submenu>...</submenu>
  </items>
</submenu>

Funktioniert in neueren Mozillas einwandfrei, und sieht IMHO sogar annehmbar aus. Verbesserungsvorschläge werden gerne angenommen, ansonsten sei dies ein Vorschlag für die Verwendung bei Eigenbedarf. Das ist aber natürlich nicht der Grund für mein Posting :-)

Ich habe testweise ein <item> mit einem Formular gefüllt (u.a. um mit :focus zu experimentieren). Aus mir nicht schlüssigen Gründen werden jedoch alle folgenden Menüpunkte so dargestellt, als stünden sie separat, außerhalb des Menüs (wobei Untermenüs dort "wie gewohnt" erscheinen). Ein Schachtelungsfehler ist es AFAICS nicht :-) und Zuweisungen von display- und position-Eigenschaften waren erfolgfrei.

Kann jemand die Ursache identifizieren?

Cheatah

[MudGuard]

Hi,

Haste mal ne Mark? Oder ne URL? Oder besser zwei - eins, wo man das Ergebnis bewundern kann und eins, wo man den Fehler mit dem Form sehen kann?

cu,
Andreas

[Cheatah]

Hi,

Haste mal ne Mark? Oder ne URL? Oder besser zwei - eins, wo man das Ergebnis bewundern kann und eins, wo man den Fehler mit dem Form sehen kann?

ich könnte einen neuen Web.de-Dienst damit bauen ... ;-) Nein, sorry, damit kann ich leider momentan nicht dienen. Im Grunde sollte mein Beispielcode aber "fast" reichen, wenn man irgendwo ein <form action="..."/> in ein <item> hämmert und natürlich den <style>-Bereich nicht vergisst. Ich werde aber mal eine Beispieldatei auf meinen uralt-Webspace schieben, sowie ich die Zugangsdaten wiedergefunden habe (argl) :-)

Cheatah

[MudGuard]

Hi,

Haste mal ne Mark? Oder ne URL? Oder besser zwei - eins, wo man das Ergebnis bewundern kann und eins, wo man den Fehler mit dem Form sehen kann?
ich könnte einen neuen Web.de-Dienst damit bauen ... ;-) Nein, sorry, damit kann ich leider momentan nicht dienen. Im Grunde sollte mein Beispielcode aber "fast" reichen, wenn man irgendwo ein <form action="..."/> in ein <item> hämmert und natürlich den <style>-Bereich nicht vergisst. Ich werde aber mal eine Beispieldatei auf meinen uralt-Webspace schieben, sowie ich die Zugangsdaten wiedergefunden habe (argl) :-)

Dann eben nicht...

So ne ganz spontane Idee: form { display:inline; }

cu,
Andreas

[Cheatah]

Hi,

Ich werde aber mal eine Beispieldatei auf meinen uralt-Webspace schieben, sowie ich die Zugangsdaten wiedergefunden habe (argl) :-)
Dann eben nicht...

tja, ich sag Bescheid, wenn ich damit aufwarten kann ...

So ne ganz spontane Idee: form { display:inline; }

Hab ich schon getestet, trotzdem danke :-) Das Problem ist, dass ein simples <form> die komplette (X|HT)ML-Struktur mindestens bis zum äußersten <submenu> zu sprengen scheint. Es mag daran liegen, dass ich XML und HTML mische.

Cheatah

[molily]

Hallo Cheatah,

Aufgrund eines Browsercrashs eine kurze Antwort:

Das, was du mit dem form-Element beobachtest, tritt bei allen natürlichen Blockelementen (div, p, ...) auf, welche in item untergebracht werden. display:inline usw. nützt wie du sagtest nichts, es muss schon ein natürliches Inline-Element (span, ...) sein. Frag mich nicht, warum dies so ist, vielleicht ist eine Mozilla-interne CSS-Eigenschaft verantwortlich (evtl. Standardstylesheet durchsuchen?).

Gegenvorschlag, wenn du ein einziges Formular verwenden willst (was du konkret erreichen willst, habe ich nicht ganz verstanden): Lasse das form-Element das komplette Menü umfassen und bringe im item-Element nur die Inline-Formularelemente (input etc.) unter.

Grüße,
Mathias

[Cheatah]

Hi,

Das, was du mit dem form-Element beobachtest, tritt bei allen natürlichen Blockelementen (div, p, ...) auf, welche in item untergebracht werden.

danke für die Info. Vielleicht sollte ich es doch mal mit korrektem HTML versuchen - obwohl ich geneigt bin, es als Bug zu betrachten, wenn das dann klappt.

vielleicht ist eine Mozilla-interne CSS-Eigenschaft verantwortlich (evtl. Standardstylesheet durchsuchen?).

Das war zwar in der Tat hochinteressant :-) brachte mir diesbezüglich aber leider nichts. Trotzdem danke für den Tipp.

Gegenvorschlag, wenn du ein einziges Formular verwenden willst (was du konkret erreichen willst, habe ich nicht ganz verstanden): Lasse das form-Element das komplette Menü umfassen und bringe im item-Element nur die Inline-Formularelemente (input etc.) unter.

Hm, ja :-)

Cheatah