Joomla Mootools Suckerfish Tutorial - Teil 4

Es ist einige Zeit vergangen, seit wir eine horizontale Lösung für das Joomla Mootools Suckerfish Menü versprochen haben. Inzwischen haben wir unsere Seite samt horizontalem Suckerfish Ausklapp-Menü relauncht. Wie in den vorhergehenden Teilen beschrieben, war es nicht besonders schwierig die Navigation...flach zu legen. Nachdem das getan war, stellte sich jedoch eine andere Frage...

Die meisten horizontalen Suckerfish Menüs haben Menüpunkte mit fester Breite. Das macht manchmal Sinn, manchmal aber auch nicht. Bei unserer Seite z. B. sah das Menü mit fixen Breiten ausgesprochen dämlich aus. Die meisten Tutorials und Beispiele, welche man online findet, das bekannteste wohl von A List Apart, verzichten auf eine Version mit flexibler Breite. Dies soll also eine zusätzliche Herausforderung in diesem Tutorial sein.

Bevor es losgeht, ist ein Hinweis angebracht.

ACHTUNG:
Seit einer Versionsänderung im Extended Menu verhält sich der Menü Style "Flat List" wie im alten mod_mainmenu. Das heisst, die Untermenüs werden NICHT dargestellt. Um eine "Flat List" mit Submenüs darzustellen, muss "Tree List" gewählt werden. Ich hoffe, es haben nicht zu viele an dieser Stelle im Trüben gefischt.

Jetzt kann es aber losgehen. Vorausgesetzt wird der Stand aus dem dritten Teil des Tutorials, d. h., eine funktionierende vertikale Suckerfish Navigation auf Basis des Extended Menü mit integriertem Mootools JS. Bevor wir mit Änderungen an den entsprechenden Dateien anfangen, müssen wir Platz für eine horizontale Navigation schaffen. Am besten würde sie sich im rhuk-Template zwischen Header- und Content-Bereich machen. Da es dort jedoch keine passende Modulposition gibt, fügen wir diese einfach selbst ein.

In der Nähe der Zeile 84 der index.php des rhuk-Templates finden wir folgendes:

...
</div>
<div id="left_outer">
...

...
</div>
<div id="navi"><?php mosLoadModules ( 'navi', -2 ); ?></div>
<div id="left_outer">
...

Sie sehen, wir haben ein Div erstellt, in welchem wir alle Module der Modulposition "navi" laden. Aber die Modulposition "navi" existiert doch gar nicht? Richtig! Wir nutzen diese exklusiv für unsere horizontale Navigation. Was wir also tun müssen, ist eine weitere Modulposition im Backend anlegen und das Hauptmenü dort platzieren. Sie wissen doch, wie das geht, richtig? Oh je...

Sie erreichen die Modulpositionen im Backend über:

Site->Template Manager->Module Positions

Dort tragen Sie eine neue Position namens "navi" ein und speichern das Ganze ab.

Dann gehts wieder in den Modulbereich und auf das Extended Menü Modul. Unter "Position" wählen Sie die neue Position "navi" und speichern.

Im Frontend sollte das Menü nun in der entsprechenden Position erscheinen. Allerdings hat sich, was seine Form angeht, nicht viel getan. Was logisch ist, da wir am Style selbt noch nicht gedreht haben. Wir sehen aber jetzt schon, dass es zu viele für die Breite des Templates wären, wenn alle Hauptmenüpunkte nebeneinander liegen würden. Um an dieser Stelle vorzusorgen, reduzieren wir die Anzahl der Menüpunkte des ersten Menü-Levels im Backend. Die Menüpunkte müssen nicht gleich gelöscht werden. Ein "unpublish" sollte reichen. Deaktivieren Sie also am besten die Punkte "search", "news feeds", FAQs", "Contact Us" und "Wrapper". Jetzt sollten fünf übrig sein. Die passen fast perfekt in unsere Breite.

So meine Damen und Herren, jetzt gehts an die Buletten, wie man hier sagt - das Stylesheet. Sie erinnern sich, dass wir für die Erstellung unseres Menüs ein eigenes Stylesheet namens "jsm.css" hatten.

Dort nehmen wir zunächst folgende Änderung vor:

div.moduletable-jsm {

   float:left;

   width:159px;
   /* ^^ ändern auf width:864px; */
   margin: 0;
   margin-left:-864px;
   z-index: 10;
   position: relative;
}

Ist ja klar, denn wir wollen, dass das Menü über die ganze Breite des Templates läuft. Was es auch tut, wenn Sie jetzt im Frontend mal nachschauen. Das blöde ist nur, dass die Submenüs irgendwie, sagen wir mal nicht korrekt, dargestellt werden.

Folgender Style, welcher das erste Submenü-Level formatiert, findet sich im Stylesheet:

div.moduletable-jsm li ul {
    margin: -25px 0 0 159px;
    position: absolute;
    width: 159px;
    left: -999em; 
    z-index: -10;
    text-indent: 20px;    
}

Das margin: -25px 0 0 159px; war dafür da, dass das Submenü direkt neben dem Haut-Link erscheint und nicht darunter.
Das brauchen wir jetzt natürlich nicht mehr, also aktualisieren wir auf:

div.moduletable-jsm li ul {
    margin:0; 
    padding:0;
    position: absolute;
    width: 159px;
    left: -999em;
    z-index: -10;
    text-indent: 20px;
}

Jetzt sehen die Submenüs korrekt aus, zumindest wenn Sie das JS deaktivieren und Firefox benutzen. Mit aktiviertem JS wird unser jsm.js genutzt und das ist ja noch für die vertikale Lösung gedacht. Deswegen produziert dieses JS momentan nur Unsinn. Wenn Sie JS deaktivieren, sollte die Navi im Firefox an dieser Stelle bereits funktionieren. Falls nicht, bitte nochmal von vorne anfangen. (Ich weiss, ich bin fies.) Der Internet Explorer 6 benötigt das JS um einen Hover-Selector bei Listenelementen zu ermöglichen. Ist das JS deaktiviert, passiert hier gar nichts.

Eigentlich sollten wir an dieser Stelle etwas konstruktiver vorgehen und zuerst das CSS fertig stellen, aber wir sind ungeduldig und wollen sofort Ergebnisse sehen. Also ab in das jsm.js Skript!

Hier ist das Script versehen mit Kommentaren, welche die Änderungen erläutern. Weiter unten finden sie das fertige Skript.

window.addEvent('domready', function() {
    var list = $$('div.moduletable-jsm li');
    list.each(function(element) {
        if ($(element).getElement('ul')) {
            el = $(element).getElement('ul')
            var fx = new Fx.Styles(el, {duration:200, wait:false, transition: Fx.Transitions.Expo.easeOut});
            El.setStyle('left', 0);                // brauchen wir nicht mehr, alle submenüs sollen unter ihren parent items bleiben
            el.setStyle('margin-left', 150);    // dito
            el.setStyle('opacity', 0);
            el.setStyle('display', 'none');        // dito
            element.addEvent('mouseenter', function(){
                fx.clearChain();            
                fx.element.setStyle('display', 'block'); 
                // wird zu fx.element.setStyle('left', 'auto');  da das sub immer unter dem parent auftauchen soll                
                fx.start({'margin-left': 159,'opacity': 1});
                // wird zu fx.start({'opacity': 1}); da wir kein sliden der subs mehr wollen, sondern nur ein einblenden
            });
            element.addEvent('mouseleave', function(){
                fx.clearChain();
                fx.start({'margin-left': 150,'opacity': 0}).chain(function(){fx.element.setStyle('display', 'none');});
                // wird zu fx.start({'opacity': 0}).chain(function(){fx.element.setStyle('left', '-999em');});  gleicher grund wie im mouseenter event
            });
            var lista = $(el).getElements('li');
            lista.each(function(element) {
                element.setStyle('opacity', 0.8);
                var lifx = new Fx.Styles(element, {duration:500, wait:false, transition: Fx.Transitions.Expo.easeOut});
                element.addEvent('mouseenter', function(){
                    lifx.start({'opacity': 1});
                });
                element.addEvent('mouseleave', function(){
                    lifx.start({'opacity': 0.8});
                });                
            });            
        }     
    });
});

Das Fertige sieht dann so aus:

window.addEvent('domready', function() {
    var list = $$('div.moduletable-jsm li');
    list.each(function(element) {
        if ($(element).getElement('ul')) {
            el = $(element).getElement('ul')
            var fx = new Fx.Styles(el, {duration:200, wait:false, transition: Fx.Transitions.Expo.easeOut});
            el.setStyle('opacity', 0);
            element.addEvent('mouseenter', function(){
                fx.clearChain();
                fx.element.setStyle('left', 'auto');
                fx.start({'opacity': 1});
            });
            element.addEvent('mouseleave', function(){
                fx.clearChain();
                fx.start({'opacity': 0}).chain(function(){fx.element.setStyle('left', '-999em');});
            });
            var lista = $(el).getElements('li');
            lista.each(function(element) {
                element.setStyle('opacity', 0.8);
                var lifx = new Fx.Styles(element, {duration:500, wait:false, transition: Fx.Transitions.Expo.easeOut});
                element.addEvent('mouseenter', function(){
                    lifx.start({'opacity': 1});
                });
                element.addEvent('mouseleave', function(){
                    lifx.start({'opacity': 0.8});
                });                
            });            
        }     
    });
});

Jetzt sollten sowohl im Firefox, als auch im IE6 die Submenüs unter den entsprechenden Hauptmenüpunkten korrekt auftauchen.

Was ich wirklich unschön fand, war die Tatsache, dass jeder Hauptmenüpunkt die gleiche Breite hat. Wenn Sie sich unsere Website ansehen, werden Sie verstehen, dass ein Link wie "B01" nicht die gleiche Breite haben sollte wie "Qualitätsmerkmale". Dieses Problemchen in den Griff zu bekommen, war recht einfach...im Firefox. Der IE6 hat hier allerdings mächtig gezickt.

Wir gehen wieder ins jsm.css Stylesheet. Um die feste Breite zunächst wegzubekommen, machen wir aus

div.moduletable-jsm li {
    float: left; 
    padding: 0; margin: 0;
    width: 159px;
}

div.moduletable-jsm li {
    float: left; 
    padding: 0; margin: 0;
}

Jeder vernünftige Browser sollte nun verstanden haben, worum es uns geht - widmen wir uns also dem IE. Der IE6 floatet allerdings die Menüpunkte nun wieder brav untereinander. Wer etwas in CSS dazulernen möchte, sollte sich jetzt etwas Zeit nehmen, diese Website schließen und selbst versuchen, den Grund dafür zu finden. Glauben Sie mir, es lohnt sich.

Es wäre schon fies genug, die passenden Selectoren zu finden, welche das Float-Verhalten im IE dermaßen beeinflussen. Hinzu kommt aber noch, dass wir in der jsm.css arbeiten, welche ja bekanntlich nach dem Template Stylesheet geladen wird. Na, klingelt's?

Der Grund liegt offensichtlich an den als Block formatierten Hauptmenü-Links. Im Firebug sehen wir, dass in der Zeile 550 der Selector a.mainlevel eine Breite von 100% und eine Höhe von 20px verpasst bekommen hat (und dann auch noch mit !important). Diese Angaben werden von unserem Stylesheet nicht überschrieben und veranlassen den IE die Blöcke zu floaten.

Wir ändern also:

div.moduletable-jsm a.mainlevel:link,  div.moduletable-jsm a.mainlevel:visited {
    display: block;
    background: url(../images/menu_bg.png) no-repeat;
    line-height: 14px;
    padding: 0;
    margin: 0;
    padding-top: 5px;
    text-indent: 20px;
}

div.moduletable-jsm a.mainlevel:link,  div.moduletable-jsm a.mainlevel:visited {
    display: block;
    background: url(../images/menu_bg.png) no-repeat;
    line-height: 14px;
    padding: 0;
    margin: 0;
    padding-top: 5px;
    text-indent: 20px;   
    width: auto;
    height: auto !important;
}

Damit werden die Breiten- und Höhenangaben des rhuk-Template mit den Default-Werten überschrieben. Natürlich können Sie sich das sparen, falls sie direkt im Stylesheet des rhuk-Templates gearbeitet haben.

Juhuu! Nun haben wir eine flexible Breite der Hauptmenüpunkte, auch im IE. OK, ok, das alles sieht noch echt bescheiden aus, aber das haben wir gleich, indem wir die Line-Height auf die Höhe der Hintergrundgrafik setzen (also 25px) und das top-padding von 5px wegnehmen. Jetzt sieht das schon viel besser aus. Ein padding am rechten Rand von 10 px könnte auch nicht schaden.

Das ganze sieht dann so aus:

div.moduletable-jsm a.mainlevel:link,  div.moduletable-jsm a.mainlevel:visited {
    display: block;
    background: url(../images/menu_bg.png) no-repeat;
    line-height: 25px;
    padding: 0 10px 0 0;    
    margin: 0;    
    text-indent: 20px;    
    width: auto;
    height: auto !important;
}

Damit ist die Hauptarbeit getan. Das Ganze sollte natürlich noch ausgiebig gestylt werden, allerding ist dies von trivialer Natur.

Wer Lust hat (wir haben es nicht gebraucht) kann tiefere Hierarchien (also alles ab level 2) so stylen, dass diese passend am rechten Rand des Submenüs erscheinen. Das sollte in etwa so gehen:

div.moduletable-jsm li:hover ul ul {
    left: auto;
    margin-left: 160px;
}

Auch das Javascript müsste dafür angepasst werden. Wer das Tutorial bis hierhin erfolgreich nachvollziehen konnte, sollte keine Schwierigkeiten haben, das zu schaffen.

Ich hoffe, mit diesem Artikel den vielen Bitten um eine horizontale Version gerecht nachgekommen zu sein und wünsche viel Erfolg beim Navigationen bauen.

27 Kommentare

Zeige/Verstecke Kommentareingabe