Sexy Sliding Menu for script.aculo.us
Jun
14
It’s been a while since the original post Sexy sliding JavaScript side bar menu using mootools so I decided it was about time I pulled my finger out and developed a sliding menu using script.aculo.us. Well here goes…
code
css
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
html
<div id="sideBar">
<a href="#" id="sideBarTab">
<img src="images/slide-button.gif" alt="sideBar" title="sideBar" />
</a>
<div id="sideBarContents" style="width:0px;">
<div id="sideBarContentsInner">
<h2>side<span>bar</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>
</div>
As shown the code is not overly complex. The HTML comprises a containing DIV (with an ID of sideBar), then within this we have a linked tab image (with an ID of sideBarTab) followed by the contents of the side bar contained in a DIV (with an ID of sideBarContents) and sub contained within another DIV (with an ID of sideBarContentsInner).
The sideBarContents DIV has an inline style applied setting the width to zero. This is to allow the JavaScript to resize the region using script.aculo.us (Some browsers are a bit buggy when trying to change styles that are set in an external stylesheet). This DIV is also set to have an overflow hidden producing the effect that the content is sliding in.
Points to note within the CSS include the width set on the sideBarContentsInner DIV. This width should be adjusted as required to meet your deign requirements (It is set to 200px for the purpose of the demonstration).
Also to reposition the bar simply adjust the postioning styles applied on the sideBar DIV (i.e. right and top).
Finally you will need to include effects.js and side-bar.js to the head of the document in the order shown for this to work. Have a play with the demo below and download the code.
demo
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.
[...] Voir le site officiel de sideBar Billets proches : [...]
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
[...] 1. Sexy Sliding Menu for script.aculo.us [...]
[...] un menu réalisé à la base par Andrew Sellick via Script.aculo.us que j’ai modifié [...]
[...] ※この説明は「scriptaculous.jsバージョン」になります。 こちらからダウンロード （scriptaculous.jsバージョン） [...]
lamictal disease lamictal vitamin
thank you
[...] 3. Sexy Sliding Menu for script.aculo.us [...]
[...] 官网：side bar menu using script.aculo.us [...]
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..
is there a way where it will slide up and down when you scroll up and down?
Hi.. I was wondering if it is possible to slide out the menu using a link on the page. I am afriad that my visitors wont see the tab.. if so can anyone let me know.. i love this menu and would really like to use it
Hello…I love the menu but was having a bear of a time installing it. I wanted to use it as a container for a blog sidebar. No matter what I tried…the click on a voided link kept refreshing the page so you could never see the menu. I found this little piece of code that I just plopped in there on the off chance to see if it would work…voila! It works great on the php page…and allows me to load in the blog sidebar with no complaints. Not being a js guru…don’t know if this is a good or bad fix…but…it works ;o)
Insead of this…
Try this…
[...] side bar menu using script.aculo.us [...]
to fix the little lags in foxfire just add this in with your meta
meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″
[...] 4. side bar menu using script.aculo.us (演示地址) [...]
This was just what I was looking for—you saved me a lot of trouble by providing this. Thanks very much.
[...] It made my life a ton easier to deal with. Coming soon… I’ll show you how to convert Andrew Sellick’s Sexy Slide Menu for Prototype to JQuery! [...]
[...] power. Fancy menuSimple Javascript AccordionsHow to create VISTA style toolbar with CSSCSS Step MenuSexy Sliding Menu for script.aculo.usWebber 2.0 Dock Menu TutorialMootools menu with accordeon and effectsAccessible expanding and [...]
[...] side bar menu using script.aculo.us [...]
i can’t get this to work with my wordpress theme… the sidebar toggle button shows up but when i click it nothing happens.. what’s the matter?
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
[...] Or check out the how-to here: http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous [...]
Your information to the VPN network *is* secure. What you have to watch for is that most VPNs use split routing which means that if you are accessing a network or subnet within the VPN configured nets, then the traffic will go through the VPN and be secured. If, however, you access a non VPN server such as google, yahoo, or any other public web site, then your information is typically routed through the public network and *not* secured by the VPN. Of course any security sensitive site will be https which provides it’s own end-point encryption separate (or in addition) to the VPN.