Nachgelegt: Pulldown für Internet Explorer
Samstag, 18. März 2006, 15:11
Im vorigen Artikel habe ich eine Vorgehensweise beschrieben, wie Pull-Down-Menüs über einfache CSS-Anweisungen erreicht werden können und ganz ohne javascript. Leider funktioniert das im Internet Explorer nicht, vor allem da dieser bis auf das a-Element keinen hover-Effekt anwenden kann. Ich habe den Internet Explorer Nutzern geraten, sich einen ordentlichen Browser anzuschaffen, wozu ich immer noch stehe. Trotzdem konnte ich kaum schlafen vor Mitleid und in Gedanken an all die Nutzer, denen nun wichtige Informationen entgehen werden ( 
), nur weil sie nicht in der Lage sind, Firefox, Opera oder ähnliche Browser zu installieren.
Nun ist der Bau eines javascript-basierten Pull-downs nicht so schwer, findet er sich doch auf diversen Seiten. Ich wollte aber die CSS-Technik nicht vollkommen ausser Acht lassen (für die Browser, die das benutzen können), ausserdem könnte ich den Quelltext nicht leiden, wenn überall onmouseover und onmouseout steht.
Lösung
Es wird nun eine Script-Datei eingebunden, die zuallererst ein onload-Event einträgt, falls der Browser das all-Objekt kennt (das trifft meines Wissens nur auf den Internet Explorer zu..). In der aufgerufenen Funktion init() werden alle die Elemente gesucht, die der Klasse ‘menu’ angehören. Die Funktion getElementsByClassName habe ich mir bei TM abkopiert. Die Funktion geht alle Elemente im Dokument durch und listet alle die Elemente im Ausgabearray, die im Class-Attribut die gesuchte Klasse enthalten. Danach wird für jedes dieser Elemente ein onmousover-Event eingetragen. Da das Script nur für den Internet Explorer gedacht ist, brauche ich mich mit den verschiedenen Funktionen der verschiedenen Browser nicht rumzuschlagen. Ein .attachEvent('onmouseout',collapse); fügt die entsprechende Funktion ein. Wichtig anzumerken wäre, dass mit attachEvent der aufzurufenden Funktion (collapse) keine Argumente übergeben werden können!
In expand() wird das ul-Element gesucht und dessen display-Attribut auf ‘block’ gesetzt, andersherum in collapse() wird das display-Attribut wieder auf ‘hidden’ gesetzt.
Einige Anmerkungen
Um das Ausfahren aus dem Menüelement ein wenig sauberer hinzubekommen, musste ich einen padding-Abstand einfügen (1px). Ausserdem hat der Internet Explorer Probleme mit dem herunterreichen von Ereignissen zu haben, denn bei einem Link-Element innerhalb eines h2-Elements wird das onmouseover-Script des Letzteren scheinbar nicht ausgeführt. Das Script schaut also, ob das h2-Element (das für das Ausfahren des Menüs zuständig ist) ein a-Element enthält und falls ja, dann wird das onmouseover-Event auf das a-Element gesetzt. Dementsprechend muss die Funktion expand() weiter ‘oben’ im Elementenbaum suchen können:
if (evt.parentNode.getElementsByTagName("ul").length>0)
evt.parentNode.getElementsByTagName(”ul”).item(0).style.display=’block’;
else if (evt.parentNode.parentNode.getElementsByTagName(”ul”).length>0)
evt.parentNode.parentNode.getElementsByTagName(”ul”).item(0).style.display=’block’;
Tja, das wars auch schon fürs Erste. Wieder: Kommentare, Erfahrungsberichte u.ä. immer her damit!
Category: Programmierung, javascript
Tags: DOM, internet, javascript, Navigation, Programmierung, weblog, xhtml
- Add this post to
- Del.icio.us -
- Meneame -
- Digg
Kommentar von Stefan
Made Montag, 5 of Juni , 2006 at 21:46
Hallo,
erstmal Danke für die gute Anregung. In einem ordentlichen Browser funktioniert schon alles super, jedoch macht mir die hier gezeigte Hilfe Probleme im IE. Dort werden
- meine Links schwarz dargestellt, obwohl laut CSS weiß definiert ist
- die Menüs klappen nicht gleich wieder zu - ist eher ein Glücksspiel wann was wieder zu klappt
- unter einem Menüpunkt brauche ich mehrere Spalten im Untermenü. Diese habe ich als Tabelle mit “UL”s in 3 “TD” Elementen erstellt. Im IE wird die gesamte Breite immer belegt, aber die 2. / 3. Spalte nicht mit Inhalt gefüllt.
Hat jemand Ideen, wie das zu beheben wäre?
Kommentar von Omar Abo-Namous
Made Montag, 5 of Juni , 2006 at 22:14
Hallo Stefan,
Vielleicht kannst du einen Link auf deine Testseite hinterlegen, dann kann ich dir vielleicht helfen. In meinem Menü sind die Unterpunkte tatsächlich schwarz, es sei denn beim hover-effekt.
Dass die Menüs nicht immer zuklappen habe ich auch schon bemerkt. Das Problem hat m.E. damit zu tun, dass das Event (onmouseout) nicht bemerkt wird. Ich weiss nicht, ob es da Abhilfe geben wird.. Deine dritte Nachfrage habe ich einfach nicht verstanden. Wenn du mehrere Spalten für die unterpunkte haben möchtest, kannst du innerhalb der li-Elemente jeweils eine mehrspaltige Tabelle mit festen breiten einfügen.
Kommentar von Soophie
Made Donnerstag, 5 of Oktober , 2006 at 16:12
immer dieses **** jvscript. Es !muss! auch ohne gehen.
Zum Thema IE: Ich hasse ihn auch, aber weit über 80% der Internetnutzer nutzen ihn noch immer, so muss man/frau einfach darauf konzipieren.
Kommentar von Kakashi
Made Montag, 16 of Oktober , 2006 at 15:41
Javascript ist immer noch ein Sehr praktisches Hilfsmittel…
Des weiteren weiß ich nicht was ihr alle gegen den IE habt. Wenn ihn 80% aller Leute nutzen kann er doch so schlecht nicht sein.
Ein Lob an den Autor dieses Blogs, sehr gelungen
Kommentar von Martin
Made Montag, 20 of November , 2006 at 11:57
Der IE ist für den User ganz brauchbar, für Entwickler ist “Nightmare on Elm Street” 1 bis 6 zusammen, der absolute Horror.
Kein ordentliches Debugging, keine brauchbaren Fehlermeldungen, kein sauberer CSS-Support.
Sehen konzipierte Seiten in Netscape, Firefox, Opera etc. noch ziemlich gleich aus und reagieren sauber, macht der IE (auch in Version 7) gerade das, was er möchte.
Die Entwicklung unter IE benötigt aus meiner Sicht ca. 3 mal soviel Zeit wie unter Firefox.
Kommentar von Micha
Made Dienstag, 21 of November , 2006 at 12:47
Also ich bekomm das nicht hin, kann man nicht irgendwo eine Beispielseite ins Netz stellen wie das aussieht mit dem Quelltext und die js Datei. Ich fummle nun seit 4 Wo aber nix geht. Wäre schön wenn mir jemand nur mal z.B. mit einem Menü z.B. Überschrift da was zaubern kann. Ich verzweifle so langsam heul…. bitte an webmaster-mwa@web.de Danke !!!
Kommentar von Omar Abo-Namous
Made Dienstag, 21 of November , 2006 at 14:08
@Micha: schau dir bitte diesen Artikel an:
CSS-Pulldown auch für Internet Explorer
Dort ist es ein wenig einfacher und sogar ohne javascript! Wenn du dann immer noch nicht weiterkommst, erstelle ich noch eine Beispielseite extra hiefür.
Gruss, Omar
Kommentar von Xing
Made Freitag, 1 of Dezember , 2006 at 15:33
Naja, der IE mag vielleicht für manche nicht gerade der Renner sein, aber man muss sich als Webseitenentwickler immer eines bewusst sein: Entweder man geht mit Microsoft mit und macht seine Page IE kompatibel, wie es die meisten meiner Meinung nach zurecht tun, oder man sagt nein und optimiert seine Page für Opera und Firefox, dann ist aber die Gefahr groß, dass die Page nur von Randgruppenusern besucht wird, weil ja wie erwähnt 80% immer noch den Internet Explorer benutzen.
Meiner Meinung nach sollte man nicht immer auf Microsoft rumhacken. Mag sein dass die Vorschläge vom W3C auf einen einheitlichen (X)HTML- und CSS-Standard schön und gut sind, aber Microsoft hat auch das Recht sich mit seinen Produkten nicht daran halten zu müssen, denn sie sind halt die Größten und Einzigsten auf dem Markt!
Als Netscape vor Jahren so unsinnige propritäre Erweiterungen wie frames und layer eingeführt hat, die mittlerweile vom W3C was weis ich wieso als missbilligt angesehen werden, hat keiner rumgemeckert!
Kommentar von Wing
Made Dienstag, 27 of März , 2007 at 15:17
Wo find ich denn jetzt die benötigte Javascriptdatei, weil der Link:
http://www.toomuchcookies.net/wp-content/themes/gb_conn/menuie.js
geht leider nicht mehr, wäre schön, wenn die Datei wieder online gehen würde.
Gruß,
Wing
Kommentar von Omar Abo-Namous
Made Mittwoch, 28 of März , 2007 at 02:09
@Wing: Die Datei ist wieder vorhanden.
