phatfusion

imageMenu

version 2.3

horizontal menu, reveals more of the image as you rollover it.

features

basic example

advanced example

 

usage

add these javascript files to your page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script> <script type="text/javascript" src="/js/fx.elements.js"></script> <script type="text/javascript" src="/js/imageMenu.js"></script>

create your menu html like this

<div id="imageMenuBasic" class="imageMenu"> <ul> <li class="landscapes"><a href="#">Landscapes</a></li> <li class="people"><a href="h#">People</a></li> <li class="nature"><a href="#">Nature</a></li> <li class="urban"><a href="#">Urban</a></li> <li class="abstract"><a href="#">Abstract</a></li> </ul> </div>

style it something like this

.imageMenu { position: relative; width: 500px; height: 200px; overflow: hidden; } .imageMenu ul { list-style: none; margin: 0px; display: block; height: 200px; width: 1000px; } .imageMenu ul li { float: left; } .imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff; cursor:pointer; display:block; overflow:hidden; width:98px; height: 200px; } .imageMenu ul li.landscapes a { background: url(/images/imageMenu/landscapes.jpg) repeat scroll 0%; }

initialize the script like this

window.addEvent('domready', function(){ new ImageMenu($$('#imageMenu a'), { openWidth:310, border:2 }); });

requirements:

API

syntax:

new ImageMenu(elements [, options]);

arguments:

  1. elements - (array)
  2. options - (object, optional)

options:

openWidth
width in px of the items when rolled over. default: 200
transition
default: Fx.Transitions.Quad.easeOut
duration
the length of the transition. default: 400
open
the id or index of the item to open on start. default: null
border
a px value to tweak the widths when an item is open. default: 0

events:

OnOpen
a function to execute when an item opens (mouseover). If there is an href within the li then that is passed to the function.
OnClose
same as above but when closed. (mouseout)
OnClickOpen
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.
OnClickClose
same as above but when clicked closed.

returns: