This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Wednesday, March 5, 2008

Sliding top panel using mootools

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 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>

...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;
}

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>

It's all! Download this tutorial and try it.

Download this tutorial

blog comments powered by Disqus
Jazz said...

is there any way to make it slide over content?

Hadi said...

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!

macsim said...

@hadi,
Simply add
mySlide.hide();
before the addEvent('click', function(e){

@jazz, try with CSS position

Roselavy said...

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.

Anonymous said...

@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.

LeeU said...

"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();"

freddy said...

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.

Anonymous said...

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

Anonymous said...

ah, by the way...i just found out that it works fine in IE, Opera & Safari but not with Firefox...any idea?

Ju said...

hello!
Can we do a rotation of the top panel??

Alvin said...

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

P_ter said...

Hi,

I jut to ask, how can I change the height of the top panel?
Thanks!

Aaron said...

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?

Aaron said...

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?

cloudzilla said...

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?

Mike Brisk said...

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 >

Kris said...

I just used the .hide() in safari and the page blink every time you load it, Has anyone had this issue?
any fixes?

Outsource India said...

In IE7 it working, but the show panel Button was little down, is there any issue with IE

Stephen Clark said...

Is there a way to make the sliding panel "bounce" a bit when it opens?

Ulive2Christ said...

I created something similar to this on my portfolio site using jQuery.
check it out--->> www.philoveracity.com

Anonymous said...

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...

jeroen said...

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?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News