Amazing Image Based Menu Using MooTools

September 26th, 2007 Posted by Don Albrecht

phatfusion has developed an awesome image based menu using mootools. Similar to the menu located at http://www.mootools.com; this Image Menu delivers a beautiful user experience.

Some Key Features

Mootools Image Menu By PhatFusion

onClick event keeps selected item open.
Click open item to close.
Specify a function for the onClick event.
Auto open when the page loads

See it in action at: http://www.phatfusion.net/imagemenu/index.htm

Filed under Uncategorized

16 Comments

tommy
December 6th, 2007 at 12:20 am

can i put a link inside the menu?
so each pic will linked to a page
Don Albrecht
December 6th, 2007 at 9:36 am

Sure,

Use the following as the onClick function:

function move() {
window.location = ‘http://www.yourdomain.com’
}

or, put an .. around the internal span.
Don Albrecht
December 10th, 2007 at 11:49 pm

Tommy, your comment got munged by the database somehow, but I did get it via email.

For the benefit of others, I’ve included it below:

thanks Don…
it works now

i have another question:
can it select a pic menu, ie. the second
when i load a page?

Yes, you can have it select a specific li on load. That is handled via the start parameter, simply pass it the index you would like it to load. (1 in your example).

tommy
December 11th, 2007 at 5:33 am

so, it will be:
http://myurl/?start=1 to load the second li?
i have try that but still no effect

sorry, i still can not make it
*newbie*

Don Albrecht
December 11th, 2007 at 9:35 am

No, you specify it in the constructor for the menu (JS). Add start:1, to the array of options.

Like this:
var myMenu = new ImageMenu($$(‘#kwick .kwick’),{openWidth:200, onClick:demo, start:1});

tommy
December 11th, 2007 at 7:01 pm

thanks Don,
now i can do a lot of things using imageMenu

Flo
December 24th, 2007 at 9:47 am

Hey Don,

the tag around the span in the list doesn’t work…
or i got it wrong

Nature

happy holidays by the way

Flo
December 24th, 2007 at 9:50 am

Hey Don,

the tag around the span in the list doesn’t work…
or i got it wrong

Nature

Maxal
January 21st, 2008 at 11:48 am

Desipte several attemptes, I remain unable to get it work for me. I would highly appreciate if you give a working demo link for newbies like me. I will be forever thankful to you

Tommy
January 21st, 2008 at 12:07 pm

my project: http://www.kiosmama.com/2008/

please tell me if there is an easiest way to do

TIA

Flo
January 22nd, 2008 at 3:41 am

Look at the source!!! everything you need is in the source….

Maxal
January 22nd, 2008 at 9:47 am

Thing that works:

People

Maxal
January 22nd, 2008 at 9:48 am

Thing that works:
[code]
People[/code]

Flo
January 24th, 2008 at 12:20 pm