Phatfusion has showed us another way to build our menu, he has created a image menu with the aid of Mootools framework. It looks really good and easy to use. It is very similar to the menu design of Mootools Official Website. It has the following features.
- It allows onClick event keeps selected item open.
- Click open item to close.
- Specify a function for the onClick event.
- Auto open when the page loads.
Requirements: Mootools Framework
Demo: http://www.phatfusion.net/imagemenu/index.htm
License: MIT License
Related Web Resources
Our Sponsors
Bookmark and Share this Article
- Brushes (11)
- Buttons (21)
- Color Schemes (21)
- Fonts (39)
- Forms (95)
- Icons (84)
- Patterns (24)
- PS Tutorials (9)
- Stock Photos (19)
- Tables (23)
- Announcement (70)
- Best Collections (4)
- Code (44)
- eCommerce (19)
- Framework (156)
- Hosting (12)
- Information (161)
- Inspiration (27)
- Legal Documents (8)
- Reviews (8)
- Security (13)
- Social (19)
- Sound (12)
- Stats (32)
- Tools (190)
- Webmail (13)
- BSD License (51)
- CC License (111)
- GPL License (189)
- LGPL License (37)
- License Free (584)
- MIT License (274)
Search Site
Open Source Resources for You
What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.
© Copyright 2010 WebAppers
Sponsored by NetDNA Content Delivery Network
Recommended Books for Web Developers
[...] [via] Share This [...]
Very cool menu. I’ve had a look at the demo and will be trying out Moo Tools on my next project.
Is it possible to have this effect using the image menu but as the image slides across it loads a html page with it?
Do you have any insight on how to make so that when the images are clicked they open a new page? I would love to use this effect as a navigation menu but need it to load different pages when the images are clicked. Thanks if you can help
Very nice, but it works weird in Opera!
See it by yourself on
http://img209.imageshack.us/img209/97/operakwickmenumo0.jpg
I don’t want imagine what about Safari!!
Hello,
I’m looking for the same thing than Shelby. I think that the secret is in “imageMenu.js”.
Shelby: same problem here. This is a nice menu but bad documented. For people that are not coders but would like to use it and promote it they did not turn our work easy.
Do not like this sort of people who make things for elites or that everyone must understand javascript to use their menu…
try changing the alert(e) to window.location=e
I found the bug!
line: 72
change
if(this.options.open){
to
if(this.options != null){
[...] Via webappers [...]
window.addEvent(’domready’, function(){
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:300, border:2, onOpen:function(e,i){window.location=e;}});
});
Try this and it will open the URL clicked instead of showing alert
To remove the Alert and make it use the link change the script in the html to:
window.addEvent(’domready’, function(){
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:310, border:2, onOpen:function(e,i){window.location=(e);}});
});
i just changed the ouput at the end of it…i have no idea why it was set to alert in the first place….
alert(e);}});
changed to:
window.location=(e);}});
I’ve been pulling my hair to make it load the URL instead of the st*pid Alert. Thank You very much. =)
You’re welcome.
problem with your code window.location=(e);}}); is when you click menu ,menu dont stay open for that page
Does anybody know what should be changed on the code (I followed what was explained above) in order to keep the menu open on the correct picture, corresponding with the page that was opened by clicking on the image?
Thought I already posted this. Is there some way to adjust which piece of an image shows when the menu is collapsed?
Thanks for the trick on getting the menu to open new HTML pages. It was a life-saver.
@Clayton:
Yes, there is. It’s the width of the link, defined in the imageMenu.css file (#imagemenu ul li.landscapes a { width: 80px;} i.e); simply change the value and the overall width of the ul obviously.
Thanks a ton people for the solution to open window instead of alert. the menu is neat. thanks
cheers
I made the changes that Jake submitted, but it is still not works for me…
If I click to the image, the alert window pop up…
heyy please help me im new to all the coding an things can some one paste a code of where i need to put the image names so i can just paste it into my joomla website?? thanks
Just a hint, when pasting the above code (to open another browser) into DreamWeaver the single quotes are a different ascii character set (slanted quotes or something) and the code won’t work! Make sure you change the [’] to ['].
FYI and thanks!
-BW
[...] webappers Publicado en Diseño, Javascript, Web 2.0, [...]
Hey “OneDesign|Blog” thanks a lot for the solution ¡¡
THanks for the solution,
thats was wery helpful!
Hi there!
Does anyone know how to change the code in order to use the open option without the sliding effect. The problem is, when open is set the slider opens the menu onload with the defined duration.
I want a duration of 0 when open is set.
So that there is no move when the site is loaded.
Sorry for the broken english – greetings from austria
Hi,
I uploaded my own pics but they dont show. I already adjusted imagemenu.css.Any idea what I miss out on?
My pics have a different height than the orig ones.
I seem to be having a similar problem to the above poster…
I’ve used the script before and am sure I had the same problem but the forum has been taken down since and with it the answer I received.
The image menu displays fine locally on both IE and Firefox. But when uploaded to a server on Firefox I can only see the list with no images displaying. On IE I see the borders and movement, but no images show. Would be very grateful of any help – this is driving me nuts!
[...] webappers [...]
Hey Guys,
I’m trying to use this menu by phatfusion, but I get no result. I can’t tell if I have no connection to mootools or what’s going on.
Can someone tell me how they installed this? Thank you!
It is possible to get one of the images to be open by default changing the imageMenu.js file, here:
getOptions: function()
open: null;
to:
open: 1;
UNFORTUNATELY …
1 opens the SECOND image by default, 2 the third etc.
(
0 (zero) DOES NOT open the 1st image by default
The firs image open by default seems to be the most likely choice for most using this property.
Can anyone provide the solution for this, again:
1) Keep menu accordiion functionality as is
EXCEPT
2) The first image is in OPEN mode when the page loads.
This seems to be a trivial solution, but I cannot work it out (not a javascript programmer).
Thanks a bunch peeps, in anticipation…
In answer to all those asking how to get the images to open the links, rather than the annoying alert message.
VERY SIMPLE SOLUTION
In your xhtml document, locate the window.addEvent javascript code immediately under the menu code (in your page ):
window.addEvent(’domready’, function(){
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
And delete the following:
, onOpen:function(e,i){alert(e);}
DO NOT miss the comma at the start ;o)
You are left with the following:
window.addEvent(’domready’, function(){
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:310, border:2});
});
Your links will now work as the alert has been removed
I need the same help as Paul. What does “open” need to be set at so that the first image is always open? 0 and 1 don’t work….2 opens the second image….is there a secret number i’ve been missing all my life? Please help me, my eyeballs are beginning to hurt.
I’ve been working with (fighting with, actually) image menu for a few days now and I’m lost. It’s a perfect fit for my client, but I just can’t get it to work.
The work-in-progress page (a replacement for their present Home Page) is here: http://www.tampabayhistorycenter.org/homeimagemenu1.html; I
can’t get the images to the far left of the div, and I can’t get the
imagemenu to open on “visit” as I’ve indicated in the code. [Disclaimer: I haven't yet implemented any of the suggestions here.] To say nothing of being unable to get the images to “slide” as they should on rollover. The links on each image work, but that’s all. And, regrettably, I’ve worked and re-worked it so many times that it’s a bit of a mess and I’m not sure where to start to fix it. (In fact, I’m embarrassed to share it here, but I’m desperate!)
Any thoughts?
Thanks,
Bill
Hey,
I love the menu. It looks great. Im having trouble figuring out how to add more items to it in case you want more than five pics. Is this possible?
Nick
hi guys,
I’ve gotten the links to work from page to page, but the Slider now doesn’t work? any suggestions
my dear friends, after some hard research found this that might solve everyones problem…
Remove the onOpen option in the initialize script:
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
to
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:310, border:2});
How to choose item to preopen?
I try with, where #open is id of item to open.
but doesn’t work, any idea ? thanks
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:310, open:’#open’,border:5, onOpen:function(e,i){alert(e);}});
I say to those who ask “How to choose item to preopen?”
Just add “open:0″ and will open by default the first image, for other images or menus just replace the number with the ID of that menu. following the exact code: window.addEvent ( ‘domready’, function () (
var = new myMenu ImageMenu ($$(’# imageMenu a ‘), (openWidth: 400, border: 2, open: 3, onOpen: function (e, i) (window.location = (e );}});
));
The above code will open the 4th menu
Hello from ITALY
It works beautifully on my site, check it out: http://quaymberley.com/kiss/photography.html
Thanx for the great code!
Hello,
I’m trying to modify the code to take into account 8 images instead of 5 and my images are 630px wide, by 400px in height. The height i have no problem with, but it seems that when I modify either the total lenght of my openWidth from the default 310 to anything larger, the stock width of the over all appllication remains unchanged. I’m sure I’m missing something easy, but not sure exactly what I’m missing.
Here is snippets of my code:
window.addEvent(’domready’, function(){
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:600, open:3, border:2, onOpen:function(e,i){alert(e);}});
});
my style sheet:
#imageMenu {
position: relative;
width: 980px;
height: 400px;
overflow: hidden;
border:1px solid red;
}
#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:50px;
height: 400px;
}
In My javascript:
getOptions: function(){
return {
onOpen: false,
onClose: Class.empty,
openWidth: 630,
transition: Fx.Transitions.quadOut,
duration: 400,
open: null,
border: 0
};
},
this.elements.each(function(el,i){
var w = width;
if(i == this.elements.length-1){
w = width+8
}
obj[i] = {’width’: w};
}.bind(this));
Any help or pointing me in the right direction would be most helpful.
Thanks!
the script does not work with me Open: 0
someone has an idea???
Wondering if one can use pngs in this image menu and have transparent backgrounds actually work. i found out about this plugin from its integration into a wordpress theme called picture perfect.
having alot of problems with the theme working and trying to customize this thing to have transparent backgrounds, check out the link:
http://musterdman.com/Wordpress/
Help! I love this menu and have it working to bring up 4 different galleries. However, I hate the galleries. What I really want to do is when I click on the first image I want it to go to another instance of image menu with new pictures which will slide open but which will return to home when clicked, so the menu itself witll serve as a 4 or 5 picture gallery.
My problem is that when I change the images in the imagemenu.css it changes the images for every instance of the menu that I am using. Is there another place to change the images instead of changing them in the background of the css, or is there a way to create a different CSS for every instance. I am a newby at this. (old person experience in things like Fortran and Cobal and RPG but new to Dreamweaver and CSS and Java Script) Help I am tearing my hair out.
This is a very useful menu and very stylish as well. I’m a big fan of mootools myself. Thanks for sharing.
Hey Everybody,
the phatfusion menue is really great and I had used it before, now I wanted to implement it again, but it doesn’t work properly. Where is the bug – I searched all day.
Can you help? http://www.casa-santa-ines.de/lapalma_allgemeine_test.html
Thank you very much in advance, Ina
Found one of my mistakes. Got another! The first had to do with openWidth – the value was too high (imageMenu.js)
But now I encountered another think.
I want to jump within the page via the menu and anchor points f.i. #surfen or #reiten. Here I get the message:
‘this.elements.0′ ist Null oder kein Objekt
Zeile: 31
Zeichen: 3
Code: 0
URI: http://www.casa-santa-ines.de/scripts/imageMenu.js
What do I need to do? Hope one of you can help! Thanks!
ttp://www.casa-santa-ines.de/lapalma_allgemeine_freizeit.html
ttp://www.casa-santa-ines.de/lapalma_freizeit.html
Great script but is there a way to single click on an image and it goes to the url. One click seems to keep the image open and it needs another one for the link to work?
RSS feed for comments on this post · TrackBack URI