Joomla Mootools Suckerfish Tutorial - Teil 2 |
| Montag, 20. August 2007 | |
|
Ich hoffe, Sie haben sich beruhigt
und können nun mit der Erstellung des Menüs fortfahren.
Wählen Sie in den Modulparametern des Extended Menu den Menü
Stil Jetzt haben wir das, was wir schon von Anfang an haben wollten. Das Hauptmenü wird als unsortierte Liste generiert und unterstützt, anders als beim mod_mainmenu, auch Untermenüpunkte. Lassen Sie sich von der hässlichen Darstellung des Hauptmenüs im Frontend nicht irritieren. Das haben wir gleich.
Bevor wir jedoch mit der Anpassung des Menüs anfangen, müssen wir ein paar Worte zu den vom Extended Menü unterstützten Templates verlieren. Mit Templates kann Extended Menü beliebige Menüvorlagen einsetzen, um so verschiedene Designs und Funktionalitäten zu realisieren. Unter http://de.siteof.de/extended-menu-templates.html finden sich einige bereits vorhandene Menü-Templates. Darunter auch der bekannte „Son of Suckerfish“. Das, was wir allerdings nachahmen wollen, ist der „Suckerfish vertical“. „Cool“ werden Sie sagen. Da ist ja schon alles, was wir brauchen auf dem Weg zu unserem JSM Menü – nun, nicht ganz. Um besser zu verstehen, was das Suckerfish Menü eigentlich ausmacht, lohnt es sich die verschiedenen Menü-Templates oder diesen Artikel zu studieren: http://www.htmldog.com/articles/suckerfish/dropdowns/. Kurz gesagt, handelt es sich um eine elegante, standardkonforme, barrierefreie und Cross-Browser-kompatible Methode, gute alte DHTML Dropdowns zu bauen. Wir wollen an dieser Stelle eben das tun, jedoch würzen wir die ganze Sache mit einer Portion Mootools, um ein paar nette Animationseffekte zu integrieren. Warum nehmen wir also nicht das „Suckerfish vertical“ Menü und bauen darauf auf? Im Prinzip werden wir das tun. Besonders vom Suckerfish Stylesheet werden wir uns inspirieren lassen. Was allerdings die JavaScript (JS) Elemente angeht, werden wir unsere eigene Logik entwickeln. Dies hat zwei Gründe. Erstens sind die flexiblen Animationseffekte, welche wir zum Ende einbauen wollen, recht mühsam in das vorhandene Suckerfish JS zu integrieren und zweitens wollen wir mit der JS Bibliothek Mootools arbeiten, welche uns von Hause sowieso viel von der Suckerfish JS Logik abnimmt. So, nun aber wieder zurück zu unserem Menü. Um mit dem Styling anzufangen und das Menü im CSS gut ansprechen zu können, geben wir ihm am besten einen Suffix. Wir gehen also in die Modulparameter des Extended Menü und fügen unter dem Punkt Module Class Suffix die Zeichenkette -jsm hinzu. Dadurch können wir nun das Hauptmenü über den Klassennamen .moduletable-jsm ansprechen.
<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/jsm.css" rel="stylesheet" type="text/css" /> Ich werde die Tricks und Kniffe des Suckerfish CSS nicht im Detail beschreiben. Wer sich für die Funktionsweise des CSS interessiert, kann dies unter dem o.g. Suckerfish-Link nachlesen.
Nun aber zu unserem CSS. Als erstes
müssen wir unser Hauptmenü von Klassendefinitionen aus dem
rhuk Template „säubern“. Eigentlich säubern wir sie
nicht, sondern überschreiben die für uns wesentlichen
Selektoren. Dazu fügen wir folgende Anweisungen in die jsm.css
Datei ein:
ul#mainlevel {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}
ul#mainlevel li {
list-style: none;
background-image: none;
padding: 0;
margin: 0;
}
Nun sollte das Menü vernünftig in das Layout passen.
Der erste Schritt zum Suckerfish Menü
ist die Integration des Suckerfish CSS. Diese habe ich für das
Joomla! Template angepasst, und sie sehen in unserem Beispiel
folgendermaßen aus:
div.moduletable-jsm {
float:left;
width:159px;
margin: 0;
margin-left:-864px;
z-index: 10;
position: relative;
}
div.moduletable-jsm, div.moduletable-jsm ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
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:hover {
background-position: 0px -25px;
}
div.moduletable-jsm ul ul a:link, div.moduletable-jsm ul ul a:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
border: 0px solid #000;
width: 160px;
height: 25px;
line-height: 24px;
font-size: 11px;
color: #ccc;
}
div.moduletable-jsm ul ul a:hover {
background: url(../images/menu_bg.png) no-repeat;
color: #fff;
}
div.moduletable-jsm li {
float: left;
padding: 0; margin: 0;
width: 159px;
}
div.moduletable-jsm li ul {
margin: -25px 0 0 159px;
position: absolute;
width: 159px;
left: -999em;
z-index: -10;
text-indent: 20px;
}
div.moduletable-jsm li:hover ul, div.moduletable-jsm li {
left: auto;
}
Bedenken Sie, dass wir das Modulsuffix -jsm verwenden und dieses CSS an einigen Stellen für das rhuk-Template angepasst ist. Sollten sie planen diese Technik in einem anderen Template einzusetzen, werden sie an einigen Stellen dieser CSS-Klassen Anpassungen vornehmen müssen. Fügen Sie nun die Styles in das jsm.css ein. Wenn Sie das Frontend neu laden (und unter Firefox surfen), sehen Sie einige Fehler. Das „Other Menu“ hängt rechts neben dem Hauptmenü. Der Internet Explorer ist an dieser Stelle dummerweise tolerant. Der Darstellungsfehler kommt daher, dass unser „Suckermodul“ und seine Listenelemente gefloatet (float: left;) sind. Das nächste DIV wird also dem Float gemäß dargestellt. Obwohl das korrekt ist, sieht es einfach scheußlich aus, und so war das nicht geplant. An dieser Stelle gäbe es viele Lösungsmöglichkeiten. Wir machen es uns einfach und fügen folgende Definition in unser JSM-Stylesheet:
.moduletable {
clear: both;
}
So werden alle nachfolgenden Modul-Klassen korrekt dargestellt. Selbstverständlich müssen die Module die Klasse .moduletable besitzen, was bei Joomla! allerdings Standard ist. Nun sieht die Navigation ordentlich aus. Welchen Sinn hat der ganze Quatsch jetzt eigentlich? Sieht doch alles aus wie vorher und von ausklappbaren Menüs weit und breit keine Spur! Damit irgendwas ausklappen kann muss es natürlich vorhanden sein... Um unser gerade eingefügtes Suckerfish CSS im Einsatz zu sehen, brauchen wir also ein paar Unterpunkte in unserem Hauptmenü. Erstellen Sie im Backend einfach ein paar neue Links und legen über das Feld Parent Item den übergeordneten Menüpunkt fest. Damit es sich mit diesem Tutorial deckt, fügen Sie die Links am besten dem Hauptmenüpunkt „Joomla! License“ hinzu. Das könnte dann so aussehen:
Klicken Sie im Frontend zunächst jedoch auf den neuen Punkt „Joomla! License“. Wenn Sie jetzt über den Menüpunkt „Joomla! License“ fahren, klappt rechts daneben unser Suckerfish Untermenü aus. Sollte das nicht der Fall sein, haben Sie irgendwas vergessen, oder Sie benutzen den IE. Bevor wir uns um den IE kümmern, sorgen wir zunächst dafür, dass die Submenüs immer vorhanden und damit ausklappbar sind. Dazu gehen Sie bitte wieder in die Modulparameter des Extended Moduls und aktivieren dort den Punkt Expand Menu.
Nun sind alle Submenüs immer vorhanden. Unser Suckerfish-CSS stellt sie jedoch nur dar, wenn wir es möchten. Die IE Entwickler haben es leider auch im IE7 nicht eingesehen, eine .hover pseudo Klasse für Listenelemente zu unterstützen. Das klassische Suckerfish Menü rüstet dies mit folgendem Script nach:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Wie oben erwähnt, wollen wir jedoch Mootools einsetzen und realisieren deswegen eine eigene Lösung. Bevor wir dies jedoch tun und damit diesen Teil des Tutorials abschließen, sollten Sie sich das Mootools Framework besorgen. Sie können das tun, indem Sie sich eine Version von http://www.mootools.net/download zusammenstellen. Wenn Sie sich nicht sicher sind, welche Komponenten des Framworks Sie brauchen – nehmen Sie alle! Speichern Sie die JS Datei unter dem Namen mootools.js in Ihrer Joomla Installation ins Verzeichnis /includes/js/ ab. Haben Sie das getan, müssen Sie die Datei noch im Template einbinden. Tun Sie das über:
<script type="text/javascript" language="JavaScript" src="<?php echo $mosConfig_live_site;?>/includes/js/mootools.js"></script> Wenn Sie die Frontpage nun neu laden, sollte die Mootools Datei mit eingebunden werden. Jetzt können wir beginnen, eine Lösung für den IE zu entwickeln. Die hier dargestellte Lösung scheint ein wenig aufgebläht. Dies soll jedoch für ein besseres Verständnis sorgen und ist den noch kommenden Eingriffen kosmetischer Art geschuldet.
Hier also das Javascript:
// ist der DOM bereits geladen?
window.addEvent('domready', function() {
// alle Listen-Elemente des Menüs sammeln
var list = $$('div.moduletable-jsm li');
// jedes Listenelemet durchgehen
list.each(function(element) {
// gibt’s ein Submenü?
if ($(element).getElement('ul')) {
// speichere es in el
el = $(element).getElement('ul')
// bischen platzieren
el.setStyle('left', 0);
el.setStyle('margin-left', 159);
el.setStyle('display', 'none');
// bei mouseover submenü sichtbar machen
element.addEvent('mouseenter', function(){
$(element).getElement('ul').setStyle('display', 'block');
});
// bei mouseout submenü verstecken
element.addEvent('mouseleave', function(){
$(element).getElement('ul').setStyle('display', 'none');
});
}
});
});
Speichern Sie diese Javascript Datei im rhuk Templateorder unter den Namen jsm.js in das Verzeichnis JS. Binden Sie diese folgendermaßen in das Template ein:Wenn Sie das Frontend nun neu laden (und den Cache leeren), sollte auch der IE keine Probleme haben, das Submenü dynamisch darzustellen.
<script type="text/javascript" language="JavaScript" src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/js/jsm.js"></script> Dies war also die Pflicht. Im Joomla Mootools Suckerfish Tutorial Teil III folgt die Kür. Dort wird endlich dem Coolness-Faktor von JSM Rechnung getragen. Lesezeichen setzen Hits: 49694  25 Kommentare Kommentar schreiben
|
Zeige/Verstecke Kommentareingabe
