0 users
Search

Wednesday, March 5, 2008

Sliding top panel using mootools

0 users

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

Sponsored Links

12 comments

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!

Facebook | Feeds rss About Me

Antonio Lupetti
Engineer, Pro Blogger, Mac user, Musician, Web Addicted.
ROME - ITALY antonio.lupetti@gmail.com

Subscribe feeds rss Feed RSS

Your Email (Subscribe my feed via e-mail)

Recent Entries

What's new on woork...

Twitter

What I'm doing?

Categories and Links

Categories

Browse this blog for topic...

Social Networks

My Social Networks identity...

Table of content

Did you miss something? Thake a look at my table of content.
Read more...

Advertising

How to promote a site, a product or a service on woork
Read more...

Buy a review Site reviews

Technorati Authority

Technorati
Woork authority on technorati
Add this blog to your faves
View blog authority