Fancy Sliding Tab Menu V2

Hi Andrew.
I love your menu but there’s one thing I would like to see: mouseout action.
Keep the good work.

PS: Your blog is pretty cool with very good articles. One of my favorites.

Very sexy, nice work Andy.

your website has clipped on resourcealiciousx
http://resourcealiciousx.my-poison.com/?page_id=4

Thanks very much transparecer.

thanks very much ^_^

This is a great script. I’m disappointed I can not use it though because sometimes when you scroll back over the tabs, the tab jumps and doesn’t come up or the text pops up but the div container the text is in doesn’t come up. I did not test this in internet explorer but I know I was using Mozilla when I noticed this problem. You might want to check into that. I am using the latest version of Mozilla too.

great piece of code, but is it possible to have an enhancement? slide left and right?

Thanks!!!

I would also like to see a mouseout function to close menus rather than the idleTime setting. idleTime works if you are going to make a fairly quick link selection (for example) but is less useful if you want to display info to be read (specifications, colour options etc) where there may be no mouse movement.
This would increase the usability of what is already a very nice effort

Close to what I am looking for, but I need to be able to space the tabs apart, and specify their width. I tried laying them out in a table (ugh) but that didn’t have any effect. I need about 50 px between each tab, is that possible?
Thanks!

I really love the sliding menu! I added semi-transparency to it which makes it look even more elegant.
Just add the following lines to the CSS .panel block:

filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;

Great and pretty kool script but there is only one irritating thing which everyone is saying. Mouseout Event which seems to be missing.

Nice job, clean code and last but not the least SEO friendly.
Great work.

Thank you for this. I found this via stumbleupon and it’s one of the few times I stopped and left a comment

I’m subscribing to your feed just because this is one of the best things I’ve seen recently. I’m going to use it for a new portfolio layout.

Thanks,
Mike

excellent works, thank you, no flash needed

Why won’t the darn menu close down when you mouse out of it??? It just stays UP.

when select one tab, idle for 10s, move the mouse back to the tab, the tab is no longer displayed.

Great code! And no need for flash. One question… is there a way to manipulate the code so that I can use different colors per button or even a different image per button instead of the static color across the bar?

Very good exampale

thank you

to reset the mouse out value to 2 secons open tabslide.js:

find:
function resetIdle(){
if( $(’visible’) ){
window.clearTimeout( slideTime );
slideTime = window.setTimeout( “resetTabs()”, 10000 );
}
}

Change to:
function resetIdle(){
if( $(’visible’) ){
window.clearTimeout( slideTime );
slideTime = window.setTimeout( “resetTabs()”, 1000 );
}
}

Thanks awesome script.

Thanks..this is awesome script. you are the man..

Genius

I’m trying to add this on top of a google maps mashup, the problem is that eveything above the sliding tab menu/panel becomes unclickable because the accordion div is layered on top of the map. Is there a simple workaround for this?

Thanks for this awesome menu. I’m trying to put it on the left border of my website, and i can solve that.

#sideBarTab{
float:right;
height:251px;
width:29px;
}

The sideBar keep positionning on the right side of the page…
Can anyone can help me solve that ?

Cool!!!!I like`~

Any way to make this slide down instead of slide up?

Cool script, dude.
Too bad it isn’t working in IE5.5

Thanks awesome script.

Almost exactly what I was looking for, thanks!
The only thing I want to learn, is: What do I have to remove/adjust in the scripts if I only want one tab?

Hi Andrew,

Nice script, but in combination with my script it wouldn’t work. I noticed that if you put anything else than plain text inside the tags this element will be the source of the event and not the tag. I’ve added a very simple check for this. It’s not that robust, but it will do for direct child nodes that are not text nodes.

line 15 of tabslide.js

function accordion(evt) {
el = Event.element(evt);
// Get parent element if not the H3 tag
if ( el.tagName != ‘H3′ ) el = el.parentNode;
var eldown = getNextSibling(el);
…

Maybe this will help someone.

I installed this tool locally and it works fine with IE7 and FF2.0 but when I try it on any online site it hangs up. I tested this on your link and my own site.

The arrow graphic changes immediately but the panel display takes up to 2 minutes to respond to any event.

I have CA Internet Suite 4.0 on my testbed and have tried it with firewalls on and off. System is XP SP2 and all current patches are installed. I am using a cable connection at 1.2m download, 750k upload. Local Java console is up to date.

Any suggestions please email me.
Jon Black

Good day!,

Is there any way you can load in radom pictures or a swf as the background?

i just want to menu to come downwards not in upwards . how to do that. please help me

Very good,I like it!

Welcome to Sample Comments

Great Article !
To make this slide down instead of slide up,
simply replace
.panel{
bottom:0px;
margin:0px;
padding:0px;
background-image:url(images/tab-right.gif);
background-position:top right;
background-repeat:repeat-x;
background-color:#333333;
}
with
.panel{
top:0px;
margin:0px;
padding:0px;
background-image:url(images/tab-right.gif);
background-position:top right;
background-repeat:repeat-x;
background-color:#333333;
}

Thank you Andrew, this is sweet. I’m a relative noob to js and noticed a few comments requesting primer on using different images or colors for each tab. Any hints on that would be great.

What a great bit of script and simple to implement. I was wondering if anyones has resolved the odd flicker which happens from time to time when panels roll up or down??

I like this,good example

Thanks, Andrew! You are a very selfless individual! Awesome script!

Nice script.
The odd flicker which happens from time to time when panels roll up or down can be solved by updating protoype.js and effects.js

Sorry, i’ve this problem:
In firefox 3.0.7 when i move my mouse on a panel and wait 10 seconds,panel close itself, but if my mouse is positioned at bottom of panel (when i wait panel close itself), the white arrow still down and when i try to reopen the panel, it remains in same position (close)…
Can you help me?
Sorry for english, but i’m italian…

Thanks

Very smooth, professional and sleek!
You deserve the “Golden Menu Award!!!!!! If they don’t have one they should make one!

Andrew, this is fantastic code! I’ve used it on a client site and it has great “wow” factor. I am looking forward to more.

Hi Sir

Very good menu indeed, but can u help me toggle the panels by mouse click ? That is when I click on the panel head, it should slide up/slide down according to the current state. Any kind of help would be much appreciated. Thank you

Can any one help me…. I’m starting to build a website using Dreamweaver and I’d like to use this menu. It’s just not clear to me, what exactly to copy into my html page.

Please help me.

I think this is such a great menu- but I’m new to this- and I tried downloading it and I can’t? I have a mac-could that be it and anyway I can work around that?

hey! Thanks so much for this. I really enjoyed it and if its fine with you i’ll link you up in my web as a good source for scripts with class. You rock!

arka plana nasıl değişik resimler atabiliriz..:?

Hello, Very nice work, I have listed you in free ajax scripts directory – http://freeajaxscripts.net/directory/Ajax_menus/Fancy_Sliding_Tab_Menu/details.html

Great work! Could you please show us how to change the mouseout function so that the menu collapse once I mouseout of the nav area?

Thanks very much!

A little helpful change:

find in tabslide.js (not including the code divider lines I made):
~~~~~~~~~~~~~~~~

function resetIdle(){
if( $(’visible’) ){
window.clearTimeout( slideTime );
slideTime = window.setTimeout( “resetTabs()”, 10000 );
}
}

function setIdle(){
if( $(’visible’) ){
slideTime = window.setTimeout( “resetTabs()”, 10000 );
}
}
~~~~~~~~~~~~~~~~

And change to:

~~~~~~~~~~~~~~~~
function resetIdle(){
if( $(’visible’) ){
window.clearTimeout( slideTime );
slideTime = window.setTimeout( “resetTabs()”, menuTimoutDuration );
}
}

function setIdle(){
if( $(’visible’) ){
slideTime = window.setTimeout( “resetTabs()”, menuTimoutDuration );
}
}

~~~~~~~~~~~~~~

Then add at the top of the script:

var menuTimoutDuration = 1; // Number in seconds. Default: 10 seconds.

// Convert seconds into milliseconds for JavaScript to understand.
menuTimoutDuration = menuTimoutDuration * 1000;

~~~~~~~~~~~~~~

Also in that same file, find all the places it has “0.3″ and change it to:

menuSlideSpeed

~~~~~~~~~~~~~~

Then add at the top of the file:

var menuSlideSpeed = 0.8; // Default: 0.3

Also, for what it’s worth, in the section of “tabslide.js” where it says:

Event.observe(panels[i].getElementsByTagName(’h3′)[0], ‘mouseover’, accordion, false); Event.observe(panels[i].getElementsByTagName(’h3′)[0], ‘mousemove’, accordion, false);

If you add the following line right below that, it will cause the menu to close when you exit the menu–the way everyone’s been asking (though this script, as a whole, has too many bugs for anything to really work well enough anyway. And this is a bit of a silly way to accomplish making the menu close when moving off of it–but I didn’t feel like devoting hours to making a better way):

Event.observe(panels[i].getElementsByTagName(’div’)[0], ‘mouseout’, resetTabs, false);

@Jon9486:

I would not include

Event.observe(panels[i].getElementsByTagName(’div’)[0], ‘mouseout’, resetTabs, false);

Since stopping the motion with mouseout breaks the whole slide menu. Easily seen if you move across the panels very fast with your mouse it takes only a few movements to break the menu. This has to do with the motion not finished and you already send another task (closing) to the script engine and it gets stuck.

So do NOT include the MouseOut event!