Nach einigen kleineren Startschwierigkeiten habe ich das Ding zum laufen gebracht. Und ich muss sagen: Mootools ist wirklich Kinderleicht und man kann es überall einsetzen…
Heute gibt’s etwas für Fans der leichten Animation. Ich knüpfe mit einem kleinen “Goodie” an den Artikel Von der Multibox über Tooltips zu MooTools an, denn ich habe mich in die Materie vertieft und mit ihr experimentiert.
Auf der Grundlage meines Kartei-Reiter-Menüs, erweitert mit Javascript respektive Mootools kam ein kleine aber nette Spielerei heraus. Eine Navigation mit Buttons, die ihre Farbe “faden” ohne auf Flash zurück zu greifen.
Das Fade-Menü
Ein Tutorial für die richtige Installation der MooTools-Dateien oder die korrekte Einbindung der JavaScript-Snippets spare ich mir an dieser Stelle, da die Dokumentation von MooTools bereits ausführlich genug ist und ich verweise an dieser Stelle auch gerne auf meinen Artikel “Javascript: Von der Multibox über Tooltips zu MooTools” . Um herauszufinden wie der Hase läuft empfehle ich alternativ auch einen Blick in den Sourcecode der fade_menue.html. Dort ist die richtige Verknüpfung der Dateien erkennbar und der Rest ist mit etwas gutem alten Javascript zu bewerkstelligen.
Bei den im Download enthaltenen MooTools-Framework-Dateien handelt es sich um unkomprimierte “Vollversionen”, die noch abgespeckt werden sollten. Für Entwicklerzwecke machen sie jedoch durchaus Sinn, da sie die volle Bandbreite der Bibliothek enthalten. Es kann also noch experimentiert werden.
Die Buttons können auch ohne weiteres dynamisch erzeugt werden (z. B. in einem CMS oder eben Wordpress). Die Verlinkung muss nur den entsprechende Event enthalten.
So, genug Theorie, hier gibt’s das Menü.
Und ich für meinen Teil werde am Ball bleiben und verweise diskret auf mein Motto:
Fading Menu Downloads: 726
der Besucher
(am 31. Oktober 2008 um 21:35)Hallo!
Dann werde ich deinem Motto mal folgen
Netter Blog. Weiter So.
Viele Grüße vom Besucher
Mike
(am 24. November 2008 um 14:32)Hallo,
nach dem Entpacken hab ich die htm-Datei im Browser geöffnet. Und ich fand ein vertikales Menü mit einem Mouse Over Effekt vor. Dies läßt sich doch einfach mit CSS gestalten, was ich meinte ist Horizontales Menü und bei einem Mouse Over soll vertikal ein Unter-Menü herausfahren. Mit Flash ist das ganze kein Problem aber mit JavaScript läßt sich das anscheinend nur über MooTools realisieren. Und leider gibt es kein deutsches Tutorial dazu. Ich habe mir schon ein englisches Buch “MooTools Essentials” und das “AJAX” Buch gekauft. Ich denke mir bleibt nichts anderes übrig als von ganz vorne anzufangen, auch wieder leider.
Aber ein sehr netter Blog und vielen Dank für deinen Post im JavaScript Forum.
Gruß Mike
freizeitler
(am 24. November 2008 um 20:22)Hallo Mike,
erstmal danke für deinen Kommentar!
Der Post im JavaScript-Forum mit dem Verweis hierhin war als Denkanstoss gedacht. Aus einem vertikalen ein horizontales Menü zu erstellen ist kein Problem und die Fade-Funktion lässt sich auch sehr einfach durch einen Slide ersetzen (siehe Demos bei MooTools).
Viele Grüße!