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