1. moo_slider_menu Template erstellen
-> Irgendein Template, dass mit moo_ beginnt kopieren und den Inhalt hier einfügen:
Code:
/* FX.Slide */
/* toggle window for the login section */
/* Works with mootools-release-1.2 */
/* more info at http://demos.mootools.net/Fx.Slide */
window.addEvent('domready', function(){
$('login').setStyle('height','auto');
var mySlide = new Fx.Slide('login').hide(); //starts the panel in closed state
$('toggleLogin').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
$('closeLogin').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
});
2. Css-Dateien erstellen:
a) fx.slide.css
Code:
/* Login Panel */
#top
{
height:38px;
position:relative;
background: url(/tl_files/themes/standardtheme/images_slider/login_top.jpg) repeat-x 0 0;
}
#top ul.login
{
width:auto;
height:38px;
right:150px;
position:relative;
float:right;
clear:right;
display:block;
margin:0;
padding-right:45px;
text-align:center;
font-size:80%;
line-height:38px;
font-weight:bold;
color: #ff0000;
background: url(/tl_files/themes/standardtheme/images_slider/login_r.jpg) no-repeat right 0;
}
#top ul.login li.left
{
width:45px;
height:38px;
float:left;
display:block;
margin:0;
padding:0;
background: url(/tl_files/themes/standardtheme/images_slider/login_l.jpg) no-repeat left 0;
}
#top ul.login li
{
height:38px;
float:left;
display:block;
padding:0 6px;
text-align:left;
background: url(/tl_files/themes/standardtheme/images_slider/login_m.jpg) repeat-x 0 0;
}
#top ul.login li a
{
color:#33CCCC;
}
#top ul.login li a:hover
{
color: white;
}
/* toggle effect - show/hide login */
#login
{
width:100%;
height:0;
position:relative;
overflow:hidden;
color: white;
background: #1E1E1E;
z-index: 3;
}
#login a
{
text-decoration:none;
color:#33CCCC;
}
#login a:hover
{
color: white;
}
#login .loginContent
{
width:550px;
height:80px;
margin:0 auto;
padding-top:25px;
text-align:left;
font-size:0.85em;
}
#login .loginContent .left
{
width:120px;
float:left;
padding-left:65px;
font-size:0.95em;
}
#login .loginContent .right
{
width:290px;
float:right;
padding-right:65px;
text-align:right;
font-size:0.95em;
}
#login .loginContent form
{
height:26px;
margin:0 0 10px;
}
#login .loginContent input.field
{
height:16px;
margin-top:4px;
margin-right:5px;
border:1px #1A1A1A #solid;
background: #464646;
color: white;
}
#login .loginContent input:focus.field
{
background: #545454;
}
#login .loginContent input.rememberme
{
margin:0;
padding:0;
border: none;
background: transparent;
}
#login .loginContent input.button_login
{
width:47px;
height:20px;
cursor: pointer;
border: none;
background: transparent url(/tl_files/themes/standardtheme/images_slider/button_login.jpg) no-repeat 0 0;
}
#login .loginClose
{
width:70px;
right:15px;
position:absolute;
display:block;
text-align:left;
font-size:0.8em;
top: 10px;
}
#login .loginClose a
{
width:100%;
height:20px;
display:block;
padding-right:10px;
font-size:0.9em;
background: url(/tl_files/themes/standardtheme/images_slider/button_close.jpg) no-repeat right 0;
border: none;
color: white;
}
#login .loginClose a:hover
{
background: url(/tl_files/themes/standardtheme/images_slider/button_close.jpg) no-repeat right -20px;
}
b) styles_slider
Code:
/* Name: Nice Login and Signup Panel using Mootools 1.2 Tutorial URI:
http://web-kreation.com/demos/login_form_mootools_1.2/ Author: Jeremie
Tisseau Author URI: http://web-kreation.com/ Date: August 2008 The CSS,
XHTML and design is released under Creative C */
html,
body
{
margin:0;
padding:0;
border:0;
}
body
{
width:100%;
min-width:970px;
line-height:130%;
font: 85%/0.9 arial, helvetica, sans-serif;
background: url(/tl_files/themes/standardtheme/images_slider/bg_repeat.jpg) repeat 0 0;
}
a
{
text-decoration:none;
color:#0099CC;
}
a:hover
{
color:#00CCFF;
}
a img
{
border: none;
/*remove border for linked images*/;
}
/** clear **/
.clear
{
height:0;
clear:both;
line-height:0;
}
.clearfix:after
{
height:0;
clear:both;
display:block;
content: ".";
visibility: hidden;
}
.clearfix
{
display:inline-block;
}
/* Hides from IE-mac \ */
* html .clearfix
{
height:1%;
}
.clearfix
{
display:block;
}
/* End hide from IE-mac */
.clearfix
{
height:1%;
}
.clearfix
{
display:block;
}
/** Main Layout **/
/* End hide from IE-mac */
#container
{
width:100%;
height:100%;
text-align:center;
/* IE fix to center the page */;
}
#content
{
width:900px;
margin:0 auto;
padding:20px;
/* center the page in Firefox */ text-align: left;
}
3. fe_page kopieren und in fe_page_moo umbenennen
über den Wrapper:
{{insert_module::1}}
<div id="wrapper">
4. Eigenes HTML-Modul erstellen:
Hier für den Login:
Code:
<div id="login">
<div class="loginContent">
<form action="#" method="post">
<label for="log"><b>Username: </b></label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label for="pwd"><b>Password:</b></label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<input type="submit" name="submit" value="" class="button_login" />
<input type="hidden" name="redirect_to" value=""/>
</form>
<div class="left">
<label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
<div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
</div>
<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div>
<div id="container">
<div id="top">
<ul class="login">
<li class="left">[nbsp]</li>
<li>Hello Guest!</li>
<li>|</li>
<li><a id="toggleLogin" href="#">Log In</a></li>
</ul>
</div>
5. Die CSS-Dateien und die fe_page_moo im Seitenlayout einbinden. Fertig.
Wenn du möchtest, dass es genau so aussieht, wie auf der Demo-Seite: http://web-kreation.com/index.php/tu...g-mootools-12/
dann "download" klicken, entpacken und die images bei dir uploaden und dann in der CSS-Datei die Pfade anpassen.
Grüße, johndoe
Bereich bei Klick dynamisch aus-, und einblenden
Zitieren
Wäre klasse, wenn ich das echt mit wem schritt für schritt schnell machen könnte. Leider schaffe ich es anhand der obigen Anleitung nicht. Und wie gesagt: würde dann sogar auch den WIKI eintrag gleich schreiben, damit in Zukunft es jeder machen kann.
Zitat von Messa
