Slidebox jQuery Plug-in

I couldn’t find another jQuery plug-in that does this same thing. This is a plug-in that displays a box with two panels: the main panel and one that slides over the top of it. As with my other jQuery plug-ins, the goal was to provide a way to do this with minimal JavaScript. The user can define everything in the HTML markup and simple call the plug-in.

Interestingly, the “panels” are found within the container itself. The background panel is the first element and the “slider” is the second element.

The developer can also set the “hangover” of the sliding panel (as in, I want it to hangover the edge by 20 pixels).


I call this one Maurice

I call this one James



<div class="slidebox" data-speed="500" data-animate-background="" data-direction="up" data-hangover="30" data-easing="easeOutExpo">
  <div>Main Content</div>
  <div>Sliding Panel</div>

The Plug-in

You’ll need to get my coalesce routine and the JavaScript file. You will also need to include the excellent hoverIntent plug-in.

The License

Released under the MIT license, so go crazy with it.

If you use it, maybe just throw a comment on the blog here so I can show my mom that some people really do like me.

So, what do you think ?