(MOZILLA) JavaScript-freies Klappmenü – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self (MOZILLA) JavaScript-freies Klappmenü Thu, 29 May 03 17:41:36 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409437#m409437 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409437#m409437 <p>Hi,</p> <p>einerseits zum Experimentieren, andererseits um meine Browser-Startseite etwas zu optimieren gestalte ich mir gerade ein nur auf CSS und HTML basierendes aufklappendes Menü. Zielsystem ist also ein hinreichend neuer Mozilla. Entsprechend habe ich auch keine Skrupel, XML mitten in HTML zu benutzen ;-)</p> <p>Das bisherige Ergebnis:</p> <p>submenu               { display:block; padding:0; margin:0; }<br> text:after            { padding-left:4px; width:10px; height:10px; content:url(file:///D:/Web.de/online/img/menu.png); }<br> items                 { display:none;  padding:0 2px 2px 2px; margin:0; position:absolute; background-color:#FFFFFF; border:1px solid #000000; }<br> item                  { display:block; }<br> submenu > items       { display:none; }<br> submenu:hover > items { display:block; }</p> <p><submenu><br>   <text><a href="...">...</a></text><br>   <items><br>     <item><a href="...">...</a></item><br>     <item><a href="...">...</a></item><br>     <submenu>...</submenu><br>   </items><br> </submenu></p> <p>An Stelle der Links kann auch nur Text stehen, die Schachtelbarkeit ist angedeutet. Nun ergeben sich ein paar Probleme, die zu lösen ich leider nicht fähig war:</p> <ul> <li> <p>Das ganze ist leider Blocklevel. Mir würde es verdammt gut schmecken, wenn das Menü als Inline-Element agieren würde. Meine diesbezüglichen "Erfolge" waren, dass sich das Untermenü unterhalb des umgebenden Blocklevel-Elements anordneten, linksbündig natürlich. Dummerweise muss man also ggf. mit der Maus quer über den ganzen Bildschirm, und bis dahin ist das :hover nicht mehr wirklich gegeben ... Der Workaround, Blocklevel-Elemente z.B. durch eine Tabelle zu erzeugen, macht mich keinesfalls glücklich.</p> </li> <li> <p>Vermutlich in die selbe Bresche schlägt dies: Ich habe keinen Weg gefunden, das Untermenü _rechts_ des Hauptmenüpunktes öffnen zu lassen. Klingt ja auch irgendwie logisch, dass die Tendenz in die nächste Zeile geht, solange es Blocklevel ist :-) Und _auf_ dem Hauptmenüpunkt wollte ich das Untermenü dann auch nicht öffnen lassen.</p> </li> <li> <p>Ein wenig nervig ist auch die Eiganart von Mozilla, die Grafik bei :after {url()} regelmäßig erst in einer Standardgröße darzustellen (irgendwas um die 14x14, schätze ich), um erst dann die echte Größe der Grafik zu beachten. Die width- und height-Angaben waren erfolgfrei.</p> </li> </ul> <p>Kann mir jemand zu dem einen oder anderen Punkt etwas sagen? Kritiken zu meinem Code werden natürlich auch gerne entgegengenmmen; aber bedenkt bitte, er hat noch Draft-Charakter :-)</p> <p>Cheatah</p> <div class="signature">-- <br> X-Will-Answer-Email: No<br> X-Please-Search-Archive-First: Absolutely Yes </div> (MOZILLA) JavaScript-freies Klappmenü Thu, 29 May 03 17:59:45 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409444#m409444 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409444#m409444 <p>Hi again,</p> <p>man sollte niemals mit Dummy-Daten testen. Argl.</p> <p>Punkt 4: Der rechte Rand eines Unter-Untermenü reicht leider nicht über den seines Vaters hinaus. Solange die Menüpunkte in der Hierarchie immer kürzer werden, ist das kein Problem ;-) Das merke ich gerade zum ersten Mal - vielleicht fliegt mir gleich die Lösung entgegen, aber spontan kam ich auf keine solche.</p> <p>Eine kleine Verbesserung habe ich aber trotzdem noch gefunden ;-) Bei dem zuvor geposteten CSS verrutschen z.B. in einer Tabelle rechts neben dem Hauptmenüpunkt liegende Elemente, wenn man das Menü auf- bzw. zuklappt. Man ändere das CSS wie folgt:</p> <p>items                 { display:block; [...] }<br> submenu > items       { visibility:hidden; }<br> submenu:hover > items { visibility:visible; }</p> <p>Cheatah</p> <div class="signature">-- <br> X-Will-Answer-Email: No<br> X-Please-Search-Archive-First: Absolutely Yes </div> (MOZILLA) JavaScript-freies Klappmenü Thu, 29 May 03 18:26:22 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409441#m409441 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409441#m409441 <p>Hi,</p> <blockquote> <ul> <li>Das ganze ist leider Blocklevel. Mir würde es verdammt gut schmecken, wenn das Menü als Inline-Element agieren würde.</li> </ul> </blockquote> <p>Hm. Ich weiß nicht, wie weit Mozilla CSS 2.1 unterstützt. Aber dort gäbe es noch inline-block (verhält sich nach innen wie ein Block-Element, nach außen wie ein (replaced) inline-Element).</p> <p><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" rel="nofollow noopener noreferrer">http://www.w3.org/TR/CSS21/visuren.html#propdef-display</a></p> <blockquote> <ul> <li>Ein wenig nervig ist auch die Eiganart von Mozilla, die Grafik bei :after {url()} regelmäßig erst in einer Standardgröße darzustellen (irgendwas um die 14x14, schätze ich), um erst dann die echte Größe der Grafik zu beachten. Die width- und height-Angaben waren erfolgfrei.</li> </ul> </blockquote> <p>hilft display:block; ?</p> <p>cu,<br> Andreas</p> <div class="signature">-- <br> Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.<br> <a href="http://mud-guard.de/?" rel="nofollow noopener noreferrer">http://mud-guard.de/?</a> <a href="http://www.andreas-waechter.de/" rel="nofollow noopener noreferrer">http://www.andreas-waechter.de/</a> <a href="http://www.helpers.de/" rel="nofollow noopener noreferrer">http://www.helpers.de/</a> </div> (MOZILLA) JavaScript-freies Klappmenü Fri, 30 May 03 17:28:50 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409438#m409438 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409438#m409438 <p>Hi,</p> <p>aktueller Stand:</p> <p>submenu               { display:inline-block; padding:0; margin:0 0 0 4px; }<br> items > submenu       { display:block; }<br> text:after            { padding-left:4px; width:10px; height:10px; content:url(...); }<br> items                 { display:inline-block; visibility:hidden; padding:0 2px 2px 6px; margin:0 0 0 -16px; position:absolute; background-color:#FFFFFF; border:1px solid #000000; }<br> item                  { display:block; }<br> submenu:hover > items { visibility:visible; }</p> <p>Optional kann mit</p> <p>items.below           { display:block; }</p> <p>ein Untermenü unterhalb seines Menüpunktes dargestellt werden. Empfehlenswert ist das erst ab der zweiten Ebene, oder wenn bereits die erste Ebene innerhalb eines Blocklevel-Elementes steht.</p> <p>Der HTML-Code bleibt gleich:</p> <blockquote> <p><submenu><br>   <text><a href="...">...</a></text><br>   <items><br>     <item><a href="...">...</a></item><br>     <item><a href="...">...</a></item><br>     <submenu>...</submenu><br>   </items><br> </submenu></p> </blockquote> <p>Das ganze entspricht schon ziemlich meinen Wünschen; lediglich die Unter-Untermenüs haben noch nicht die Breite, die sie brauchen. Ich bin mir ziemlich sicher, dass es an irgendeiner Vererbung liegt (vielleicht auch im Zusammenhang mit der zunächst fehlenden Sichtbarkeit einiger Elemente), die ich nicht beachtet habe - und leider auch nicht finde. Wenn ich items noch ein width:100px; verpasse, ist die Darstellung "korrekt", die Untermenüs gehen sowohl rechts als auch unten über den Rand des vorherigen hinaus; es ist also offenbar kein prinzipieller Irrtum.</p> <p>Kann mir da noch jemand auf die Sprünge helfen?</p> <p>Cheatah</p> <div class="signature">-- <br> X-Will-Answer-Email: No<br> X-Please-Search-Archive-First: Absolutely Yes </div> (MOZILLA) JavaScript-freies Klappmenü Sun, 01 Jun 03 10:38:26 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409439#m409439 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409439#m409439 <p>Hallo Cheatah,</p> <blockquote> <p>Kann mir da noch jemand auf die Sprünge helfen?</p> </blockquote> <p>Oh oh............... Das Problem ist die overflow-Eigenschaft:</p> <p><img src="http://www.christian-seiler.de/temp/cheatah-menue.png" border="0" alt=""></p> <p>Wie Du siehst, bekommt die Box des zweiten Untermenüs (<items>) nur eine bestimmte Breite - sie geht nämlich bloß zum Rand des ersten Untermenüs. (<items>) Der Inhalt von den verschiedenen <item> ist nun jedoch zu groß. Daher geschieht wie nach <a href="http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping" rel="nofollow noopener noreferrer">http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping</a> ein overflow. Dieser overflow bewirkt, dass alle <item> aus dem <items> "herausfließen". Das <items> wird in diesem Fall *nicht* vergrößert. Wenn Du nun dem <items> eine größere Breite gibst, dann hat dies zur Folge, dass <items> aus dem <submenu> herausfließt, was auch gewollt ist.</p> <p>Ich sehe keine Möglichkeit, das Problem außer mit einer width-Angabe zu beheben. Ich hatte zu overflow schon mal einen Thread: </archiv/2003/4/44302/> Mit CSS ist es meiner Ansicht nach das, was Du willst, nicht machbar. Man bräuchte im Prinzip ein overflow: resize-box; oder so ähnlich, damit man das realisieren kann, was Du hier willst oder auch das, was ich in dem anderen Thread wollte. Leider gibt es das aber nicht.</p> <p>Viele Grüße,<br> Christian</p> (MOZILLA) JavaScript-freies Klappmenü Sun, 01 Jun 03 18:13:31 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409440#m409440 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409440#m409440 <p>Hi,</p> <p>ich arbeite momentan mit einem Netscape 4 auf Mac, deswegen kann ich schwerlich irgendwas testen :-) Aber:</p> <blockquote> <p>Dieser overflow bewirkt, dass alle <item> aus dem <items> "herausfließen". Das <items> wird in diesem Fall *nicht* vergrößert. [...]<br> Ich sehe keine Möglichkeit, das Problem außer mit einer width-Angabe zu beheben.</p> </blockquote> <p>So habe ich das mittlerweile auch gelöst, bekam dann allerdings Schwierigkeiten, overflow und clip so zu kombinieren, dass zu lange Einträge vernünftig abgeschnitten werden. Dieses Problem habe ich allerdings noch nicht wirklich lange bearbeitet, weil ich schließlich Herr der Einträge bin ;-)</p> <p>Mal schauen, ob ich dazu noch etwas finde. In jedem Fall danke für Deine Bestätigung.</p> <p>Cheatah</p> <div class="signature">-- <br> X-Will-Answer-Email: No<br> X-Please-Search-Archive-First: Absolutely Yes </div> (MOZILLA) JavaScript-freies Klappmenü Thu, 29 May 03 18:38:32 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409442#m409442 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409442#m409442 <p>Hi,</p> <blockquote> <p>Hm. Ich weiß nicht, wie weit Mozilla CSS 2.1 unterstützt.</p> </blockquote> <p>weit genug, wie ich jetzt merke ;-)</p> <blockquote> <p>Aber dort gäbe es noch inline-block (verhält sich nach innen wie ein Block-Element, nach außen wie ein (replaced) inline-Element).</p> </blockquote> <p>Ich hatte erfolgarm mit inline-table experimentiert. inline-block tut das gewünschte; bis auf, dass die Grafik von text:after nicht überdeckt wird (auch nicht bei display:none, dann bleibt einfach eine Lücke). Da (und zu der fehlenden Breite bei Unter-Untermenüs, die sich jetzt umso mehr bemerkbar macht) werde ich aber hoffentlich noch was zu finden. Danke!</p> <blockquote> <blockquote> <ul> <li>Ein wenig nervig ist auch die Eiganart von Mozilla, die Grafik bei :after {url()} [...]<br> hilft display:block; ?</li> </ul> </blockquote> </blockquote> <p>Leider nicht.</p> <p>Cheatah</p> <div class="signature">-- <br> X-Will-Answer-Email: No<br> X-Please-Search-Archive-First: Absolutely Yes </div> (MOZILLA) JavaScript-freies Klappmenü Thu, 29 May 03 18:50:50 Z https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409443#m409443 https://forum.selfhtml.org/self/2003/may/29/mozilla-javascript-freies-klappmenue/409443#m409443 <p>Juppheidi,</p> <blockquote> <p>[...] die Grafik von text:after nicht überdeckt wird (auch nicht bei display:none, dann bleibt einfach eine Lücke). Da [...] werde ich aber hoffentlich noch was zu finden.</p> </blockquote> <p>z.B. ein</p> <p>items { [...] margin:0 0 0 -16px; [...] }</p> <p>wobei sich die Größe aus Breite der Grafik + padding-left von text:after + 2px (bis 5px), deren Ursprung ich noch suche ;-) berechnet.</p> <p>Update:<br> submenu               { display:inline-block; [...] }<br> items > submenu       { display:block; }<br> items                 { [...] margin:0 0 0 -16px; [...] }</p> <p>Cheatah</p> <div class="signature">-- <br> X-Will-Answer-Email: No<br> X-Please-Search-Archive-First: Absolutely Yes </div>