Lange, lange ist es her, dass die Technik für pure CSS Menüs für Webseiten gefunden wurden. Es gibt einige Vor- und Nachteile, doch hat sich gezeigt, dass CSS Menüs sinnvoller sind als Javascript oder gar Flash Menüs.
Ich möchte hier nicht das Rad neu erfinden und erklären, was man unter solchen Menüs versteht oder wie die Standardlösung für die Unterstützung sämtlicher Browser aussieht. Viel mehr möchte ich hier eine mögliche Lösung zeigen, wie CSS Drop-Down Menüs mit Hilfe des mootools Frameworks auch im InternetExplorer zum laufen gebracht werden können.

Falls du, geneigter Leser, keine Ahnung hast, worum es hier geht:

http://www.alistapart.com/articles/dropdowns/

Zuerst Bekanntschaft mit dieser Art Menüs habe ich jedoch bei Eric Meyer:

http://meyerweb.com/eric/css/edge/menus/demo.html

Nachdem nun jedem klar sein sollte, was man unter solchen Menüs versteht, und wie es allgemein erstellt wird, möchte ich auf ein anderes, von mir aus gesehen, noch grösseres Problem kommen als ein solches Menü kompatibel mit IE/Win zu machen: Mouseover Menüs sind absolut schlecht in Bezug auf die Accessability! Besuch doch einmal eine Seite mit einem solchen Menü mit einem Touchscreen Gerät (z.B. iPhone). Da es auf solchen Geräten kein “Überfahren mit der Maus” gibt, kann man sämtliche Untermenü-Seiten nicht zugreifen! Eine Sackgasse sondergleichen.
Wenn immer also ein solches Menü verwendet wird, muss man eine Alternative bieten können.

Und nun zu meinen Lösungen:

1. Mit mootools das Menü IE-Kompatibel machen

Wie schon bei alistapart gesehen, besteht der Trick darin, dass man den Listenelementen (li) dynamisch beim Überfahren mit der Maus eine CSS-Klasse zuordnet. So kann man im Stylesheet Dokument via Klassenname auf die Elemente zugreifen. Beim alistapart Artikel sah das Skript dazu so aus:

    startList = function() {
        if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav");
            for (i=0; i

Nicht sehr lang und schwierig, aber sofern sowieso das mootools framework in der Seite eingebunden ist, geht das auch viel eleganter. Hier meine Lösung:

function fixIEHover() {
	 $$('#navbarContainer li').each(function(listElement) {
		 listElement.addEvent('mouseover', function() {
			 this.addClass('over');
		 }); 

		 listElement.addEvent('mouseout', function() {
			 this.removeClass('over');
		 });
	 });
}

Die Funktion wird dann folgendermassen aufgerufen:

window.addEvent('domready', function(){
	if (window.ie) {
		fixIEHover();
	}
});

2. Das iPhone-Problem
Da es auf mobilen Geräten kein Mouseover-Event gibt, muss eine Alternative her. Meine Standardlösung sieht so aus, dass alle Untermenü-Punkte mit Javascript in die Sidebar verschoben werden. Hier das Beispiel-Skript:

function setupSideMenu() {
    if ($('navbarContainer').getElement('.currentAncestor')) {
        try {      $('navbarContainer').getElement('.currentAncestor').getElement('ul').clone().inject($('sidebarContainer'), 'top').setProperty('id', 'navbarside');
        }
        catch(err) {
            return;
        }
    }
    else {
        try {
            $('navbarContainer').getElement('.active').getElement('ul').clone().inject($('sidebarContainer'), 'top').setProperty('id', 'navbarside');
        }
        catch(err) {
            return;
        }
    }
}

Kommentar dazu:

Zuerst wird der oberste Menü-Eintrag (ein li-Element), der bei mir entweder die Klasse “currentAncestor” oder “active” hat, selektiert. Von diesem ausgehend wird das entsprechende Untermenü (ein ul-Element) ausgewählt, kopiert und in die sidebar, welche die ID “sidebarContainer” hat, verlegt. Indem ich diesem neuen Menüknoten eine ID “navbarside” vergebe, kann ich via CSS diese elegant ansprechen und gestalten.

Damit dies nur bei iPhones (gibt es überhaupt noch andere Smartphones mit Touch Screen ;-) ) geschieht, wird die Funktion nur aufgerufen, falls ein iPhone auf die Seite zugreift. Dies kann folgendermassen gelöst werden:

if(navigator.userAgent.match(/iPhone/i)){
    setupSideMenu();
}

Und mit somit haben wir ein ansprechendes Menü, welches in allen gängigen Browsen funktioniert (und sogar auf dem iPhone).


VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)