Fancy Sliding Tab Menu V2
Sep
12
The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time I’ve included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu. I have some more ideas for the menu and once I have implemented those I will post on here again with full documentation. I have really put it up here for now to hear peoples comments.
demo
Have a look for yourself at the new Fancy Sliding Tab Menu demo.
code
Feel free to download the Fancy Sliding Menu Code.
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
[...] Fancy Sliding Tab Menu Fancy Sliding Tab Menu using script.aculo.us [...]
[...] http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2 [...]
[...] 15) Fancy Sliding Tab Menu- [...]
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
[...] Fancy Sliding Tab Menu [...]
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..:?
[...] 15) Fancy Sliding Tab Menu [...]
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
[...] Fancy Sliding Tab Menu using Script.aculo.us [...]
[...] Fancy Sliding Tab Menu- [...]
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!
Hi Andy,
Thanks for the neat code to make the slide in menu.
I made some changes to it to appear it from the left side instead of bottom and to have the position fixed.
Here are two more things I’ve been trying to do that I’ve been able to yet.
Prob 1:
On page load event I want the menu to be in the open/show mode. I tried changin the code in the prototype.js and changed
Event.observe(window, ‘load’, init, true);
to
Event.observe(window, ‘load’, slidesidebar, true);
Well, this does make the menu open on the page load event but the click event on the side bar doesnt work anymore. So there is no way to close and retrieve the menu.
How do I make sure the Menu is in the open state when the page loads and not disrupt the functioning of the page?
Prob2:
I changed the value of position attribute in the style sheet of sidebar to fixed
#sideBar{
position: fixed;
Prob2:
I changed the value of position attribute in the style sheet of sidebar to fixed but it is not displaying correctly in the IE 8.
#sideBar{
position: fixed;
}
I know that the problem is that IE doesn’t recognize position:fixed; as a valid value and changes it to position:static;. Is there a simple work-around this problem?
Any quick help would be highly appreciated.
Thanks again for the good job.
I went looking in tabslide.js for
http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2/comment-page-2#comment-57021
and I couldn’t find that in there. I would very much like to hide this but I know nothing about javascript so I can’t figure out where to add in the code to autohide if the mouse isn’t on the menu. Can someone help me figure it out?
[...] Home of Fancy Sliding Tab Menu [...]
Any ideas yet on how to make it hide the menu when your not looking at it? I have been trying some things but it doesn’t appear to be possible. I need to hide the menus because 2 of the 4 panels have alot of links on them and it takes up most of the page making the page unreadable.
Nevermind. I updated to the new version, modified the idle resets and now it works perfect. awesome job.
Hi, I was wondering how you would convert this to work horizontally, instead of vertical??
Awsome script btw!!
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.
[...] Fancy Sliding Tab Menu 项目主页 |Fancy Sliding Tab Menu 项目下载 | Fancy Sliding Tab M… [...]
[...] 15) Fancy Sliding Tab Menu- This cool menu is developed in script.aculo.us [...]
very nice menu
Firstly thank you for the great code and introducing me to this.
For more control, i’ve made it work with a click and it’s easy to close all tabs by clicking. I have never programmed before and dont know java so excuse me if the code is cumbersome. You will need to replace paste in the following:
//ADDITIONAL NEW FUNCTION START
//Click Accordian
function slidedown(evt) {
//Get the variable of the element that activated the event
el = Event.element(evt);
//set the variable for the element that must move up
var eldown = getNextSibling(el);
//set the variable for the element that must move down
var elup = getNextSibling(el);
//determine if the SLIDING variable IS EQUAL to 1
if( getSliding() == 1 ){
//if it is, exit the entire function
return;
}
//continues if sliding variable is not equal to 1
//determine if the element for the event has an ID of visible, IF NOT continue
if ($(‘visible’) != el){
//Double check that the sliding variable is not set to 1
if( getSliding() != 1 ){
//determine if there is a panel with id set to visible, if so do this
if ($(‘visible’)) {
var resetEl = getNextSibling( $(‘visible’) );
$(‘visible’).id = ”;
el.id = ‘visible’;
//run the function to slide down visible tab and open new clicked tab
parallelReset( resetEl, eldown );
//exit entire function once completed
return;
}
setSliding( 1 );
singleSlideDown( eldown );
el.id = ‘visible’;
}
}
//this runs if the event element is the same as the element with id visible
else{
if( getSliding() != 1 ){
setSliding( 1 );
singleSlideUp( elup );
$(‘visible’).id = ”;
window.clearTimeout( slideTime );
}
}
}
////end of new function
Then you will need to REPLACE the code that reads:
///OLD CODE STARTS
Event.observe(panels[i].getElementsByTagName(‘h3′)[0], ‘mouseover’, accordion, false);
Event.observe(panels[i].getElementsByTagName(‘h3′)[0], ‘mousemove’, accordion, false);
Event.observe(document.body, ‘mousemove’, resetIdle, false);
//END OLD CODE
with…..
//NEW CODE
//Event.observe(panels[i].getElementsByTagName(‘div’)[0], ‘mouseout’, resetTabs, false);
//Event.observe(panels[i].getElementsByTagName(‘h3′)[0], ‘mouseover’, slidedown, false);
Event.observe(panels[i].getElementsByTagName(‘h3′)[0], ‘click’, slidedown, true);
//Event.observe(panels[i].getElementsByTagName(‘h3′)[0], ‘mousemove’, slidedown, false);
Event.observe(document.body, ‘mousemove’, resetIdle, false);
//END NEW CODE
and then also add in the following functions:
//ADDITIONAL NEW FUNCTIONS
function singleSlideDown(eldown){
new Effect.Parallel(
[
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function singleSlideUp(elup){
new Effect.Parallel(
[
new Effect.SlideUp(elup)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
function parallelReset( resetEl, eldown ){
setSliding( 1 );
new Effect.Parallel(
[
new Effect.SlideUp( resetEl ),
new Effect.SlideDown( eldown )
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}
//END ADDIOTIONAL NEW FUNCTIONS
This does work so if i made errors while pasting let me know. I hope some find it usefull.
[...] Fancy Sliding Tab Menu- [...]
[...] The Fancy Sliding Tab Menu [...]