Home > Javascript, Tutorials, jQuery > My First jQuery Plugin, a Sliding Menu

My First jQuery Plugin, a Sliding Menu

September 26th, 2006 ramin Leave a comment Go to comments

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 the triggerEvent is set to click or dblclick

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:

Categories: Javascript, Tutorials, jQuery Tags:
  1. September 27th, 2006 at 11:20 | #1

    rock on!

  2. September 27th, 2006 at 15:04 | #2

    Very nice, good work!

  3. Simon
    October 4th, 2006 at 04:41 | #3

    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

  4. Dominique
    October 9th, 2006 at 10:16 | #4

    It is working into table or it is a bug?
    Doesnt work for me in .

    Regards, Dom

  5. October 12th, 2006 at 20:44 | #5

    @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 :)

  6. October 17th, 2006 at 13:03 | #6

    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?

  7. October 17th, 2006 at 14:55 | #7

    @ZBN: I've updated the code to allow for 2 more arguments, namely hideOnLoad and autoHide. To get the functionality that you want, pass the following options into the menu: {triggerEvent: 'click', hideOnLoad: false, autoHide: false}

  8. October 24th, 2006 at 13:41 | #8

    You're a genius! Thanks!!!

  9. October 28th, 2006 at 05:49 | #9

    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

  10. Vinay
    October 30th, 2006 at 07:48 | #10

    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....

  11. jshacker
    November 15th, 2006 at 22:56 | #11

    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.

  12. November 15th, 2006 at 23:25 | #12

    @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.

  13. December 12th, 2006 at 17:01 | #13

    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.

  14. December 12th, 2006 at 17:13 | #14

    @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.

  15. December 18th, 2006 at 10:02 | #15

    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

  16. December 22nd, 2006 at 08:13 | #16

    it flickers on Firefox 1.5 on Mac Os X

  17. Gergely
    January 5th, 2007 at 13:02 | #17

    It flickers on Firefox 1.5 / Ubuntu breezy. Considering previous comment maybe on all FF1.5? :-(

  18. Sssnobben
    January 5th, 2007 at 15:38 | #18

    Sorry no slinding effect too in FIrefox 2.0.0.1

    /

  19. chy
    January 6th, 2007 at 22:20 | #19

    nice plug-in. would you please post your rb_menu.css? thanks in advance.

  20. Richard
    January 8th, 2007 at 20:27 | #20

    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.

  21. April 12th, 2007 at 15:18 | #21

    Very nice, good work

  22. Leo Hiraban
    May 10th, 2007 at 05:55 | #22

    Gosh.I'm late!! You're a genius but i'm late still...wahehe!

  23. May 16th, 2007 at 23:58 | #23

    very kwel!

  24. May 17th, 2007 at 13:45 | #24

    Great script. Works great in IE, but not at all in FF2. Was anyone able to get it to work?

  25. May 18th, 2007 at 03:45 | #25

    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!!

  26. Von Franklin
    May 18th, 2007 at 09:34 | #26

    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.

  27. Von Franklin
    May 18th, 2007 at 10:03 | #27

    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.

  28. May 31st, 2007 at 08:09 | #28

    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.

  29. July 15th, 2007 at 22:56 | #29

    I love it! Great job!

  30. JQ
    July 19th, 2007 at 17:25 | #30

    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?

  31. pedroflash
    July 26th, 2007 at 12:32 | #31

    Great job in my opinion.
    Anyone has the answer to the previous question (JQ said...)?

    Thanks!

  32. August 7th, 2007 at 18:17 | #32

    I am trying to stop the sliding menu from going back to the original element. Please help

  33. August 15th, 2007 at 17:54 | #33

    Running Safari 3.0.3 beta on intel MacBook Pro, and nope. It doesn't work.

    !

  34. August 18th, 2007 at 15:44 | #34

    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

  35. August 31st, 2007 at 13:52 | #35

    I've tried to use your sliding menu, but doesn't work. The sliding effect doesn't work). What have I done wrong?

  36. Daniel Murphy
    October 10th, 2007 at 15:18 | #36

    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.

  37. nits
    November 8th, 2007 at 08:49 | #37

    nice job

    the menu slide on the left is there any way to change this ? ex slide to the top

  38. sudhir rawat
    December 17th, 2007 at 11:30 | #38

    Great work...

    wait a smooth sliding

  39. ehsan
    January 30th, 2008 at 11:28 | #39

    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;

  40. raymond
    February 9th, 2008 at 04:46 | #40

    The menu is amazing! but I have one question. why the jquery.js is semi encrypted?

  41. carrie
    March 8th, 2008 at 19:04 | #41

    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?

  42. March 12th, 2008 at 10:30 | #42

    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

  43. apokaliptischen
    March 18th, 2008 at 12:49 | #43

    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

  44. apokaliptischen
    March 18th, 2008 at 12:57 | #44

    it works!!!
    just a name problem
    by the way GREAT MENU!!!!!!!!!!!!!!!!!!

  45. pab
    April 22nd, 2008 at 03:24 | #45

    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.

  46. Nasar
    May 28th, 2008 at 02:45 | #46

    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

  47. June 13th, 2008 at 14:05 | #47

    good work. have you seen the new mootools scripts? - it was just updated to a new version. Might be useful.

  48. June 13th, 2008 at 14:10 | #48

    forgot to put the link to mootools http://mootools.net/

  49. August 26th, 2008 at 12:50 | #49

    What a wonderful coding. I'll bookmarks this page. Thank.

  50. Graham
    January 17th, 2009 at 09:58 | #50

    doesnt look like this works with latest release of jquery?

Comment pages
1 2 112
  1. January 1st, 2008 at 07:43 | #1
  2. January 3rd, 2008 at 22:16 | #2
  3. January 27th, 2008 at 00:00 | #3
  4. April 23rd, 2008 at 04:46 | #4
  5. September 14th, 2008 at 12:08 | #5
  6. January 16th, 2009 at 15:51 | #6
  7. February 4th, 2009 at 05:12 | #7
  8. February 16th, 2009 at 19:55 | #8
  9. March 4th, 2009 at 21:33 | #9
  10. March 24th, 2009 at 00:55 | #10
  11. June 13th, 2009 at 09:32 | #11
  12. June 16th, 2009 at 13:00 | #12