WebAppers

/ best free open source web resources /

Shopify

Phatfusion Image Menu with Mootools

Posted · Category: Menu, MIT License

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.

image-menu.png

Requirements: Mootools Framework
Demo: http://www.phatfusion.net/imagemenu/index.htm
License: MIT License

51 Comments
  • Pingback: Gilbert “Gilbitron” Pellegrom » » Image Menu with Mootools

  • http://www.startfrom.co.uk Alan

    Very cool menu. I’ve had a look at the demo and will be trying out Moo Tools on my next project.

  • sharon

    Is it possible to have this effect using the image menu but as the image slides across it loads a html page with it?

  • http://fauxzen.com Shelby

    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

  • http://www.dozarte.com/wordpress DoZ

    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!!

  • Niko

    Hello,

    I’m looking for the same thing than Shelby. I think that the secret is in “imageMenu.js”.

  • Peter

    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…

  • http://www.one-design.net/blog/ OneDesign|Blog

    try changing the alert(e) to window.location=e

  • Mo

    I found the bug! :D

    line: 72

    change

    if(this.options.open){

    to

    if(this.options != null){

  • Pingback: Mis Proyectos » Blog Archive » Imagemenu, excelente menu grafico con efecto acordion

  • http://www.sikhtourism.com Parvinder Singh

    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

  • Jake

    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);}});

  • AlexOnti

    I’ve been pulling my hair to make it load the URL instead of the st*pid Alert. Thank You very much. =)

  • http://snapshark.co.uk Jake

    You’re welcome. :)

  • sasha

    problem with your code window.location=(e);}}); is when you click menu ,menu dont stay open for that page ;)

  • Babs

    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?

  • http://www.sexyshinystuff.com clayton

    Thought I already posted this. Is there some way to adjust which piece of an image shows when the menu is collapsed?

  • Jacquelyn

    Thanks for the trick on getting the menu to open new HTML pages. It was a life-saver.

  • Benjamin

    @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.

  • Abhishek

    Thanks a ton people for the solution to open window instead of alert. the menu is neat. thanks
    cheers

  • Balag

    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…

  • adam

    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

  • B-Dub

    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

  • Pingback: Menu Imagen con Mootools at Blog Borchani Studios

  • http://www.jesusgonzalez.com.mx González

    Hey “OneDesign|Blog” thanks a lot for the solution ¡¡

  • ´Dizz

    THanks for the solution,
    thats was wery helpful!

  • Mathoc

    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 ;)

  • http://music.junemoris.com June

    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.

  • Alan

    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!

  • Pingback: Menu Imagen con Mootools - MixInformatico.com

  • Martin

    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!

  • Paul

    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 :o(

    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…

  • Paul

    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

    :o)

  • Jon

    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.

  • Bill

    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

  • Nick

    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

  • http://noneasyet randy

    hi guys,

    I’ve gotten the links to work from page to page, but the Slider now doesn’t work? any suggestions

  • Lord Phantom

    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});

  • maxi

    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);}});

  • Björn

    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

  • http://quaymberley.com qbob

    It works beautifully on my site, check it out: http://quaymberley.com/kiss/photography.html

    Thanx for the great code!

  • warrenvt

    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!

  • Michele

    the script does not work with me Open: 0
    someone has an idea???

  • wervil

    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/

  • Vicki Stull

    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.

  • http://netgoo.com.ph Ralph

    This is a very useful menu and very stylish as well. I’m a big fan of mootools myself. Thanks for sharing.

  • http://www.casa-santa-ines.de/lapalma_allgemeine_test.html Ina Bauer

    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

  • http://www.casa-santa-ines.de/lapalma_allgemeine_freizeit.html Ina Bauer

    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!

  • http://www.casa-santa-ines.de/lapalma_allgemeine_freizeit.html Ina Bauer

    ttp://www.casa-santa-ines.de/lapalma_allgemeine_freizeit.html

  • http://www.casa-santa-ines.de/lapalma_allgemeine_freizeit.html Ina Bauer

    ttp://www.casa-santa-ines.de/lapalma_freizeit.html

  • Ivorgripe

    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?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons