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:

Related posts:

  1. FireBug Extension and jQuery
  2. Ruby on Rails 0.13 and Script.aculo.us
  3. Recreating a Flash menu using javascript (scriptaculous)
Categories: Javascript, Tutorials, jQuery Tags:
  • This is excellent !! http://www.billboardfamily.com
  • http://www.gerador.org/
    Thanks
  • Malitar4re
    ge
  • Thanks for your sliding menu scripts.

    Regards
    http://www.4strippers.net
  • marvin
    i love the effects....nice.....hehe
  • Thanks for the great resource. Its quick loading with dynamic action of this menu i liked it. Now am a fan of your scripts.
    Thank you very much.
  • 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.
  • Stargazer
    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")
  • Stargazer
    **edit**

    ...this breaks *every* design standard that exists on earth...
  • Stargazer
    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..
  • 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 ! ^_^
  • Thanks, cool example.
  • ldd
    as a chinese,thank you all the same!
  • 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
  • Mendi
    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 !
  • bgd
    How could I put this script into Joomla?
  • 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
  • Computerengineer.net
    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 +++ .
  • Zubair
    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
  • barto
    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
  • barto
    Where I can find rb_menu.CSS ????? Please Help !
  • Great work!! thanks for sharing.
  • Alfonso
    Yes, it doesn't work with the latest jquey version, 1.3.1, any advance??

    Thanks
  • Graham
    doesnt look like this works with latest release of jquery?
  • What a wonderful coding. I'll bookmarks this page. Thank.
  • forgot to put the link to mootools http://mootools.net/
  • good work. have you seen the new mootools scripts? - it was just updated to a new version. Might be useful.
  • Nasar
    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
  • pab
    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.
  • apokaliptischen
    it works!!!
    just a name problem
    by the way GREAT MENU!!!!!!!!!!!!!!!!!!
  • apokaliptischen
    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
  • 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
  • carrie
    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?
  • raymond
    The menu is amazing! but I have one question. why the jquery.js is semi encrypted?
  • ehsan
    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;
  • sudhir rawat
    Great work...

    wait a smooth sliding
  • nits
    nice job

    the menu slide on the left is there any way to change this ? ex slide to the top
  • Daniel Murphy
    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.
  • I've tried to use your sliding menu, but doesn't work. The sliding effect doesn't work). What have I done wrong?
  • 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
  • Running Safari 3.0.3 beta on intel MacBook Pro, and nope. It doesn't work.

    !
  • I am trying to stop the sliding menu from going back to the original element. Please help
  • pedroflash
    Great job in my opinion.
    Anyone has the answer to the previous question (JQ said...)?

    Thanks!
  • JQ
    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?
  • I love it! Great job!
  • 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.
  • Von Franklin
    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.
  • Von Franklin
    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.
  • 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!!
  • Great script. Works great in IE, but not at all in FF2. Was anyone able to get it to work?
  • very kwel!
  • Leo Hiraban
    Gosh.I'm late!! You're a genius but i'm late still...wahehe!
  • Very nice, good work
  • Richard
    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.
  • chy
    nice plug-in. would you please post your rb_menu.css? thanks in advance.
  • Sssnobben
    Sorry no slinding effect too in FIrefox 2.0.0.1

    /
  • Gergely
    It flickers on Firefox 1.5 / Ubuntu breezy. Considering previous comment maybe on all FF1.5? :-(
  • Jan
    it flickers on Firefox 1.5 on Mac Os X
  • Hi,

    I've tried to use your sliding menu, but doesn't work. I hope you want to take a look at 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
  • @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.
  • 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.
  • @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.
  • jshacker
    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
    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....
  • 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
  • ZNB
    You're a genius! Thanks!!!
  • @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}
  • ZNB
    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?
  • @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 :)
  • Dominique
    It is working into table or it is a bug?
    Doesnt work for me in .

    Regards, Dom
  • Simon
    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
  • Rob
    Very nice, good work!
  • rock on!
blog comments powered by Disqus