Sexy Sliding Menu for script.aculo.us

What’s interesting is that the animation looks somewhat chunky in FF while both IE and Opera run it pretty smooth.
I also noticed that fresh-baked Safari for Windows has a blinking bug before and after collapse… I wonder if it’s Scriptaculous’ issue or Safari’s one…

Thanks for a fine example of a sidebar using Prototype. I’ve spend the last couple of hours trying to convert the example from a right sidebar to a left sidebar (sliding in from the left). Up until now I haven’t succeeded so I was hoping you could guide me.

I really like your slide out menu! But I too want to make it slide out from the left side of the page. Is there a simple change to this? I got it on the left side of the page, but the contents pop out from the right side of the tab instead of the tab sliding out and the contents following.

I figured it out! First you have to change the placement of the ancor tag containing the slidetab image to be at the bottom of the div instead of the top (below sidebar content) and then change style sheet from #sidebar {right:0px; background-position:top left;} to #sidebar {left:0px; background-position:top right;} and don’t forget to flip the background image.

index.html should look like:

LMICMenu

Link One
Link Two
Link Three
Link Four
Link Five

sorry here’s the HTML:

<div id=”sideBar”>

<div id=”sideBarContents” style=”display:none;”>
<div id=”sideBarContentsInner”>
<h2>LMIC<span>Menu</span></h2>

<ul>
<li><a href=”#”>Link One</a></li>
<li><a href=”#”>Link Two</a></li>
<li><a href=”#”>Link Three</a></li>
<li><a href=”#”>Link Four</a></li>
<li><a href=”#”>Link Five</a></li>
</ul>

</div>
</div>
<a href=”#” id=”sideBarTab”><img src=”images/slideButton.gif” alt=”sideBar” title=”sideBar” /></a>
</div>

Hi Heather. Thanks for the comments. I have put your amends up on the site for all to enjoy. Have a look at:

http://www.andrewsellick.com/53/sliding-menu-revisited

You’re very welcome Andy! Thanks for doing that. I’m having a ton of fun with this code…next objective is to combine an accordion with the Sexy Sliding Menu Revisited =)

this might seem kinda picky….but i’ve used techniques like this (ones to get a DIV to stick to the left side of that page and use z-index to get it ‘ontop’ of the other divs) but, when the site is resized so that the horizontal scroll bar is displayed the user can ‘break’ the div on the side making it appear in the middle of the page

yeah i know almost no one would have the page that narrow, but still it was driving me crazy when i was using this technique

This is very cool!
I am very green when it comes to javascript (trying to learn more), is possible to have more than one tab on a site? (multiple lists?)

Thanks for this! I was looking for something like this for the design of my final year MSc project and I couldn’t find any that worked on the net until I came across this. You’re a lofe saver (o;

Majid

How do I set a cookie so when the browser refreshes it does not change the state of the menu until the user click on it?

Very cool menu!!

Thanks.

There seems to be a discrepancy between the HTML above and that in the demo:

instead of

The former doesnt appear to work.

Oops.

There seems to be a discrepancy between the HTML above and that in the demo:

[code][/code]
instead of
[code][/code]

The former doesnt appear to work.

I give up! Just compare the inline style applied to sideBarContents above and that used in the demo.

It works great only for right side…………….

I request to all if some one can help me to get done at bottom and right side at the same time……….

I mean how to make it working on both side at right side and at bottom

if some one could help me i would be very thankful to him

This is very nice! However, I like my animated items to be snappy. This sliding out sidebar is very slow. I don’t like my users waiting around for things to animate.

For those looking to make this sidebar snappier, edit side-bar.js.

Change the first line in the slideSideBar function to the following:

new Effect.toggle(’sideBarContents’, ‘blind’, {scaleX: ‘true’, scaleY: ‘true;’, scaleContent: false, duration: 0.3});

This changes the duration of the scale effect to .3 seconds. Since there was no duration set in the original javascript it was using the default duration. I think default duration is probably 1 second.

Don’t forget to change the fade effect durations as well!

I changed those from 1.0 to 0.5 but you may want to match the animation duration of 0.3. Up to you.

Next thing to figure out is how to scale my content div on the x axis at the same time so the sidebar doesn’t cover my main content!

Anybody??

I’ll see if I can figure it out and I’ll pust the code unless one of you beat me to it!

– Bob

Ok! I figured it out! Works GREAT! If anybody else needs it, I’m posting it below! I have a main content div with a ID of ‘contentWrapper’ which I used the Morph effect to change the left margin size from 20px to 220px to allow room for the sidebar when it’s expanded. You need to change side-bar.js to make it work. Here’s the code:

var isExtended = 0;

function slideSideBar(){

new Effect.toggle(’sideBarContents’, ‘blind’, {scaleX: ‘true’, scaleY: ‘true;’, scaleContent: false, duration: 0.3});

if(isExtended==0){
$(’sideBarTab’).childNodes[0].src = $(’sideBarTab’).childNodes[0].src.replace(/(\.[^.]+)$/, ‘-active$1′);

new Effect.Fade(’sideBarContents’,
{ duration:0.3, from:0.0, to:1.0 });

new Effect.Morph(’contentWrapper’, {style:’margin-left: 220px’, duration: 0.3});

isExtended++;
}
else{
$(’sideBarTab’).childNodes[0].src = $(’sideBarTab’).childNodes[0].src.replace(/-active(\.[^.]+)$/, ‘$1′);

new Effect.Fade(’sideBarContents’,
{ duration:0.3, from:1.0, to:0.0 });

new Effect.Morph(’contentWrapper’, {style:’margin-left: 20px’, duration: 0.3});

isExtended=0;
}

}

function init(){
Event.observe(’sideBarTab’, ‘click’, slideSideBar, true);
}

Event.observe(window, ‘load’, init, true);

Forgot to say that I changed the tab graphic to be smaller so my left margin of 20px is smaller than the width of the original tab. Also, I’m using the sidebar on the left instead of the right. Adjust the Morph effect style as you need.

Using an AJAX Modal Popup with the sliding sideBar..

There’s an issue with the z-index stack when browsing in IE so you will have to throw a hack in the .css file to handle it. What happens is the sliding tab and menu are ABOVE the AJAX Modal Popup gray background. To get it below the gray background in IE6/7 you need to set the z-index of the sideBar to -1. Here’s what you can insert in your css to “hack” it for IE:

*:first-child+html #sideBar{z-index: -1} * html #sideBar{z-index: -1;} /* IE Z-index Stack Hack */

Enjoy!

wow amazing! thank you very much!
does anybody know how to make the backgroundcolor of the div (and maybe even the tab) transparant? Some simple opacity css lines won’t do (thinking of ie8 and I also do NOT want the content/text inside to be transparant).

Here’s an example that does work in all ie and other browsers and the text is not transparant:

http://www.alistapart.com/d/pngopacity/examples/ex3.htm

lamictal disease lamictal vitamin

thank you

hello, very nice slidebar…

but when the page is loaded, the slidebar si colapsed, what i have to change to slidebar to be expanded when the page is loaded??

thank you

I had issues with the sliding sidebar over a colored background. The area under the sidebar tab was always white for the length of the sidebar when it was expanded. This is fine over a white background but no good over another color.

You need to change the #sideBar css definition to hide the background image and to use a background color of “Transparent” instead. I just commented out the background-image line and added the background-color line.

Here’s to code if you wish to copy/paste:

#sideBar{
position: absolute;
width: auto;
height: auto;
top: 210px;
left:0px;
/*background-image:url(images/sidebar/background-left.gif);*/
background-position:top right;
background-repeat:repeat-y;
background-color: Transparent;

Enjoy!

– Bob

Hi, I found this is a great example of sliding menu, in my application i have to use side menu panels like this,. Is it possible to have two or more sliding menu’s to be displayed in the same direction.
Please provide some assistance on this.

Thanks..