inicio mail me! sindicaci;ón

My First jQuery Plugin, a Sliding Menu

September 26, 2006 at 5:46 pm · Filed under jQuery, Tutorials, Javascript

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

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)

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: false, autoHide: false

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.

source: rb_menu.js

jase said,

September 27, 2006 @ 11:20 am

rock on!

Rob said,

September 27, 2006 @ 3:04 pm

Very nice, good work!

Simon said,

October 4, 2006 @ 4:41 am

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

Dominique said,

October 9, 2006 @ 10:16 am

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

Regards, Dom

ramin said,

October 12, 2006 @ 8:44 pm

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

ZNB said,

October 17, 2006 @ 1:03 pm

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?

ramin said,

October 17, 2006 @ 2:55 pm

@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 said,

October 24, 2006 @ 1:41 pm

You're a genius! Thanks!!!

Oric said,

October 28, 2006 @ 5:49 am

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

Vinay said,

October 30, 2006 @ 7:48 am

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

jshacker said,

November 15, 2006 @ 10:56 pm

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.

ramin said,

November 15, 2006 @ 11:25 pm

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

Chad said,

December 12, 2006 @ 5:01 pm

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.

ramin said,

December 12, 2006 @ 5:13 pm

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

Willem said,

December 18, 2006 @ 10:02 am

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

Jan said,

December 22, 2006 @ 8:13 am

it flickers on Firefox 1.5 on Mac Os X

Gergely said,

January 5, 2007 @ 1:02 pm

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

Sssnobben said,

January 5, 2007 @ 3:38 pm

Sorry no slinding effect too in FIrefox 2.0.0.1

/

chy said,

January 6, 2007 @ 10:20 pm

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

Richard said,

January 8, 2007 @ 8:27 pm

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.

Paulo Pires said,

April 12, 2007 @ 3:18 pm

Very nice, good work

Leo Hiraban said,

May 10, 2007 @ 5:55 am

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

sidnei dasilva said,

May 16, 2007 @ 11:58 pm

very kwel!

Pasquale Scerbo said,

May 17, 2007 @ 1:45 pm

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

JC John SESE Cuneta said,

May 18, 2007 @ 3:45 am

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

Von Franklin said,

May 18, 2007 @ 9:34 am

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.

Von Franklin said,

May 18, 2007 @ 10:03 am

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.

Iqbal said,

May 31, 2007 @ 8:09 am

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.

sidnei dasilva said,

July 15, 2007 @ 10:56 pm

I love it! Great job!

JQ said,

July 19, 2007 @ 5:25 pm

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?

pedroflash said,

July 26, 2007 @ 12:32 pm

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

Thanks!

Angel said,

August 7, 2007 @ 6:17 pm

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

Antoine Valot said,

August 15, 2007 @ 5:54 pm

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

!

Kepler Gelotte said,

August 18, 2007 @ 3:44 pm

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

Cool said,

August 30, 2007 @ 11:33 pm

Cool Cool Caugh !!

Cheapestphentermine said,

August 31, 2007 @ 1:52 pm

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

styclidly said,

September 3, 2007 @ 4:50 am

Toronto, Canada's quirky popsters Barenaked Ladies were never ones to follow a trend. They were more interested in making someone laugh than being astute and serious.barenaked lady ticketMost of all, a friendship consumed this band and that bond cemented their place in alternative rock. Teenage friends Ed Robertson and Steven Page found themselves laughing at the innocent and child-like term "barenaked lady" while attending a Bob Dylan concert in 1988.

Daniel Murphy said,

October 10, 2007 @ 3:18 pm

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.

nits said,

November 8, 2007 @ 8:49 am

nice job

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

saddam hussein said,

November 10, 2007 @ 11:36 am

all of you are terrorists

saddam hussein said,

November 10, 2007 @ 11:37 am

all of you are terrorist

Derasa said,

November 21, 2007 @ 5:58 am

I liked your site! I wish you the further successes!!!

240 plugins jquery : sastgroup.com said,

November 21, 2007 @ 11:11 am

[...] Plugin for jQuery. jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. [...]

Propiedad Privada » Blog Archive » 240 Plugins para jQuery said,

December 5, 2007 @ 8:41 am

[...] Menu Plugin for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS [...]

chinatian › jQuery插件超级多 said,

December 5, 2007 @ 9:22 pm

[...] Plugin for jQuery. jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. [...]

Excelente listado de 240 plugins para jquery | Adictos a la red said,

December 6, 2007 @ 10:38 am

[...] Menu Plugin for jQuery.jQuery SuckerFish Style.jQuery Plugin Treeview.treeView Basic.FastFind Menu.Sliding Menu.Lava Lamp jQuery Menu.jQuery iconDock.jVariations Control Panel.ContextMenu plugin.clickMenu.CSS [...]

Featttotfoors said,

December 16, 2007 @ 8:31 am

If you are losing your hair, you know that the process doesn't simply affect the way
you look; it can also affect the way you feel about yourself.

Hair Loss Product

sudhir rawat said,

December 17, 2007 @ 11:30 am

Great work...

wait a smooth sliding

Enjoy what you have! » Blog Archive » 强烈推荐：240多个jQuery插件 said,

December 26, 2007 @ 10:34 pm

[...] Plugin for jQuery. jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. [...]

Diversos Links para desenvoledores de javascript | Blog do teo said,

January 1, 2008 @ 7:43 am

[...] Sliding Menu. [...]

debates on ritalin said,

January 1, 2008 @ 8:30 pm

debates on ritalin...

news...

Jquery的N个插件 » NeiLyi.cn [尼尔.易] - PHP,Jquery,代码,点滴 said,

January 2, 2008 @ 4:27 am

[...] Menu Plugin for jQuery.jQuery SuckerFish Style.jQuery Plugin Treeview.treeView Basic.FastFind Menu.Sliding Menu.Lava Lamp jQuery Menu.jQuery iconDock.jVariations Control Panel.ContextMenu plugin.clickMenu.CSS [...]

Webmaster 38 » Blog Archive » jQuery plugin: Sliding Menu at ajax scripts compound said,

January 3, 2008 @ 10:16 pm

[...] jQuery plugin: Sliding Menu [...]

风筝博客 said,

January 27, 2008 @ 12:00 am

[...] Plugin for jQuery. jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. [...]

ehsan said,

January 30, 2008 @ 11:28 am

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;

raymond said,

February 9, 2008 @ 4:46 am

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

hairlynn said,

February 21, 2008 @ 7:35 am

I wish to change my hair style with the latest trends in
Fashion. Can anyone suggest a website where I can find the latest fashion in hair style.

hairlynninfo said,

February 21, 2008 @ 7:54 am

Everyone wants to catch up with the changing and match to the latest fashion.
Click here to get tuned to trendy hair styles .

lose 10 pounds quickly said,

February 26, 2008 @ 4:37 pm

It looks good, you've done a great work on this!

carrie said,

March 8, 2008 @ 7:04 pm

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?

Russell said,

March 12, 2008 @ 10:30 am

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

apokaliptischen said,

March 18, 2008 @ 12:49 pm

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

apokaliptischen said,

March 18, 2008 @ 12:57 pm

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

百变贝贝 » 上百个让你事半功倍的jquery插件 said,

March 19, 2008 @ 9:27 pm

[...] Menu Plugin for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS [...]

The ultimate jQuery Plugin List | Kollermedia.at said,

April 3, 2008 @ 12:40 am

[...] Menu Plugin for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS [...]

240 adet jquery ekelntisi - Volkan Şentürk said,

April 9, 2008 @ 6:04 am

[...] Plugin for jQuery. jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. [...]

[WPtheme Tutorials]Sliding Menu | CJ’s WP said,

April 19, 2008 @ 10:15 am

[...] 04月 19, 2008 22:13 - 0 Comments [WPtheme Tutorials]Sliding Menu Tags: WPtheme Tutorials 来自Ramin的jQuery plugin，很简单的方法就实现了Sliding [...]

pab said,

April 22, 2008 @ 3:24 am

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.

jQueryサンプル集 - DesignWalker said,

April 23, 2008 @ 4:46 am

[...] Sliding Menu [...]

jQuery插件集合.(240) | Sapling soliloquize said,

April 28, 2008 @ 12:05 pm

[...] Plugin for jQuery. jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. [...]

强烈推荐：240多个jQuery插件 - 胡言乱语 said,

May 3, 2008 @ 12:42 am

[...] Plugin for jQuery. jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. [...]

RSS feed for comments on this post · TrackBack URI

Leave a Comment