Fancy Sliding Tab Menu using script.aculo.us
Jul
18
Well I’ve been at it again looking at new ways in which I can make good use script.aculo.us effects. I started by looking at the accordion this time and ways in which it can be developed to produce different results. The most common example that I knew of was the Rico accordion, so that’s where I decided to start.
As you can see below it looks quite cool and can add some nice interaction to any site. At this stage, however, I’m not going to write too much about the code behind it as I am still working on it but I thought it may be interesting for people to have a look at.
browser list
Currently the tab slide has been tested in Fixefox 2.0, Internet Explorer 7 – 6, Opera 9 and Safari 3. I am planning to test this more rigorously, however, as I stated above there is still more work required before I prepared to say it is complete.
demo
Please use the Fancy Sliding Tab Menu using scipt.aculo.us demo, have a play and let me know what you think.
code
Please download Fancy Sliding Tab Menu using scipt.aculo.us code and use it to your hearts desire.
todo
- Check accessibility
- Degrade without JavaScript
- Further browser tests
How can you set it up so that the menu reverts back to its normal state, after it has been popped up? I’ve looked at the downloadable files in IE7 and FF2 — and it works fine between the hovering over the various tabs — but how do you make the current tab slide back down automatically, after you move away from the menu? Right now, the tab remains up even after the hover state. I’d really like to integrate this into my site, so any help would be much appreciated =)
Hi Andrew, fantastic menu! One more step to get the flash rid of our lifes LOL =)
I’d like to ask u the same think as the gentlemen above did, to make the current tab slide back down on the mouse out.
Thanks! Cheers mate!
I’m currently working on a version with an idle state implemented. After say 30 seconds of non mouse movement over the menu it will contract all the tabs.
I’ll post it here soon when it’s complete.
Thanks
Andy
Your menu really rocks Andy, can’t wait for improved version with the auto contract item
[...] 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 [...]
Hi All,
Just to let you know I have updated the menu with an idle state that will auto contract the menu when there is no mouse movement for a defined period. Have a look for yourself at http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2.
Cheers
Andy
Hay dude, nice job.. keep it up.
I really like the menu, but I don’t have extension/program to open a .rar file. Is there anyway to get this in zip format?
Thanks,
Serena
Hi Serena,
Simply download and install Winrar (http://www.win-rar.com/). This will then allow you to extract the files.
Sir,
thanks for ur source code and help to me. i am really greatefull to you.
if any suggetion for imporving that source code then i will post you.
thanks.
thank u
[...] 6) Fancy Sliding Tab Menu using script.aculo.us [...]
[...] 6) Fancy Sliding Tab Menu using script.aculo.us [...]
[...] Fancy Sliding Tab Menu using script.aculo.us [...]
i noticed a slight bug in the slide menu demo. Onced closed the menu would pop back out very quickly (if you blink u miss it) have you got a horizontal example?
[...] Fancy Sliding Tab Menu using script.aculo.us at Andrew Sellick Fancy Sliding Tab Menu using script.aculo.us | andrewsellick.com (tags: css javascript scriptaculous prototype navigation menu tradesinfo) [...]
Hi Men! Excellent Menu! I was looking for some like this for a long time till I found this! The only thing is that i need the same thing but upside down. Put the menu on the top on the page and open the tabs below the menu. Thanxs!!
mate, its a great script. love it.
just one quick question though, if i want to have the tab open onload, what are the changes should i do?
can you help me out?
thankx
Hey!
nice work indeed! I’ll definetely use this one in one of my productions! Thanks!
[...] 6) Fancy Sliding Tab Menu using script.aculo.us [...]
Hi nice menu, I have been playing about with it and would it be possible to get this going down the way I tried no luck
gj
在哪下载呢？
噢，我找到了，并下载了，谢谢你分享这么不错的素材~~
谢谢
Nice I really like that menu, its a bit different and the effect is very smooth.
[...] 6) Fancy Sliding Tab Menu using script.aculo.us [...]
[...] Demo Tutorial Posted in ajax | Tags: fancy, Scriptaculous, slide, sliding, tab menu « [...]
i lik this menu its relay great 1…
谢谢 (Thanks)
[...] TabView component is designed to enable developers to create navigable tabbed views of content. 26. Fancy Sliding Tab Menu: The menu is developed in script.aculo.us and has some extra features as requested in comments [...]
[...] Website Link [...]
[...] 6) Fancy Sliding Tab Menu using script.aculo.us [...]
[...] 6) Fancy Sliding Tab Menu using script.aculo.us [...]
This is kinda a big resource that you’re supplying and you give it away for free of charge. I enjoy coming across sites that understand the value of providing a quality resource for free of charge.
DietsAndWeightLoss
Sir,i really liked this stuff….but can u tell me how to revert back the menu when not in hover state….