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
- Brushes (13)
- Buttons (7)
- Color Schemes (12)
- Fonts (20)
- Forms (37)
- Icons (38)
- Patterns (14)
- Stock Photos (15)
- Tables (9)
- Announcement (35)
- Code (13)
- eCommerce (8)
- Framework (52)
- Hosting (9)
- Information (54)
- Inspiration (20)
- Legal Documents (5)
- Reviews (8)
- Security (7)
- Social (6)
- Sound (4)
- Stats (15)
- Tools (57)
- Webmail (8)
- BSD License (20)
- CC License (60)
- GPL License (65)
- LGPL License (25)
- License Free (241)
- MIT License (76)
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 2007 WebAppers
Hosted by Dreamhost ( Get $50 Off )
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…
RSS feed for comments on this post · TrackBack URI