15Feb

Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery

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

Share/Save

20 Responses to “Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery”

  1. […] side-bar.js: view source […]

    Like or Dislike: Thumb up 0 Thumb down 1

  2. roaming andy says:

    This code is exactly what i’m looking for as andrew selicks side bar doesnt work with google chrome or safari (webkit browsers).

    but unfortunately i couldnt get it to work, i used andrew sellicks original css with it but nothing. it would be really helpful if someone could post the other code required (css and html links).

    Thanx in advance, Andy

    Like or Dislike: Thumb up 1 Thumb down 0

  3. Parris says:

    Oh! Interesting. I’ll check this out tomorrow. Haven’t really used it for anything in production yet. Mostly just for prototypes.

    Like or Dislike: Thumb up 3 Thumb down 0

  4. roaming andy says:

    hey, sorry to be inpatient but i’d absolutely love to see to css and html that makes this wonderful conversion work.

    regs, Andy

    Like or Dislike: Thumb up 2 Thumb down 1

  5. Parris says:

    Hey andy, I updated the post, and I am sending you an email now as well!

    Like or Dislike: Thumb up 1 Thumb down 1

  6. gabrieltavares says:

    can you send me the updated files as well?

    thnks

    Like or Dislike: Thumb up 0 Thumb down 1

  7. gabrieltavares says:

    nevermind the last comment, i already did the changes

    Best regards

    Like or Dislike: Thumb up 2 Thumb down 0

  8. szilderus says:

    Hi,

    I’v been able to deploy your script on my page but I’m having problem of that kind: After refreshing the page the sidebar remains in extended mode – it’s ‘open’ – but it should be closed.
    Do you know what might cause that? or what would be remedy for that problem?

    Thanks in advance.
    Michal, Krakow, Poland

    Like or Dislike: Thumb up 1 Thumb down 0

  9. Parris says:

    HMMM, it sounds like some odd caching issue, or perhaps you aren’t collapsing the width/height or display (however you chose to do it) in the css by default. It may also be a browser issue. I remember IE6 working but having some kinks.

    Like or Dislike: Thumb up 0 Thumb down 0

  10. daikini says:

    Hi,

    First, thank you for this excellent script, having it in jquery solved conflict problems I had with other scripts.

    I implemented it in my website, it works with 2 on the same page, one on each side.

    But, I need to have one opened onload, do you know how to do that? I’ve already tried a lot of things but without good knowledge in js and jquery, i’m a bit lost.
    As an extra, having a cookie that remembers the last position would be fantastic but not that mandatory than the auto load slide pannel.

    Thanks in advance
    Best regards,

    David, Brussels

    Like or Dislike: Thumb up 1 Thumb down 0

  11. streamyx says:

    streamyx…

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

  12. Windows Phone 7 tutorials…

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

  13. Web development. Writing site. Design Studio. TOP 10. Top 5. TOP 1….

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

  14. Ronja says:

    Ronja…

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

  15. Cake Cooking Games…

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

  16. game says:

    game…

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

  17. transport from ukraine…

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

  18. Global SMT & Packaging magazine for electronics assembly and advanced packaging professionals….

    […]Andrew Sellick’s Sexy Sliding SideBar Menu in JQuery | Parris Studios[…]…

    Like or Dislike: Thumb up 0 Thumb down 0

Leave a Reply

You must be logged in to post a comment.