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
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
is there any way to make it slide over content?
Is there any way to make the top-panel hide first and appear only when the 'Show Panel' button is clicked?
Please email me - project[at]simplelab{dot}net. Thanks!
@hadi,
Simply add
mySlide.hide();
before the addEvent('click', function(e){
@jazz, try with CSS position
Or add .hide() like this:
var mySlide = new Fx.Slide('top-panel').hide();
Just a thought CSS wise, FF related:
*{outline:none;}
to get rid of this bothering dotted outline.
@hadi
There is a way to do this (initial hide) and you can do it with as many panels as you choose to.
Use a domready event to call the yourpanel.hide() event.
"Use a domready event to call the yourpanel.hide() event."
How would you go about doing that? I am trying to use it, after another div, and it displays as the page loads, and then hides. I am using "var mySlide = new Fx.Slide('top-panel').hide();"
salve,
come posso ovviare al fatto che durante il caricamento della pagina, il pannello รจ visibile. mentre viene nascosto a pagina completata.
io ho solo aggiunto il comando per nascondere il pannello.
hi, nice script! i tried to let the panel slide over content but the "#top-panel" still slips behind the content, "#sub-panel" works fine and shows up in front of the content. if i deactivate the javascript the "#top-panel" slips to the front as intendet, so the css and z-index works fine, my problem has to be script related. has anyone an idea how to get it work? cheers, jan
ah, by the way...i just found out that it works fine in IE, Opera & Safari but not with Firefox...any idea?
hello!
Can we do a rotation of the top panel??
Hello
How can i add three instances of this script on a page without conflicting.
I want to toggle
top-panel, search, and left-panel
I tried with copy paste but it cause conflicts to other scrips.
Thanks in Advance
Hi,
I jut to ask, how can I change the height of the top panel?
Thanks!
how can i replace the text "Show Panel" once it's clicked to say "Hide Panel" and then toggle this every time it's clicked?
how can i replace the text "Show Panel" once it's clicked to say "Hide Panel" and then toggle this every time it's clicked?
Hmm, I spent a while implementing this only to see at the end that it doesn't work in IE6. Has anyone managed to fix that?
in the HTML code there is a bracket that is facing the wrong way --
the ending span tag is this way < when it should be this way >
I just used the .hide() in safari and the page blink every time you load it, Has anyone had this issue?
any fixes?
In IE7 it working, but the show panel Button was little down, is there any issue with IE
Is there a way to make the sliding panel "bounce" a bit when it opens?
I created something similar to this on my portfolio site using jQuery.
check it out--->> www.philoveracity.com
Really nice :-)
But out of curiosity, is it just me or doesn't the script work with MooTools 1.2?
I just get a nasty error...
thx for this tutorial. Very nice. Only one question: is it possible to modify this so the panel slides bottom / up?
I cannot find any examples...Can somebody help me with this?