Auf Wunsch hier also eine Anleitung für einen Mootools-Slideeffekt für das Loginformular, bei dem das Formular beim Aufrufen der Site nicht sichtbar ist und erst auf Klick "reinslidet".
1. Module anlegen:
Im ersten Schritt muss man das Login-Formular anlegen. Am besten gebt ihr dem Modul eine eindeutige ID, um es gezielt via CSS anzusprechen. In diesem Beispiel hat es die ID "loginform".
Dann braucht ihr noch einen Link, der, wenn er geklickt wird, das Loginformular sliden lässt. Ich benutze dafür das "Eigener HTML Code" Modul und gebe dem Modul die ID "btlogin":
HTML-Code:
<a id="btlogin" href="#">Login</a>
2. Beide Module in das Seitenlayout einbinden oder via Artikel an der entsprechenden Stelle ausgeben lassen. Ich packe das immer ganz oben in den header.
3. Im Seitenlayout als Mootools Template "moo_default" wählen (bin aber nicht sicher, ob das unbedingt notwendig ist, glaub aber schon) und in den Headbereich folgenden code eingeben:
HTML-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
var mySlide = new Fx.Slide('loginform').hide();
$('btlogin').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
//--><!]]>
</script>
Natürlich können die IDs "loginform" und "btlogin" ausgetauscht werden und somit kann jedes x-beliebige Objekt "geslidet" werden. Das ".hide()" verhindert, dass das Loginformular beim Aufruf der Site offen ist. Erst beim Klick auf den Link mit der ID "bt_login" öffnet es sich und bei erneutem Klick auf den gleichen Link schliesst es sich wieder.
Wenn ihr lieber zwei Buttons haben wollt bei der der eine das Formular öffnet und der andere das Formular schliesst, dann müsst ihr zum einen einen weiteren Button mit einer eigenen ID (im folgenden Bsp "btclose") erstellen und dann im Head-Bereich zweimal den oben aufgeführten Code einfügen mit jeweils einer kleinen Änderung in der Zeile "mySlide.toggle();" Das kann dann so aussehen:
HTML-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
var mySlide = new Fx.Slide('loginform').hide();
$('btlogin').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
var mySlide = new Fx.Slide('loginform').hide();
$('btclose').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
});
//--><!]]>
</script>
Jetzt slidet das Loginformular bei Klick auf den Link "btlogin" ein und bei Klick auf den link "btclose" wieder raus.
3. CSS anpassen.
Ihr werdet merken, dass das Loginformular den weiter unten folgenden Content einfach nach unten weg schiebt. Um das zu verhindern einfach via CSS ein position:absolute; und einen entsprechenden z-index hinzufügen um sicher zu gehen dass es über allem anderen Inhalt steht. Aber Achtung: Am besten im Template des Loginformulars noch ein DIV um das Div mit der ID "loginform" legen, und dem diese CSS Attribute zuweisen. Ansonsten funzt der Slideeffekt nicht.
So ich hoffe ich hab nix vergessen. Und wünsche allen, besonders aber Snaky, viel Spass damit.
Slideeffekt für Loginformular
Zitieren
Zitat von stan
- Danke im voraus...
