Adding Mootools effect to your pages you can make your site more attractive. Take a look at the Slide effect.
This tutorial explains how to realize a simple sliding top panel (top/down) using mootools, some line of css code and JavaScript. The result is something like this:
Click on the tab "Show Panel" to slide top/down the panel with a nice animation.
Download this tutorialStep 1: HTML Code
HTML code is very simple: we have a DIV with ID "top-panel" which is the and a another layer with ID sub-panel which contains a link to slide up/dow our panel:
<div id="top-panel">
<!-- Top Panel content here -->
</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Show Panel</span<</a>
</div>
<!-- Top Panel content here -->
</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Show Panel</span<</a>
</div>
...remember to add mootools framework in the page <head> tag:
<script type="text/javascript" src="mootools.svn.js"></script>
Step 2: Css code
This is only a proposal about the look of your panel, but you can customize it how you prefer:
#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
Step 3: JavaScript Function
Add this simple JavaScript in the <head> tag of the page:
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
It's all! Download this tutorial and try it.
Download this tutorial
No comments:
Post a Comment