Fancy Sliding Tab Menu using script.aculo.us 18Jul07
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
- Advance Vista Styled CSS Menu
- JavaScript Clone Object Function
- JavaScript GUID Generator
- Playstation 3 (PS3) and BTHomeHub network issues (80710723)
- HTML Forms on the fly
- Script of the week
- PHP UK Postcode Validation
- What makes a successful blog?
- Free SEO internet marketing book
- JavaScript Table Row Highlighter Class using Mootools
- Sexy Sliding Menu for script.aculo.us -
Posted by and lamictal - Simple JavaScript Slide Show Using script.aculo.us -
Posted by speshdiv - Sexy sliding JavaScript side bar menu using mootools -
Posted by 「side-bar.js」 設置説明 javascript | 頭脳外部メモリー 「独学で趣味を満喫」 - Sexy sliding JavaScript side bar menu using mootools -
Posted by Sexy Sliding Javascript Menu Bar « DesignbyNoble - Sexy sliding JavaScript side bar menu using mootools -
Posted by 60 More AJAX- and Javascript Solutions For Professional Coding | Web Tools | Web Design & Graphic Design Blog - facebook application development part one -
Posted by Hurry
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
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
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?