I’ve made a cool drop down menu system using Prototype and Scriptaculous javascript libraries that utilizes some of the cool effects to create an animated menu system.
Anyway here is droplicious v.2.1 I won’t be putting up new versions here anymore. It will now be at github (see link below… right below)
Droplicious at github: http://github.com/darrenterhune/droplicious
Please comment any bugs or other questions on this post, or submit issues at github Thanks!
Any way to make this on mouseover? And close the others?
@Mark Ya you can do this: name.observe(‘mouseover’, toggleElement.bindAsEventListener(this)); but make sure you make the duration in the effect quicker like this: new Effect.toggle(element, ‘blind’, { duration: 0.05 }); It works ok but the last opened drop stays open unless you mouse over it again. You could write a timed event to close it though. I plan on doing this in the future. Also keep in mind you can use different effects than just the “blind”. Check out: script.aculo.us
Works well on firefox, but not on my copy of IE8: when hovering the sub menu items, most of them disappear while first sub item stay visible
@Conrad I’ve updated the files so the a tags don’t disappear when hovering. You can just add position:relative; to the a tags in the drop down menu.
Hi guys,
I liked this one, but I really needed that :mouseover: one.
So I took some time (it was harder than I thought).
And reedited droplicious.js and now it works perfectly for mouse over, just replace your old .js file.
And again, you can use all the other scriptaculous effects.
Mark, if you think it works fine you can added to your package as another option.
Hope it helps
http://www.canada-jack.com/data/droplicious.js
@Jan Sweet! Works perfect as long as you keep the speed low. Your right it was hard, and that’s why I never wrote it. I’ve updated your patch and added you in as a contributor. I might add it to my github tomorrow. Thanks!
Your dropdown menu script isn’t fool proof… if you move over the menu’s to fast your background disappears. Tested it in safari and firefox
@Ben Ya that is something I’ve noticed, but I am pretty busy at the moment to fix it. Hopefully it’ll happen in the near future.
You can fix the background from disappearing by adding a queue to the to the BlindDown and BlindUp effects. So, it would look something like this:
new Effect.BlindDown( $(dEl), {duration: dropliciousShowingUpDuration , queue: { position: ‘end’, scope: ‘menuscope’, limit: 1 } } );
Good work. I like the menu.
You can also stop it from sticking by adding an if statement to the dropliciousShowingUpEffect function:
if(!Element.visible(dEl))
@Mason you can submit a patch for this if ya like, otherwise I’ll have a look when I get some work off my plate. I’ve added it to my github: http://github.com/darrenterhune/droplicious, just fork and send pull request my way.
I’ve made a some refactoring to your code
http://www.pastebin.org/75360
removed rudimentary code (like a = b, c = b, d = c using d instead of a), some syntax refine and some additional checks. I’ve now working of same kind of code, but with multilevel submenus, your “timeouts overloading” idea made much help for me.
I’ve pushed up some changes mentioned by @t3hk0d3 to my github repos.
I’ve made more refactorings
http://www.pastebin.org/76033
For now i’ve make it OOP :)
Pay attention what i’ve not tested this one, so this one **maybe** buggy. At first glance it’s working under FF 3.5, i’ve not tested in another browser. Code really not changed, so likely it will work in other browsers like original one.
@t3hk0d3 I’ve glanced over it. Looks nice… gotta love oop. Have not tried this in any browsers yet. When I get some extra time (maybe on the weekend) I’ll dive into.