Skip links
Main content

ProtoFish: advanced hover menu based on Prototype

Wednesday 17 June 2009 16:42

ProtoFish is an advanced hover menu based on Prototype. You can easily add a delay to your menu (on mouseout) and choose your own hover class. All ProtoFish menu's are keyboard accessible conform ARIA best practices. On top of that: it's fully customizable and free to use!

By Peter Slagter

Quickstart

You've come here to implement ProtoFish into your website. Due to ProtoFish' popularity, we've decided to give ProtoFish it's own home at http://protofish.procurios.nl/. All implementation details can be found there!

Why ProtoFish?

Most people know the parent of all hover menu's: the SuckerFish dropdown menu published by A List Apart in 2003. Obviously, the name ProtoFish is a combination of the Prototype JS framework and the SuckerFish technique published by A List Apart. There are many enhanced versions of the SuckerFish dropdown around on the web, but none of them met the following, to me important, criteria:

  1. The script should be based on Prototype,
  2. The script should be lightweight and
  3. The script should be easy to implement.

Finding a good menu-script based on criteria #1 is already hard enough, so I decided to write my own class and share it with the world!

Can I customize ProtoFish?

Sure! You're allowed to use ProtoFish without any constraints. Rip the code apart or add some features - use it the way you like! If you download the non-minified ProtoFish version, you can easily get a grip on the code, by reading the comments!

You can also contribute to ProtoFish on github: http://github.com/pesla/ProtoFish/.

Feedback

If you've found a bug, want to improve ProtoFish or just want to give some feedback, feel free to contact me on Twitter (@pesla) or leave a comment below this post.

« Back

Reactions on "ProtoFish: advanced hover menu based on Prototype"

Joshua
Placed on: 06-17-2009 17:55
Smooth, tight script. Immediately going into my new project! Great work!
LudoA
Placed on: 06-18-2009 07:03
Sounds nice, I wonder whether this solutions display the menus in front of embedded content (e.g. Flash and, more difficultly, PDF)? This often seems to be a problem for hover menus.

For Flash - because it's so often used - in the end some solutions have been found, but for PDF I'm still searching for a working hover menu solution.
Peter
Placed on: 06-18-2009 08:43
Peter Slagter
User icon
Quote
LudoA wrote:
Sounds nice, I wonder whether this solutions display the menus in front of embedded content (e.g. Flash and, more difficultly, PDF)? This often seems to be a problem for hover menus.

For Flash - because it's so often used - in the end some solutions have been found, but for PDF I'm still searching for a working hover menu solution.

You can control the stacking order of the menu and flash objects by setting the right parameters on your flash object and z-index in your CSS files.
I haven't tested the combination of the menu with an embedded PDF on the page, nor if it's possible to overcome the trouble it would be causing. Follow my tweets or this page for updates Wink!
Chris
Placed on: 06-22-2009 20:34
This looks great. The only hang-up I have with it is the keyboard navigation. Although using the tab key to go through all the menus technically allows someone to get to all the menus, it would be more useful if I could use the arrow keys to navigate as well. That way I could bypass some of the menus and go directly to what I'm interested in.
B. Moore
Placed on: 06-23-2009 06:06
Love your menu system!
I am not good with JS so I have never tried Prototype.
So I guess this maybe a good time to start.

My question is how easily would it be to have the flyouts (whatever you want to call them) of the menu stay in the view port of the browser instead of going below the view port which would make the user have to scroll the page?
Peter
Placed on: 06-23-2009 09:06
Peter Slagter
User icon
Quoted message
Chris wrote:
This looks great. The only hang-up I have with it is the keyboard navigation. Although using the tab key to go through all the menus technically allows someone to get to all the menus, it would be more useful if I could use the arrow keys to navigate as well. That way I could bypass some of the menus and go directly to what I'm interested in.

Thanks Chris, this goes into the add-to-protofish-inbox. Definetely worthy of adding it to ProtoFish!

Quoted message
B. Moore wrote:
Love your menu system!
I am not good with JS so I have never tried Prototype.
So I guess this maybe a good time to start.

My question is how easily would it be to have the flyouts (whatever you want to call them) of the menu stay in the view port of the browser instead of going below the view port which would make the user have to scroll the page?

Hi B. Moore. What you are asking could be worked out into ProtoFish, but I think this is an edge case: in most user interfaces, menu's are placed on top and never reach the bottom of the viewport. But I'll put this on the 'maybe sometime' list. Thanks!
Edited
Peter has edited this message on: 06-23-2009 09:08
Chris
Placed on: 06-23-2009 13:48
Nice work! I'm having an issue shift-tabbing in Chrome 2, though :/
Peter
Placed on: 06-23-2009 14:12
Peter Slagter
User icon
Quote
Chris wrote:
Nice work! I'm having an issue shift-tabbing in Chrome 2, though :/

Hi Chris, yes this is a known issue. This will be resolved in one of the upcoming updates. Thanks for the notice!
Jason
Placed on: 06-24-2009 02:55
I am having trouble integrating the menu on my site. After I hover on a menu item, the drop down menu stays visible. So, I was troubleshoot and noticed that your prototype library is different than the library you get when downloading from prototypejs.org. The file headers both indicate 1.6.0.3, but at line 3936, the files differ. Did you modify prototype.js?
Marcel
Placed on: 06-24-2009 10:54
You should add a license, this will ensure people if and how they can reuse you're code
Peter
Placed on: 06-24-2009 13:16
Peter Slagter
User icon
Quote
Jason wrote:
I am having trouble integrating the menu on my site. After I hover on a menu item, the drop down menu stays visible. So, I was troubleshoot and noticed that your prototype library is different than the library you get when downloading from prototypejs.org. The file headers both indicate 1.6.0.3, but at line 3936, the files differ. Did you modify prototype.js?

The Prototype file used in the demo might be slightly different than the original Prototype file which you can download on prototypejs.org. The differences between the files won't affect ProtoFish though. ProtoFish hes been tested with the original prototype.js as well.

Quote
Marcel wrote:
You should add a license, this will ensure people if and how they can reuse you're code

I'll add the MIT license to ProtoFish. Thanks!
Jason
Placed on: 06-25-2009 07:15
Here is what I am testing. So, if my testing is flawed, please let me know.

I saved your demo page locally and browsed to the file, it works. So, I replaced the src of prototype js from

'http://techblog.procurios.nl/l/nl/library/download/34542'

to the prototype 1.6.0.3 js file hosted by google

'http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'

Now, using the version from google, it doesn't work. The dropdown menus stay visible after mouse out.

I tried 1.6.0.2, still same bad behavior. Finally, I tried 1.6.0.1 and it worked!

I think something changed between prototype 1.6.0.1 and 1.6.0.2 that broke ProtoFish.
Peter
Placed on: 06-25-2009 09:10
Peter Slagter
User icon
Quoted message
Jason wrote:
Here is what I am testing. So, if my testing is flawed, please let me know.

I saved your demo page locally and browsed to the file, it works. So, I replaced the src of prototype js from

'http://techblog.procurios.nl/l/nl/library/download/34542'

to the prototype 1.6.0.3 js file hosted by google

'http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'

Now, using the version from google, it doesn't work. The dropdown menus stay visible after mouse out.

I tried 1.6.0.2, still same bad behavior. Finally, I tried 1.6.0.1 and it worked!

I think something changed between prototype 1.6.0.1 and 1.6.0.2 that broke ProtoFish.

Thanks Jason, apparantly I forgot to take out the mouseleave event which isn't supported by the latest stable version of Prototype. This is now fixed, all ProtoFish files are updated to the right version. I'm sorry for the inconvenience!
Edited
Peter has edited this message on: 06-25-2009 09:10
Jason
Placed on: 06-26-2009 06:05
I am glad that you were able to fix this. It passes all my tests in Safari and Firefox now, but I will have to wait until tomorrow to test it in the dreaded IE6.

Thank you for making this available to all of us.
HK
Placed on: 07-01-2009 13:14
Peter,

I am trying to use Protofish in a way that when the user click on a menu, something is updated on the page.

I put an onclick="modifyPage();" on the <a> tag inside the <li>.

While this seems to work well, the Protofish menu doesn't close upon receiving the click. Can I force it to close somehow?

Thanks,
HK
Jason
Placed on: 07-01-2009 22:48
When the menu drops down, it does not cover labels and input element in ie6, ie7. This seems to be a know problem with drop down style menus in ie. Put the menu above html like

<label for="tn">Label:</label>
<select id="tn" name="tn">
<option value="0">All</option>
<option value="1">Some</option>
</select>

and in ie6 both the label and select elements show through the menu. In ie7, only the label shows through. FF and webkit based browsers do not exhibit this problem.

Anybody have a fix for this? It would be great if the demo illustrated the fix as well.
Peter
Placed on: 07-02-2009 12:25
Peter Slagter
User icon
Quote
HK wrote:
... While this seems to work well, the Protofish menu doesn't close upon receiving the click. Can I force it to close somehow? ...

In the next version of Protofish, this will be solved (it'll close if the user clicks outside the menu). Stay tuned, I hope I can release it soon!

Quote
Jason wrote:
When the menu drops down, it does not cover labels and input element in ie6, ie7. ... Anybody have a fix for this? It would be great if the demo illustrated the fix as well.

Hi Jason. In the next release, there will be an improved keyboard navigation (tab/shift-tab & arrow navigation), as well as other minor improvements (close menu with ESC, click outside the menu and a shortkey to the menu).

Your feature request is outside the scope of the next version, but I will note it down and include it later on.

All updates will be published here as well as on Twitter. Thanks for the feedback!
ramkumar.s
Placed on: 07-03-2009 16:11
when i am use this i am getting error like this 'this.initialize' is null or not an object .. i am include prototype.js and prototype-1.6.0.0 and prototype-1.6.0.3.js also

what i am do

Log in to comment on news articles.