Sexy sliding JavaScript side bar menu using mootools

I don’t think onClick is particularly intuitive. Considering it’s out the way (by some measure) wouldn’t it make more sense to react on hover?

yeah thats very possible. The only thing I was trying to avoid was for the slide to start without the user knowing what was going on. With so many flash banner adds that stretch over the content totally stopping users from reading the copy I decided that I didnt want to provide an on hover just incase it looked a bit spamy. I get your point though and it can be easily implemented. Maybe a better more eye catching deign is the way to go?

Dear Sir or Madam, i really liked you sliding menu! although could i use it for my webside works? and how could i change the manu position from right to left and middle to top like? also how to change the menu images inot others? THANKS EVER SO MUCH!!!

wow..this is sexy..great work.

(pink bLack)

Wow this is a nice (sexy) menu.
Good Work

I have a question what modules of mootools did you use, of i have a another application of a slideshow so that i dont have double modules..

Hello, this is awesome! I too would like to know which modules were used; as to not interfere with other mootools implementations.

Is there any way to get the tab to follow the content box when the slide menu is on the left side. Currently it will follow the content box when positioned to the right side of the screen but not the left. Thanks.

I Andy
I would like to start the slidebar open and then onclick closed.
I try to modify in the css #sidebar – right: 250px but not work well.
Please you have suggestion.
Thanks

Euugh! Sliding menus are as bad as blinking text and sliding banners, they belong in 1997 not 2007

Just to say it doesn’t work with Konqui.
With CSS hype, it was easyer to use NOT( FF && IE ) navigator. With DIY2.0 it seem’s to be 90’s come again.

Here about your site(side-bar.js) in Javanese!
http://youmos.com/news/side_bar_menu_js
Thanks!

Thanks for the link youmos.

Wow… great job
Thanks…

There’s a little typo in the css :
body{padding:0px; /* paddign^^ */}
and a bug on opera fixed by a :
#sideBarContents{float:left;}

Really good mootools use… I like it, and will use it

how to add it in php-fusion , same like here :
http://www.phpfusion-themes.com

wow!! … amazing menu .. thanks a lot!!

Hi Andy,

re: degrading with JS turned off

Why don’t you just collapse the sidebar menu via mooTools when the page is initially loaded. That way when Javascript is off the side menu will be expanded and usable as per usual.

I’ve used that technique quite a few times for jQuery snippets I’ve done and it always works a treat. JS users get what you intend, everyone else gets a static version that works just as well.

Just found that the right: -7px will result in a scrollbar on the bottom of the browser. Adjust it to 0 and it works nicely.

Additionally, when using this on a templated page, a click on the opener will send you back to index.php as the link event is not stopped. So, simply replace the event click like this:

$(’sideBarTab’).addEvent(’click’, function(event) { event = new Event(event).stop(); extendContract()});

This will prevent the link to get passed through.

I like it so far. You can always improve it by adding a way to add more child menus?

Hello folks. While redesigning my blog I discovered the Sexy sliding bar. made a little change in the js and html to suppress the Safari problem. Probably not the best solution but efficient: just put the minimal width at 1px. Tested on Safari 2 and Firefox 2 (OSX Tiger)

in html code:

in side-bar.js:

if(isExtended == 0){
sideBarSlide(0, height, 1, width);
…

else{
sideBarSlide(height, 0, width, 1);
…

Can somebody please teach me how to get this amazing menu????

Jaliefa
Just download the sample provided, it all works and you can do whatever you like with it.

hello people if you need more about css you can check http://webmaster-labs.blogspot.com/ here.

what’s a cool!! thank you.

This is a great menu and I’m having great fun playing around with it, so thank you very much!

However, do you know if there is a way to “float” or “position” the menu above layers without having to use position:absolute?

The reason being is I’m designing a fixed width site and not a fluid one and would love the menu to sit on my right hand column.

Cheers

Also, is there any chance of revising the menu for a “top bar” so that it comes in from the top of the page?

Making the bar come from the top of the page should not be very difficult and I am working on it over the next week or so, so come back soon to see the results.

and opera?????

Cheers Andy, look forward to it.

Efwe, see Alcarin’s comment regarding Opera here, http://www.andrewsellick.com/35/sexy-sliding-javascript-side-bar-menu-using-mootools#comment-3100

Hi,
great work – lovin’ it.
I would also be interested in a “mouseover” version.

Keep up the good work.

Cheers

too…………good…………

Hello,

Great script, I’ve used it on my site.
One question here, how to remove the ‘#’ in the URL when clicking the menu?
e.g., http://gallery.zzvo.com/main.php#
remove the ‘#’ at the end of the URL?

Thanks.

Hi Jesse,

Great implementation. Looks fantastic. To remove the # you need to simply stop the event. This can be achieved with the following example:

$(’element’).addEvent(’click’, function(e){
e = new Event(e);
e.stop();
});

Hope that helps. I’m currently rewriting the code into a class and trying to include as many of the features that have been requested as I can so come back soon to see the all new Sexy Sliding side bar.

Hi, andy

Thanks for your encouragement.
Code added, Problem solved. Take a look at my gallery site:
http://gallery.zzvo.com/

I have a suggestion, can you turn it to supporting auto HEIGHT?

I’ve removed some features, coz my menu is dynamic and unfixed height.
It caused problem with unfixed height. Fixed width is ok, no problem.

Looking forward to the new code.

It works great and I am very happy that I got it here thanks a lot

Very nice, thanks for the work.

I want to use this on my site with a custom image, but in IE the image doesn’t show, and in FF the arrow doesn’t flip. How can I get it to flip when opened?

Thanks in advance.

Nevermind- I got it. Thanks for for the fantastic sidebar!

hey man,

Thank you very much for the wonderful… Slide-in-bar.. It is awesome and simply cool…

Thanks a lot..
regards
nair

Cool menu and I would love to use it only if I could figure it out. Is there a way to move this tab from the side of the page. I have a center element or a container that has margin: auto for left and right. So to hang this tab menu off this element causes it to push this center container down. How do I work around this without making the container position: absolute?

I must say, this is one of my favourite tutorials. Check the website that I made. I tried my best to change the look to give it a more unique style. I couldn’t change the pink because its one of my favourite colours! And no, it doesn’t belong to the ’90s old fashion design. It only depends on how you use it. Am I right Andrew?

Hey everybody,

Very nice job but how can I do to make multiple slide-in bar?

Thx
Regards

cool work. very nice sliding movement

Great work, Andrew!

Here is a jQuery version for the Sexy Sidebar.

diffucult

Great menu!
Do you have an idea when you will be working on the your future plans for this menu (accessibility optimization etc.)? I am working this menu into a clients site right now but accessibility is very important to him especially the visibility of the menu when javascript is off.

Thanks!

any update andy?

has anyone managed to have more then one of these on a single page??

thanks

thanks

Is there anyway to have multiple menus on one site?

how I could change the menu bar position from right to left?

what to do to make the sidebar work with mootools 1.2?

Fx.Style is no longer available?

Best W

“what to do to make the sidebar work with mootools 1.2?

Fx.Style is no longer available?”

Are you gonna port it?

Try changing:

new Fx.Styles -> new Fx.Morph

and

myEffects.custom -> myEffects.start

Should be working with 1.2 then.

working now with 1.2.

many, many thx!!!

Best W

its a great hack.. i want to implement it on my blog.. but something is gng wrong…can you explain in brief as to how do i put codes in my template.. waiting for your reply.. thank you

visit: FreeDownloadz

I love this, what a great tool! However, I’m also curious if anyone has found a way to have more than one menu on a page. Any info here at all?

Thanks
~Brandy

Great work.
I am having problem using this on Firefox 3. Menu gets displayed below the Sidebar image. But works fine with IE7. Any fix?

for Firefox 3.0 just float the sidebartab and sidebarcontents

Thanks. Very good css Menu.

tankyou, muy bueno

muy bueno

The html-source contains a mistake:
in line 11: paddign = padding

But really good work

somebody can xplainme how to put this excelent bar menu in the left side of my website?

Wow… really great job…thanks

this doesn’t seem to work in ff3, safari3

not working propely in mozilla

Good job and thanks fo sharing !

Hi there!

I’m trying to use your sexy menu on a page wheree I also use mootools fx slide. How can I do to make it work with fx slide? I user mootools mootools-1.2-core.js.

When I to implement you menu the fx slide content stop working.

Hope someone can replay me….

/thanx

hentai mushrooms mushroom hentai of mushroom

الاسم : حسن محمد علي ولي
البلد : اللمملكة العربية السعودية الشرقية
العنوان : الخبر
الجوال الدولي : 009663508433023
الجوال من الداخل البلد : 03508433023
الجوال من الداخل البلد الخبر : 0508433023

حسن هاي

Excelentes aportes, felicitaciones.

agradecemos toda la ayuda que puedan brindarnos en difusion.
gracias

you can even use jQuery for such effects..i am already using it.. its very easy and flexible… anyway nice work…

http://www.balimcafe.net

Hi Andy,

lovely tut once again. Was just wondering if it is possible to implement this technique to have a drill down menu? e.g. http://www.deviantart.com main navigation?

http://www.muhabbetgulu.com

http://www.muhabbetgulu.com

In love with this site, fantastic. You might get a kick out of this Download Unlimited Xbox 360 Backups For Life Check it out.

so i guess nobody is using this on left side?
i can not make it work!!! #W%^Y%T$#@^Y%$#@

anybody willing to help?

invito a quien lo desee, sumarse a mi red de contactos y juntos construir una buena comunidad

@Veki: Calm down. Change:
#sideBar {
…
right:-7px;

To: left:-7px;

As for the Safari/Chrome issue, it’s cased by the background image in #sideBar. Remove that, do a bit of tinkering to the sizes, paddings and margins, and you’re in business.

I don’t think it’s been mentioned in the comments, but this menu can be made to have a flexible height. In side-bar.js, change:
var height = 320;
To: var height = “100%”;
… might also require the removal of a height attribute in the css, but my memory fails me there.

Chat Sohbet

http://www.samyeli.net

I like it so far. but it is not working in Firefox/3.0.4

for Firefox/3.0.4 we can add small code in css…

In :

#sideBarTab{
float:left;
height:137px;
width:28px;
padding:0;
margin:0 5px 0 0;
}

#sideBarContents{
overflow:hidden !important;
float:left;
padding:0;
margin: 0;
}

http://www.fendou163.cn 奋斗网络

The Sexy Slide Menu working fantastic. Can I have any suggestion how to create sub-menu in the same. I will be more great full, if any body helps me.

Breakups Aren Breakups Aren

thanks

agradeceria consejos para una web buena.
gracias

tanks for post

As for the Safari/Chrome issue, it’s cased by

It does not work properly in Safari

What do we need to change besides Fx.Styles to Fx.Tween to make this compatible with MooTools 1.2?

hi ,

its look and feel is good

i want to change width and need scrolling with my page…..
is it possible for this menu….

I have applied it on my site and its looking good. But the thing is that when the site loads, it opens expanded.

Please help.

By the way, when the sidebar is open by it self it works fine, but after integration with other css scripts, this prob is caused.

Really Nice Sidebar menu.
thanks

It is a great menu, can run in IE but Firefox can’t.
It can’t show normally, the side bar title and link will be placed follow the sidebar button, not show horizontally.
How can I fix the problem?

Интересно! Вообще, забавно видеть , когда в считанные часы совершенно без малейшего повода из пальца высасывается такой “новостной сюжет” и начинает широко гулять по интернету.

Your blog is very interresting for me, i will come back here..

THANKS EVER SO MUCH!!!

Hi, I am using your menue and it is very good, however I have just 1 problem, which is when I zoom out or in the menue moves from its place, is there anyway possible to make sure the menue does not move what so ever even when page is zoomed in or out.

Thanks

its not working on Microsoft FrontPage.

thank you

cool work. very nice sliding movement

Is there a way where it will slide up and down when you scroll up and down?

thank

thx so much!

I couldn’t get this working properly in latest version of safari and I’ve never really used MooTools in anger. I didn’t have much time to work on a proper fix but I have fixed it by setting sideBarContents display to none initially and then in the javascript display or hide it depending on expanding or collapsing.

CSS:

#sideBarContents{
overflow:hidden !important;
float:left;
display:none;
}

side-bar.js:

function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 0, width);
sideBarOpacity(0, 1);
isExtended = 1;
// make expand tab arrow image face left (inwards)
$(’sideBarTab’).childNodes[0].src = $(’sideBarTab’).childNodes[0].src.replace(/(\.[^.]+)$/, ‘-active$1′);
$(’sideBarContents’).style.display=”block”;
}
else{
sideBarSlide(height, 0, width, 0);
sideBarOpacity(1, 0);
isExtended = 0;
// make expand tab arrow image face right (outwards)
$(’sideBarTab’).childNodes[0].src = $(’sideBarTab’).childNodes[0].src.replace(/-active(\.[^.]+)$/, ‘$1′);
$(’sideBarContents’).style.display=”none”;
}
}

Hope this is useful to someone

Appologies for the double posting, but I’ve got a little more to add.

I wanted to beable to scroll down a long page and open/close it at any time without it taking you back to the top.

To do this I’ve removed the href=”#” in the html so the opening tab is now just:

Then in the sidebar.js i’ve changed the init function (as recommended by Andy here: http://www.andrewsellick.com/35/sexy-sliding-javascript-side-bar-menu-using-mootools#comment-23917) to:

function init(){
$(’sideBarTab’).addEvent(’click’, function(e){extendContract()});e = new Event(e); e.stop();
}

Now this works but because it’s no longer a link, you lose the “hand” cursor to tell you it’s a link. To get this back, add cursor:pointer; to #sideBarTab to get something like this:

#sideBarTab{
float:left;
height:137px;
width:28px;
cursor:pointer;
}

Hope this is useful to someone too

Oops, forgot to add that I keep the menu at the same point on the screen (to allow me to scroll down the page with it still there). I did this by changing the #sideBar position to fixed:

#sideBar{
position: fixed;
width: auto;
height: auto;
top: 200px;
right:-7px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}

Last post, promise

Very interesting sites.,

you can even use jQuery for such effects..i am already using it.. its very easy and flexible… anyway nice work…

Very nice job but how can I do to make multiple slide-in bar?

ThanSs Yavyummm

Wondering if anyone can help me with this script. I’ve tried several different outlets and options, but nothing is working.

I need to duplicate this script, to have 2 separate bars on a website. I need 2 because they are for 2 different uses. I have duplicated some of the css tags, and have added a second div tag with different links below the first, however only one of my bars is working. I also tried to duplicate the side-bar.js file into a side-bar2.js file and changed some of the tags to match the new #2 css tags, but the only thing that did was make the second animation run overtop the first.

Can anyone tell me how I can duplicate this properly to have 2 separate bars on the website, with different links? Thanks!

cool script. very nice sliding movement

6K9Rb3 ydojabdfhzun, [url=http://lxqdpnfafcct.com/]lxqdpnfafcct[/url], [link=http://uuirdupyncmt.com/]uuirdupyncmt[/link], http://xqzrctdieawr.com/

But supporting the uprising owing to its progressive content is on the same plane as supporting the regime owing to the progressive content of its economic policies and structures. ,

I am getting more and more media stating they will not speak to an author if they do not have a good website. ,

cool script

claritin drugs Order anafranil cumming family medicine statistics on smoking uk national ban moderately severe depression
http://rxdrugs24×7.com/product/cardizem-hci.html

hai i am sexyboy

nicely done and u made it appear real easy, i mean just copy and paste.
thnx

I am so glad that this still works so seamlessly. Thank you.

thanks for this type of article.after a long surfing i got this one.thanks again.

Hey,

I have to mention that CraigDouglas’ fix for Safari/Chrome worked for me. That said, you can initially set your CSS for

#sideBarContents

to

display: none

but have both the extend and retract action in the JS do :

$(’sideBarContents’).style.display=”block”;

I found that his original fix lost you the slide-in animation, while this seems to work for me on Safari 4.0.4 and Google Chrome. There is an odd flshing thingy happening, but it works.

Oh, and I’ve found that the html code uses a line stating :

to listen for the click on the JS side.
Trying to use this with MODx CMS, the href=”#” call triggers a page change on a php page. You fix that by using a tag to listen for the click, leaving the page peaceful and very unreloaded. Like this :

Just to improve the Chrome / Safari fix above.

In order to preserve the animation effect guys just include the display: none; property in a timeout.

Eg:

setTimeout ( “$(’sideBarContents’).style.display=’none’;”, 1000 );

This will preserve the effects along the fix for chrome/safari.

PS. The last integer is the actual timeout, you need to have it set the same as your slideDuration variable.

The only problem that I’m having with this script is when using png’s as background images for #sideBar on Internet Explorer 6. No png fix seems to work, hence I cannot use tranparent background(gif sucks) in IE6 only.

Nice menu. Very interesting for sexy developments.

Hi ! Nice menu !
I’m briging a question from the dead here … i have the same doubt as ‘mutlu dogan’(May 9th, 2007) hahahahaha …
i really tried to change the side of the bar (from right to left) and is it possible to turn this sliding into a kindda ‘drop-downish’ menu? Like flipping the button 90 degrees?

Thanks
Victor

Thanks Bebem