Ga direct naar
Main content

ProtoFish: advanced hover menu based on Prototype

by Peter Slagter, http://pesla.nl/

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!

RT: @pesla ProtoFish, a free advanced hovermenu based on Prototype, is updated with ARIA best practices!

Quickstart

You've come here to download and integrate ProtoFish. Let's achieve that goal first - you can always read more about ProtoFish when you're finished implementing!

Features

  1. Lightweight: 5.2kB.
  2. Unobtrusive: fallback to a standard CSS hover menu.
  3. Cross-browser: IE6+, Safari 3+, Opera 9+, Chrome, Firefox 2+.
  4. Fully customizable.
  5. Accessible for keyboard navigating users (ARIA support can be turned on).
  6. Multiple instances per page are possible.
  7. Unlimited sublevels.
  8. Fast!
  9. License: MIT.

Specifications

  1. Requires Prototype 1.6.
  2. Last modification on 13/07/2009.

Implement it!

  1. Download the latest version of ProtoFish and include it in your page.

    < script type="text/javascript" src="js/prototype.js">< /script>
    < script type="text/javascript" src="js/protofish.js">< /script>

  2. Initialize your ProtoFish menu with the following code:

    < script type='text/javascript'>
       document.observe('dom:loaded', function(){
          new ProtoFish('menu-1', '200', 'hover', false, true, true);
       });
    < /script>

    The ProtoFish Class takes six parameters:

    • Menu ID (string)
    • Delay (string)
    • Hovering classname (string)
    • Removal of .active classnames on hovering (boolean)
    • Whether or not the menu should enable ARIA roles and states (boolean)
    • Whether or not the menu should use a shortkey (ctrl+alt+m) to access the menu (boolean)

  3. Edit your CSS to support show & hide behavior based on the hover class you defined.

That's it, you're ready to go! If you need help, feel free to contact me on Twitter (@pesla) or leave a comment below this post.

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