My First jQuery Plugin, a Sliding Menu
Update 10/17/2006: As requested, I've added two new arguments to the menu that will toggle the hide on page load (
hideOnLoad) and also toggle the autohide (autoHide) when the mouse leaves the menu area. The 2nd argument is only useful when thetriggerEventis set toclickordblclick
Update 10/21/2008: As a request from a reader, I've modified the code a little so that setting loadHideDelay: 0 and hideOnLoad: true will cause the menu to be hidden on initial page load. Click on the menu below to see it in action.
Update 03/04/2009: Decided to upgrade to the latest version of jQuery (1.3.2) and rewrite the code using jQuery UI instead of the Interface plugin.
Here is my first jQuery plugin. It is a very simple sliding menu using the effects provided by Interface (think Script.aculo.us for Prototype). Now using jQueryUI for sliding effect.
I really like jQuery. I also really like Prototype and Script.aculo.us. I've come to learn that each one has its strengths and weaknesses and you should decide which one to use based on your needs. I use them both, depending on the project at hand.
Here's an example of the menu in action (click menu label). This particular menu has the following options set: triggerEvent: 'click', hideOnLoad: true, autoHide: false, loadHideDelay: 0
The defauly behavior of the menu is to hide after 1000ms (1 sec.) and to display when your mouse hovers over the "menu" label. The menu will also auto-hide after 1000ms when the mouse leaves the menu area. Most of these values, including the sliding effect, can be customized.
Visit this example page to view the source and see how to use the menu and customize it. I haven't provided alot of documentation on it, but the source code is pretty self explanatory.
required files:
Yes, it doesn't work with the latest jquey version, 1.3.1, any advance??
Thanks
Great work!! thanks for sharing.
Where I can find rb_menu.CSS ????? Please Help !
Ok, I've got rb_menu.css BUT :P menu still is not working ... ;/
just look at this -> http://www.bartoo.yoyo.pl/toxic/index.html
it's not working :/ ... please help me
Hi,
this is excellent.
can i make like this Vertical Menu?
your swift reply shall be highly appreciated
Thanks and Regards,
- Gnaniyar Zubair
gnaniyar@gmail.com
kgnaniyar@tasmea.com
That's G8 ! It's working in IE. But I have 2 problem, I would be glad if anyone would solve this
1- It's comming in a vertical manner
2- How to include CSS files in it. I mean I havn't fing any CSS file code with this article.
These are two simple problem that I am facing , This is one of the best tutorial I have ever read. I am glad to read this.
Thanks alot !
Respect +++ .
Hello!
Thanks for this great plugin. I installed in on my site and it works perfectly in Firefox, but it has problems in IE7. It does not show the sliding effect, and it gets displayed after a short delay. any solutions?
Thanks!
Peter
How could I put this script into Joomla?
Hi,
Great work !!
It works fine with the old version of jQuery (before your "Update 03/04/2009").
But it seems have problems with jQuery 1.3.2. but only with IE (not with FF). There is no slide effect with IE.
I was that one who requested your Update 10/21/2008.
I have an other resquest for your sliding menu plugin...
How can I insert a submenu effect ?
See a flash example here : http://www.franckhamel.com/
Good job !
Add a keyword demo . People may be looking a quick find for demo than example. A keyword demo may also helpful to find quickly.
Thanks
Hari K T
as a chinese,thank you all the same!
Thanks, cool example.
This really works great and is perfect come In plugin for my next article , in which am reviewing best jQuery Plugins throughout :) ... I am surely gonna include this one in my post.
REgards:
Sarang Dravid ! ^_^
omg...this breaks design standard that exists on earth. Have you ever heard of "Mystery Meat Navigation"?
I beg of you, no one use this menu! Use SuperFish if you want a cool jQuery effect..
**edit**
...this breaks *every* design standard that exists on earth...
Author, I appreciate you deleting my comment on why not to use this menu.
Before you delete this one, make sure you go to http://www.websitesThatSuck.com/ to learn why this menu creates a terrible user interface. (Hint: Look for "Mystery Meat Navigation")
I've been looing for a menu feature like this to add into a Magento store, for the account details like My account, wish list, cart, etc. So you just hover on Account and all that slides out. Do you know if the "menu >>" part could be changed to an image without causing any trouble? Then it would be perfect.