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 tutorial
Step 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
Antonio Lupetti
12 comments
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!
Post a Comment