darrenterhune / droplicious

A drop down menu system built on prototype and script.aculo.us

Requirements

Prototype prototype.js
Script.aculo.us effects.js
Graphika studios droplicious.js
A bit of html/css/js knowhow

Install

You can download all the needed files right from here
git clone git://github.com/darrenterhune/droplicious.git

Tested

Mozilla Firefox 3.0+
Google Chrome 4.0+
Safari 3.2+
IE 6+

Bugs

Submit issues on the project github issue page

Contributors

Jan Sovak
Mason Meyer

Copyright

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
* The author’s name shall be included in all copies or substaintial portions of the Software.

droplicious's Issues

problems when the cursor leaves drops while submenu showup

hi i found problems when the cursor leaves a drop button while submenu showup : submenu stays for the hiding effect time (instead od disapearing smoothly) and then disappear suddenly (even when the cursor returns during this time)

i tried to cancel the queued effect when mouse leaves a drop but i found some other scriptaculous (?) bugs (it seems to me it changed the submenu height) and then submenus act bad

maybe it would be possible not to queue effects and see if this bug still occure (so that effects would be cancelable)

Change mouseout/mouseover by mouseleave/mouseenter

If the element which raises the dropdown menu has inside an image or other element it raises the mouseout event and the dropdown menu hides

This can be easily fixed changing the events mouseout/mouseover to mouseleave/mouseenter in the droplicious.js

Before

$$("a.drops").invoke('observe', 'mousemove', this.linkMouseOver.bind(this));
$$("a.drops").invoke('observe', 'mouseout', this.linkMouseOut.bind(this));
		
$$("ul.licious").invoke('observe', 'mousemove', this.submenuMouseOver.bind(this));
$$("ul.licious").invoke('observe', 'mouseout', this.submenuMouseOut.bind(this));

After

$$("a.drops").invoke('observe', 'mouseenter', this.linkMouseOver.bind(this));
$$("a.drops").invoke('observe', 'mouseleave', this.linkMouseOut.bind(this));
		
$$("ul.licious").invoke('observe', 'mouseenter', this.submenuMouseOver.bind(this));
$$("ul.licious").invoke('observe', 'mouseleave', this.submenuMouseOut.bind(this));