Joomla Mootools Suckerfish Tutorial - Teil 3 |
| Montag, 20. August 2007 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Sie erinnern sich noch? Suckerfish, Mootools und Extended Menü? Wenn dem so ist, sollten Sie nun das vorhandene Menü um weitere, beliebige Unterpunkte erweitern. Wir möchten ja schließlich sehen, was unser Menü so zu Stande bringt. Haben Sie ausreichend neue Unterpunkt eingefügt, können Sie nun den Code der jsm.js JavaScript Datei ersetzen durch:
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);
el.setStyle('margin-left', 150);
el.setStyle('opacity', 0);
el.setStyle('display', 'none');
element.addEvent('mouseenter', function(){
fx.clearChain();
fx.element.setStyle('display', 'block');
fx.start({'margin-left': 159,'opacity': 1});
});
element.addEvent('mouseleave', function(){
fx.clearChain();
fx.start({'margin-left': 150,'opacity': 0}).chain(function(){fx.element.setStyle('display', 'none');});
});
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});
});
});
}
});
});
Nun werden die Submenüs recht elegant ein- und ausgeblendet. Die genaue Funktionsweise hierfür wird für Menschen, welche etwas von Javascript verstehen, leicht aus dem jsm.js erkennbar sein. Wer keine Ahnung von JS hat, kann trotzdem die wesentlichen CSS Parameter darin erkennen und sie wenn nötig manipulieren. Wir bohren das jsm.js noch etwas auf. Und zwar folgendermaßen:
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);
el.setStyle('margin-left', 150);
el.setStyle('opacity', 0);
el.setStyle('display', 'none');
element.addEvent('mouseenter', function(){
fx.clearChain();
fx.element.setStyle('display', 'block');
fx.start({'margin-left': 159,'opacity': 1});
});
element.addEvent('mouseleave', function(){
fx.clearChain();
fx.start({'margin-left': 150,'opacity': 0}).chain(function(){fx.element.setStyle('display', 'none');});
});
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});
});
});
}
});
});
Nun blenden die Submenüpunkte bei Eintreten des Mauszeigers weich ein und aus. Dies soll nur die Flexibilität des Prinzips verdeutlichen. NebenbeiFalls Sie sich gefragt haben, ob dieses Menü auch mehrere Hierarchiestufen unterstützt, schlage ich vor, Sie probieren es einfach aus. Theoretisch sollte es beliebig viele Stufen umsetzen können. Sie sollten nur überlegen, bei einem weit verzweigtem Menüsystem das CSS entsprechend anzupassen.
Abgesehen davon, sind meiner Meinung nach zwei Hierarchiestufen aus ergonomischen Gründen das Maximum für gewöhnliche Internetsurfer. NachspielNun haben wir eine jsm.js Javascript Datei welche verschiedene Funktionen des Mootools Frameworks nutzt. Wir haben in Teil II des Tutorials das gesamte Mootools Framework in das Javacript Verzeichnis kopiert, obwohl wir ja nur ein paar Funktionen des Frameworks nutzen. Um den Usern nicht unötigen Balast aufzuhalsen, schrumpfen wir nun unsere Mootools Datei auf die nötigsten Funktionen zusammen. Sollten Sie viel mit Mootools arbeiten, werden sie in Ihrer Joomla Installation wohl das ganze, komprimierte Mootools Framework liegen haben und den folgenden Schritt nicht benötigen. Laden Sie die zustande gekommene Javascript Datei (jsm.js) auf einen online verfügbaren Server. Um herauszufinden, welche Funktionen aus dem gesamten Mootools Framework wir brauchen, nutzen wir das Analysetool Packito von Icebeat. http://icebeat.bitacoras.com/mootools/packito/ Geben Sie in das Eingabefeld den Pfad zur jsm.js Datei an. Also beispielsweise : http://www.bohacek.de/temp/jsm.js Sobald Sie bestätigt haben, erscheint eine Liste aller nötigen Mootools Klassen. Diese können Sie nun ohne weiteres im Download-Bereich von Mootools zusammenstellen und, ganz wichtig, die Packer Komprimierung aktiviert lassen. Wenn Sie nun auf Download klicken, erhalten sie eine schnittige Javascript Datei. Nachteile und VerbesserungsvorschlägeUser, welche JavaScript deaktiviert haben und den IE einsetzen, werden Schwierigkeiten haben das Submenü zu erreichen. Dies ist jedoch bei allen (mir bekannten) Suckerfish Lösungen der Fall und liegt an der nicht vorhandenen Unterstützung der :hover Pseudoklasse des IE. Ich hoffe Sie konnten das Tutorial gut und erfolgreich nachvollziehen und rechne fest damit da draußen bald ein paar schicke Joomla!-Navigationen zu entdecken.
Halleluja!
Lesezeichen setzen Hits: 35318  33 Kommentare
Kommentar schreiben
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
; 
Zeige/Verstecke Kommentareingabe
