horizontal menu, reveals more of the image as you rollover it -- written in prototype and script.aculo.us
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_common
imagemenu
README.textile

README.textile

image menu

horizontal menu, reveals more of the image as you rollover it — written in prototype and script.aculo.us
originally written by Sam Birch for mootools: http://www.phatfusion.net/imagemenu/

Features

  • 2 optional onClick events – open & close
  • href passed to onClick events
  • stays open when clicked
  • closes when clicked
  • select item to pre-open

Requirements

  • Prototype 1.6.1 (that is, bleeding edge RC) — 1.6.0 (stable) doesn’t have support for mouseenter and mouseleave events, so it won’t work!
  • script.aculo.us 1.8.2

Compatibility

TODO

Usage

HTML/JS


<script type="text/javascript" src="../_common/js/prototype.js"></script>
<script type="text/javascript" src="../_common/js/scriptaculous.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>
...
<div id="imageMenu">
	<ul>
		<li class="landscapes"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
		<li class="people"><a href="http://www.aaronbirchphotography.com">People</a></li>
		<li class="nature"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
		<li class="urban"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
		<li class="abstract"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
	</ul>
</div>
		
<script type="text/javascript">
	document.observe('dom:loaded', function() {
		var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
	});
</script>

Options

image menu takes a number of options that you can use to modify its behavior:

Option Default Description
onOpen a function to execute when an item is clicked open. If there is an href within the li then that is passed to the function..
onClose same as above but when clicked closed.
openWidth 200 width in px of the items when rolled over.
transition Effect.Transitions.linear
duration 400 the length of the transition, in milloseconds.
open null the id or index of the item to open on start.
border 0 a px value to tweak the widths when an item is open.

Examples

See http://www.raz.or.at/imagemenu/

Authors

Ported to protoype and script.aculo.us by Bernhard Reiterraz.or.at

Contributions by Tim Fluehr

Original mootools based version by Samuel Birchphatfusion image menu

Credits

Thanks to users ilyak and gf3 on #prototype for helping me porting!