Parris Studios

Hi All,

If you haven’t seen this awesome menu system check it out: http://www.andrewsellick.com/examples/sliding-side-bar-scriptaculous/

Or check out the how-to here: http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous

I really thought this menu system was cool and with a few tweaks can function as integral part of the user experience on a website. Recently I had decided to leave the fabulous world of Prototype/Scriptaculous and move to JQuery. Mostly because it seems the industry has standardized around JQuery. It had some what of a learning curve, but it took about a day to really make the switch. Having to convert this sideBar script really helped with that process.

As a final note before I post the code. The animations aren’t exactly the same, but with JQuery you can create your own custom animations so feel free to modify as you wish. Changes are below!

side-bar.js:

var isExtended = 0;

$(document).ready(function(){
$("#sideBarTab").click(function(){
$("#sideBarContents").animate({ "width":"toggle"},{duration:2000,queue:false}
);

if(isExtended==0){
$('#sideBarTab').html($('#sideBarTab').html().replace(/(\.[^.]+)$/, '-active$1'));
isExtended++;
}
else{
$('#sideBarTab').html($('#sideBarTab').html().replace(/-active(\.[^.]+)$/, '$1'));
isExtended=0;
}
}
 );
});

So thats cool… In my script I also wanted somewhat accordion style items expanding within my sidebar so I use the following line of JS to dynamically add items into the sidebar (well sort of, without giving too much away).

$("#divIdToAppenedTo").append("<li><a class='header' href='#' onclick='$(\"#"+slug(name)+"\").animate({\"height\":\"toggle\"},{duration:1000,queue:false});'><div style='margin:10px 0 0 15px;'>"+name+"</div></a><div id='"+slug(name)+"' style='display: none; padding-left:15px;'>");

Woo enjoy!

Update: someone requested (via comment) the css for this. Please note you will need to modify width, colors, backgrounds, etc… I stripped down a ton of visuals in order to not release proprietary content: sb-package