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:
rock on!
Very nice, good work!
Brilliant menu, looks fantastic. Can I ask what is needed from interface to make it work. I tried to create a minimal version of interface using what I thought you had (just the fx) but it didn't work so I ended up using your version. Which based on file size I guess is not the full set of functionality?
Could you let me know what's actually needed, I'm still new to all this jQuery so it might be obvious.... ;)
Cheers
It is working into table or it is a bug?
Doesnt work for me in .
Regards, Dom
@Simon, hmmm.. i don't seem to remember which Interface "effects" I chose, but I can make a guess. It is either fx.slide or fx.blind. Just take them both, or use mine if it works. I'm probably going to suggest to the author of Interface to put that sort of information into the compressed download file.
@Dom, I am not sure I understand what you mean.. you are trying to put it into a table and it is not working? Or it just doesn't work for you at all?
@everyone, thanks for the praise :)
This is so amazing! Great work!
Anyway possible to make the text not show up when the page loads until you roll over it? Like it's hidden until you click to see it?
@ZBN: I've updated the code to allow for 2 more arguments, namely
hideOnLoadandautoHide. To get the functionality that you want, pass the following options into the menu:{triggerEvent: 'click', hideOnLoad: false, autoHide: false}You're a genius! Thanks!!!
Great job, very nice !
I have a question, i would like to have the menu invisible on the page loading ! (i think it's the ask of ZNB !)
Can you tell me how to get this option please.
Thanks
Hi ramin,
greatttttttttttttt work.... i was wondering how to change the js file so that the menu shows up on the left side unlike the default right side... or even better if you could add another parameter in your code to let the menu appear on the right side or left side or top or bottom.... with this part added this would be simply amaing.... if you dont have the time can you tell me what i need to edit if I want the menu to appear on the left instead or the right.... or top or bottom... respectively...
thnx again... and congrats... great job....
Can you fix: if you mouseover the third menu option briefly the menu pops out, but does not retract. Seems a little buggy given that it normally retracts onmouseout. I've come across similar behaviors where something begins to animate, but if the user "moves on," the animation stops (more or less) and begins its ease-out/end behavior.
@Vinay, thanks and i'm glad you like it. I think making the menu slide in/out from any direction would be a nice feature, but it requires a lot of code changes. Unfortunately, I don't have time to work on this little project right now. Maybe sometime in the future. Sorry.
@jshaker, I see what you mean. Since the 3rd menu on the example page slides in pretty slowly, the onmouseout does not trigger until the animation has completed. This is how i designed the menu because that is the behavior that my client wanted. I could go back and modify it to trigger the show/hide at any time, but I believe this could introduce other bugs. Perhaps later in the future when I have more time I can revisit this. Feel free to play with the code and modify it as you please. Let me know how it goes.
What I want to do on my blog, is every few hours take the oldest post and move it to the
front of the queue, all automatically. Anyone know if there is a plugin that can do this or
a simple way to set up another plugin to do this (use my own feed perhaps)?
Thanks.
@Chad, this seems like a backend/coding effort. The easiest solution I can think of is to have some sort of service on your server (CRON job) that will modify the date of the blog entry so that it appears it was just posted. This will make it appear first on your page, but it does change the date, so I'm not sure if you want that. Another solution would be to hack at the Blog software that you're using and have it display old(est) posts on the first page using some sort of flag. Either way, you will need to do some coding. G'luck.
Hi,
I've tried to use your sliding menu, but doesn't work. I hope you want to take a look at http://www.gerritsgendt.nl/index.php (you'll see the menu a the top, but the only thing that is displayed is 'menu'. The sliding effect doesn't work). What have I done wrong?
It's really important that I correct this problem and I hope you can help me.
Willem
it flickers on Firefox 1.5 on Mac Os X
It flickers on Firefox 1.5 / Ubuntu breezy. Considering previous comment maybe on all FF1.5? :-(
Sorry no slinding effect too in FIrefox 2.0.0.1
/
nice plug-in. would you please post your rb_menu.css? thanks in advance.
There is a slight flicker on my Mac with Firefox, but not too dramatic. Big question is IE6 on Windows (which I cannot test) how goes it there? Also - I echo request of chy on the css for the menu. Specifically - I'd like to see the options for the type for menu.
Thanks in advance - this could be the perfect solution for a client who wants a menu, but doesnt want it at the same time...hmmm.
Very nice, good work
Gosh.I'm late!! You're a genius but i'm late still...wahehe!
very kwel!
Great script. Works great in IE, but not at all in FF2. Was anyone able to get it to work?
Hi,
This seems to be not working under jQ1.1.2, I copied your demo site except I am using 1.1.2 ( jquery-latest.pack.js ).
And the menu is not working :(
Or did I do something wrong?
Thanks!!
I'm trying to slide your menu over itself so that I can set up five or six menus in the exact same position and slide menus in over top of themselves. Any thoughts on how to pull this off? Oh and by the by ... this thing rocks ... nice work.
v.
oh and I need a way to separate out the rb_toggle div from the menu so that I can put it somewhere else ... is there an easy way to do that? Thanks again...
v.
hello, first of all, good work!
is t here any way i can make the menu doesnt slide all the way off the screen? i'd like to leave a little bit of the menu as a hint rather than a separate "menu" text .. thanks.
I love it! Great job!
Very slick stuff. Is there a way to have the menu be OFF by default? So when someone browses to the page the menu is hidden and they have to click to reveal it?
Great job in my opinion.
Anyone has the answer to the previous question (JQ said...)?
Thanks!
I am trying to stop the sliding menu from going back to the original element. Please help
Running Safari 3.0.3 beta on intel MacBook Pro, and nope. It doesn't work.
!
Hi Nice job. I am going to use this for a FAQ list so I am attaching the effect at a class level across many objects. In order to do this I needed to attached the "closed" state to the menu variable instead of the self variable. So change all:
self.closed
to:
menu.closed
Other than that it works great. Thanks
I've tried to use your sliding menu, but doesn't work. The sliding effect doesn't work). What have I done wrong?
Nice work,
I've used a horizontal accordian toggle with scriptaculous and prototype but this is much more like I wanted to get going. You haven't duplicated this in scriptaculous have you? I use jquery for some projects but the one I am using it for is too deep into the s & p for a change right now.
nice job
the menu slide on the left is there any way to change this ? ex slide to the top
Great work...
wait a smooth sliding
thanks alot mate, nice job
@JQ
regarding turning the menu off & on, you can use a simple visibility toggle javascript
e.g.
function Turn(state) {
var TheMenu= document.getElementById(menu1);
if(state = "on") {
TheMenu.style.display = "";
}
if(state = "off") {
TheMenu.style.display = "none";
}
}
and a link:
Turn the menu On/Off
and to make the default state of the menu off(invisible), you can add the following code to CSS stylesheet:
.menu {
display:none;
The menu is amazing! but I have one question. why the jquery.js is semi encrypted?
ive copied your source code... ive got jquery.js, i've tried both fx blind and slide... the menu still isn't working for me. I am just learning this stuff so this might be an ignorant question... but is there anything i need to manipulate besides just copy and pasting the .js? The paths are correct etc... I've tried diff browsers... anyone can help?
FIXED!
I used wget to grab the interface.js and jquery.js from your site and it worked so it looks like you script is no longer compatible with the latest version (?)
Cheers
Russell
what i'm doing wrong???
i have all the necessary files in my mac, but went i try to see the demo, it is not working, what else do i need???
rb_menu.js
interface.js
jquery.js
rb_menu.css
it works!!!
just a name problem
by the way GREAT MENU!!!!!!!!!!!!!!!!!!
looks and works great, there's one thing though, i can't get a simple lightbox to work properly, the next and previous and close images don't work. with this script. i tried a bunch of things but could only get one to work and not both at the same time.
Hi,
Nice script but one small thing to ask;
For default behavior if the menu is to slide from right to left instead of left to right what & were are the changes i have to make...
please let me know
good work. have you seen the new mootools scripts? - it was just updated to a new version. Might be useful.
forgot to put the link to mootools http://mootools.net/
What a wonderful coding. I'll bookmarks this page. Thank.
doesnt look like this works with latest release of jquery?