Image Menu with Jquery

Creating a Smooth Image Menu with Jquery

I have always thought that imagemenu sliding effect is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I’ve come up with using the power of jquery javascript.

Functionality Checklist for our Sliding Image Menu for Jquery.

Here is what we need our Jquery horizontal sliding image menu to do:

  1. Jquery compatible script.
  2. Mootools like sliding effect.
  3. Valid XHTML degrades well.
  4. Lightweight customizable script.

For this Image Menu we will be using jQuery and jquery-easing effects. I ended up adapting two versions of the image menu and will start with the more basic and straightforward one first.
For the purposes of helping visualize this demo I am using the same images found in the original Mootools ImageMenu.

Let’s take a look at the XHTML, CSS, and JavaScript that makes it all work.

Jquery Image Menu Version 1, View Demo, Download Source.

Jquery ImageMenu

Here is the HTML for just the jquery Image Menu itself:


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

Here is The CSS

.jimgMenu {
position: relative;
width: 670px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1340px;
}
.jimgMenu ul li {
float: left;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:78px;
height: 200px;
}
.jimgMenu ul li.landscapes a {
background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(images/urban.jpg) repeat scroll 0%;
min-width:310px;
}

The JavaScript

In the header section of your HTML file, you’ll need to include jQuery and all the plug in files listed. The bare minimum setup look like this:

Finally include the jquery in your page or in an attached file.


This will activate our image menu, just remember we have css controlling most of the image menus style. You can customize the easing type and duration with the jquery easing plugin that we are using to achieve different slide effects.

Jquery Image Menu Version 2, View Demo, Download Source.

Image Menu For jQuery

For this second version I have used kwicks to help with the ImageMenu animation. The advantage to using kwicks with our sliding image menu is the additional functionality that it brings in the form of sticky menu items which will stay open and custom events such as on click actions instead of hover.

The HTML remains the same for this version of jquery Image Menu except for the use of id instead of class.


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

The CSS is adapted slightly for kwicks

.jimgMenu {
position:relative;
margin: 0px 0px 0px 50px;
padding: 0px;
width:475px;
height:200px;
overflow: hidden;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
display: block;
height: 200px;
position: relative;
}
.jimgMenu ul li {
width: 95px;
float: left;
display: block;
overflow: hidden;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#fff repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow: hidden;
height: 200px;
}
.jimgMenu ul li#landscapes a {
background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li#people a {
background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li#nature a {
background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li#abstract a {
background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
background: url(images/urban.jpg) repeat scroll 0%;
border-right-style: none;
}

The JavaScript

In the header section of your HTML, you will need to include jQuery and all the files below. The bare minimum setup will look like this:


This will activate our jQuery Sliding Image Menu plug-in. The last step is to include the script in our page by placing this script in your html head or document body.

Enjoy an Image Menu sliding effect for Jquery.

  86 comments for “Image Menu with Jquery

  1. Sam
    April 23, 2009 at 7:21 pm

    Good stuff thanks for the help.

  2. Olivier
    April 26, 2009 at 9:41 am

    Nice script, thanks sharing.
    I just wonder if it possible to have an other item selected, displaying the current page ?

  3. Dylan Wagstaff
    April 26, 2009 at 11:50 am

    Aloha, Thanks
    Not sure if I understand exactly what you want to do but you can Use Sticky and Custom Events.
    For Example: sticky : true, to have an image stay open or you can add
    event : ‘click’ to make the menu animate on click instead of hover.
    The code for the second image menu version with sticky images and on click events instead of hover would look like,
    $().ready(function() {
    $(‘.jimgMenu ul’).kwicks({max: 310, duration: 300, sticky: true, event: ‘click’, easing: ‘easeOutQuad’, complete: ‘callback’});
    });

  4. April 30, 2009 at 11:43 am

    Perfect, just what I was looking for thanks!

  5. DigitalBill
    May 2, 2009 at 12:06 pm

    Thanks for the great tips. I’ve been wrestling with the original mootools imagemenu, and I was happy to see this jQuery solution as an alternative. But I’m running into some of the same problems with this one…
    I find I can get everything to work as long as I stick to five images and keep the ref names the same (i.e. Landscapes, People, Nature, etc.), but as soon as I introduce a 6th — or in my case, a 6th-7th-8th-9th — image or reference the image(s) by a different name, everything breaks.
    What I’m looking for: Nne (9) images to load, the far left image to be displayed onOpen, the images to slide on rollover and an on click action which calls a URL for each image. I’ve checked and re-checked spelling and syntax, but I’m lost.
    Any thoughts?

  6. Dylan Wagstaff
    May 2, 2009 at 12:53 pm

    Hi,
    To include more images you have to add them to both the css file and to the page list of images. You will also need to adjust the css .jimgMenu width to match how may images are included and make sure that overflow : hidden is not hiding your included images. As long as you use the same id labels within the css and page it will be called.
    I cant seem to duplicate your issue. A sample to look at might help but you are able to add more images through adjusting the css and in-page html.

  7. DigitalBill
    May 2, 2009 at 1:01 pm

    Thanks, Dylan. I’ve tried that and so far come up empty, but I’ve worked and re-worked this page and its support files so much now that it’s a mess.
    I’ll go back and start the page from scratch and post the URL of the work-in-progress if I continue to have probs.
    Either way, I’ll report back on my success/failure.

  8. DigitalBill
    May 2, 2009 at 6:51 pm

    Baby steps, I guess…
    I have my nine 99) images in place, a 1px right border separating them and the slides perform as they should. But I’m still wrestling with an issue where the jimgMenu div is pushing the images to the right 40px, and apparently I have a conflict with .js libraries because I can either get a LightWindow effect to work on a link in a div above the imagemenu OR the imagemenu works, but not both. And it appears to be affected not only by the order of the .css files but by the .js libraries themselves.
    I’ll post a URL, but can you really tell much without the .css files too? (Ah, yes, Firebug!)

  9. Dylan Wagstaff
    May 3, 2009 at 7:18 am

    Good to hear your making progress.
    Yes javascript has to be called in the order it is written or else you wind up with undefined variables and functions. Jquery will always conflict with lightbox as it is Mootols based. As an alternative jquery thickbox works great and is actually faster than lightbox. Or you can add a jquery no conflict to the jquery call and script.
    Example:
    add var $j = jQuery.noConflict(); to top of script than replace all the $ symbols with $j
    Long live Firebug :P

  10. DigitalBill
    May 3, 2009 at 8:40 am

    Well, “progress” is a relative term…
    Please take a look at: where I am right now
    The image menu works, but I still haven’t been able to figure out the 40px “push” to the right. The min-width on the last image is what I’d like on the first image onOpen, but when I move the property up to the first image it throws things off even more. The HREFs work, but ideally I’d like to try a click-to-open/stick/2nd-click-to-gotoURL option. And of course there’s the lightwindow conflict, as this page doesn’t reflect any of the changes you suggested (I may try the no-conflict first, then take a look at thickbox if/when I ever get these other issues under control).
    In a nut shell: Slides work. 40px shift to the right. Images don’t “shuffle” to fill the space. Menu opens with last image open when I’d like it to open with the first image.
    Closer, perhaps. Any less frustrated? Negatory!

  11. Dylan Wagstaff
    May 3, 2009 at 10:31 am

    Hi Bill,
    Your most certainly are getting conflicts by calling scriptaculous and portotype / lightbox and jquery. I didnt realize you were referencing the first version of the script.
    For the 40px margin you want to add
    left : -40px;
    position : relative;
    to .jimgMenu ul
    I would also change the width in your #imageMenu_jq to 100%
    To have the firstimage open add width : 415px to first image .css but keep the min-width on last as well.
    This works but the only problem is the script is only looking at the hover state. So all is well as long as the user actually hovers over the first open image but if the other images are hovered over before it will not collapse. This is one of the reasons I developed version 2 of the script with kwicks which has a 3rd animated state and enabled me to not reinvent the wheel so to speak.

  12. DigitalBill
    May 4, 2009 at 9:51 am

    OK, I got it working, thanks to your tips. Thanks!
    Before I take a look at the second version of the script with kwicks and solve that sticky dilemma, I experimented with the jquery no conflict to avoid the lightwindow issue. But I made these changes to the page:
    add var $j = jQuery.noConflict();
    $j(document).ready(function () {
    // find the elements to be eased and hook the hover event
    $j(‘div.jimgMenu ul li a’).hover(function() {
    // if the element is currently being animated
    if ($j(this).is(‘:animated’)) {
    $j(this).stop().animate({width: “415px”}, {duration: 450, easing:”easeOutQuad”, complete: “callback”});
    } else {
    // ease in quickly
    $j(this).stop().animate({width: “415px”}, {duration: 400, easing:”easeOutQuad”, complete: “callback”});
    }
    }, function () {
    // on hovering out, ease the element out
    if ($j(this).is(‘:animated’)) {
    $j(this).stop().animate({width: “48px”}, {duration: 400, easing:”easeInOutQuad”, complete: “callback”})
    } else {
    // ease out slowly
    $j(this).stop(‘:animated’).animate({width: “48px”}, {duration: 450, easing:”easeInOutQuad”, complete: “callback”});
    }
    });
    });
    and it didn’t work. So I did a find-and-replace in the jquery.js itself ($j for $ throughout) and it still didn’t work. (Well, the conflict went away, but the imagemenu stopped working.)
    Must be sloppy typing or ADD on my part, eh?

  13. DigitalBill
    May 4, 2009 at 12:55 pm

    Well, here’s the kwicks version:
    tester
    Looks great in Firefox; breaks in Safari.
    Back to the drawing board in search of a fix and a combo of script #1′;s ability to open with the first left-hand image displayed and script #2’s ability to slide all of the images back equally.

  14. Dylan Wagstaff
    Dylan Wagstaff
    May 4, 2009 at 4:23 pm

    Looks Great! I think if anything my examples above of a jquery image menu really point out how jQuery is css based. Whether it be a small custom written script or full on plug-in jquery output is based on the css you can throw at it.
    If Safari is not agreeing I’d bet it’s a simple css fix. Try searching for safai css issues and fixes. Many times mac compatibility requires a small css hack depending on the rest of your layout. Also I’d suggest valid xhtml strict. I’ve viewed this menu on an iphone and it looked just as good with valid xhtml strict. You could also serve up a page just for safari users. ;P
    Your second attempt at jquery no conflict would have worked if I had been carefuller typing. I meant add as include. :P
    Change:
    add var $j = jQuery.noConflict();
    To:
    var $j = jQuery.noConflict();

  15. DigitalBill
    May 6, 2009 at 8:00 am

    Thanks for the clarification on that no conflict — I made the change and it works like a charm on both pages!
    But why, even the -50px cheat on that div to get the banners to align left in the first page throw things off for me in IE7, suggesting the cheat *isn’t* needed for IE. @#$%^*!!
    I guess I’m staring at either some browser-specific CSS or choosing which platform(s)/browser(s) to ignore.

  16. Dylan Wagstaff
    May 6, 2009 at 9:40 am

    Hi I see what your saying. The 50px margin comes from the margin setting.
    .jimgMenu {
    height:426px;
    left:-50px;
    margin:0 0 0 50px;
    overflow:hidden;
    padding:0;
    position:relative;
    width:801px;
    }
    Your left:-50px is not needed, simply change to:
    .jimgMenu {
    height:426px;
    margin:0;
    overflow:hidden;
    padding:0;
    position:relative;
    width:801px;
    }
    Overall it seems like the trouble you ar having is with your css. When you view my example you will see the 50px margin is just for placement on the example page. If you toggle the css on and off with firebug this becomes very obvious. It is also very easy to set css for ie using an if ie conditional css statement. IE conditional CSS is a practical and common work around that gets placed in your pages head and look like:
    <!–[if IE]> <style type=”text/css”>.jimgmenu {example:css;} </style> <![endif]–>

  17. DigitalBill
    May 6, 2009 at 6:15 pm

    Just wish I could use firebug in Safari or IE to test some changes on-the-fly as I can with FF. :-(

  18. eadriang75
    May 15, 2009 at 4:20 am

    First I’d like to say thank you for this jQuery version. The issue that I’m having is, of course, in IE6. On Menu v.1 the graphic assigned the min-width will default to the preview width of 78px after I have hovered out; leaving an ugly space to the right of “Urban.”
    Anyone find a work around for this issue? Please advise. Thank you.

  19. Dylan Wagstaff
    May 15, 2009 at 2:08 pm

    You can try display:inline-block instead of block.

  20. Tim
    Tim
    May 15, 2009 at 5:32 pm

    Hello adriang, I would first try inline-block in your style sheet as suggested. If that doesn’t work take a look at any possible css in your current page that could be effecting the menu. Most likely a margin or padding element is throwing the block display alignment off.

  21. Rainer
    May 18, 2009 at 5:40 am

    Very nice script – thanks a lot!
    Is there any way to address active and hover states for the menu?

  22. Dylan Wagstaff
    May 18, 2009 at 7:47 am

    Hi Rainer, thanks.
    Yes I just uploaded an updated version #1 which will add a style-able class=”active” on hover to each list item and remove it on mouse out. Take a look with firebug and you will see the class being added and removed to each element as you hover over them. This is done with Jquery’s .addClass() .removeClass()
    View Updated Demo
    For the second version with kwicks simply add a class to each li list item with the same name as the id. Example:
    <li class=”landscapes” id=”landscapes”><a href=”#”>Landscapes</a></li> this will allow kwicks to add an active class to each image menu item as you hover over it.

  23. Rainer
    May 20, 2009 at 1:43 am

    Hi, thanl you very much!
    Just what I was looking for.
    Perfect.

  24. Dan
    May 22, 2009 at 2:02 pm

    Hi Dylan, I took a look at your version 1 and it’s good with one small exception. In order to get the active class included and removed on a quick mouse roll over you should put the .addClass and .removeClass call before stop().
    Like so: .addClass(“active”).stop()

  25. Dylan Wagstaff
    May 22, 2009 at 2:12 pm

    …nice, included and updated in the Demo. thanks for spotting and pointing that out.

  26. DigitalBill
    May 26, 2009 at 9:45 am

    Dylan, just wanted to thank you again for your help with this. V2 is working flawlessly now, due in no small part to your advice and guidance.
    The use of kwicks is terrific. I haven’t done much experimentation with sticky menus, but on-click events work just fine.

  27. Dylan Wagstaff
    May 27, 2009 at 3:10 pm

    Hi Bill, Good to hear. You integrated the image menu very nicely into the site, well done.

  28. leo
    August 6, 2009 at 4:40 am

    This system works great on my computer but refuses to work when uploaded to host server: http://aercosystems.com/image-menu-2.html . Any thoughts?

  29. Dylan Wagstaff
    August 6, 2009 at 6:01 am

    Aloha Leo,
    It would appear that the packed js files have become corrupted upon upload as they are throwing errors. Try to upload an unpacked and un-minified version of jquery, kwicks and easing to see if that is the problem.

  30. leo
    August 7, 2009 at 11:08 pm

    Thanks! The third time was a charm.

  31. leo
    August 9, 2009 at 5:41 am

    Is there an option to select which image will be open when the page first loads?
    My current code:
    $().ready(function() {
    $(‘.jimgMenu ul’).kwicks({max: 310, duration: 1500, sticky: true, easing: ‘easeOutBounce’});
    });
    Thanks for a great application!

  32. leo
    August 9, 2009 at 7:26 am

    Sorry. I found the option:
    $().ready(function() {
    $(‘.jimgMenu ul’).kwicks({defaultKwick:2, max: 310, duration: 1500, sticky: true, easing:
    ‘easeOutBounce’});
    });

  33. Rainer
    September 11, 2009 at 2:45 am

    Oh, this is great… I was just about to ask how to address which kwick will be open. But… is there a way to even address a certain state of this kwick?
    For example the actice one?

  34. Dylan Wagstaff
    September 12, 2009 at 7:14 am

    Hi Rainer, thanks.
    Kwicks should be adding the class=”active” to each pic as it is hovered over. From there you should be able to style the active class via css.

  35. Rainer
    September 12, 2009 at 12:06 pm

    I’m not sure if you got my question wrong or I do not understand your reply correctly…
    I would like to open the page with a certain kwick (for example “defaultKwick:2″) and in a given state (i.e. active or hover or…). Is tehre a way to address a) which kwick to open and b) in which state it is shown?
    Thank you very much in advance…

  36. nemo
    September 16, 2009 at 7:02 pm

    Using image menu vs 2
    Works fine in Dreamweaver CS 4 in all respects when saved and viewed in browser it looks great. When i upload to server and go to link in browser one of the images will not show it is just a blank spot. The blank one is the 7 th image of 9 total. Also all of the images past the 5 th one do not have a white edge like 1-5 images.
    Any thoughts?
    Thanks

  37. DigitalBill
    October 12, 2009 at 6:17 pm

    Well, I’m back again. I’ve enjoyed months of error-free performance, but now that changes have been made to the client’s page which require six banners to the right of a left-hand sidebar in place of the previous full-width 9-image setup, I’m getting headaches from IE again.
    Page displays and works fine in Firefox and Safari, but all flavors of IE render the slider images as invisible. In other words, they’re not there at all.
    I’ve kept the ref files the same, changing only the params regarding location, no. of images, width, etc., but I’m lost on what IE is barfing on.
    ???

  38. Rob El-Hani
    October 21, 2009 at 11:01 pm

    Hi,
    This is a fantastic scrip and many thanks for sharing..
    Can this image menu be positioned vertically rather than as is horizontal? If so, which bit of code needs to be changed.
    Many thanks

  39. Gaius
    October 23, 2009 at 2:10 am

    These are amazing! Thank you!

  40. aolee
    October 26, 2009 at 5:11 pm

    Is it possible that when user click the image, the image stays open? (hover should still works). What I have in mind is, when u hover on the image, kwicks perform normally. Upon clicking a specific image, the image stays open, and i will load something on the body, based on the image clicked? hope you didn’t got confused. Thanks.

  41. November 27, 2009 at 5:39 pm

    Hi,
    I installed this on a WordPress MU-BuddyPress site.
    It works perfectly on FireFox and Chrome, but on Internet Explorer it won’t work.
    Error: j( —- ).livequery is not a function.
    Any ideas? I haven’t been able to fix it.

  42. November 27, 2009 at 5:41 pm

    By the way the site I was talking about is
    here

  43. November 27, 2009 at 8:58 pm

    I solved the “not a function” error code.
    Now I isolated to problem to kwicks-1.5.1.js
    This works beautifully in FF and Chrome.
    But it doesn’t work at all on IE.
    When I delete kwicks, there are no error codes, and when I return it, IE is giving me the error:
    “object doesn’t support this property or method”
    Hmm…

  44. aolee
    November 27, 2009 at 9:07 pm

    looks like there’s now way for the image to stay open when clicked? in http://www.phatfusion.net/imagemenu/ image stays open but hover still works when mouse-hovered on other images.

  45. November 28, 2009 at 1:00 pm

    Found the solution!
    For this to work in IE, you need to open Kiwicks-1.5.1 file…
    Look for:
    container=$(this);
    And replace with this
    var container=$(this);
    Now it works in IE!

  46. Dylan
    November 29, 2009 at 8:15 am

    Thanks for sharing the ie fix.
    In response to aolee you can implement the sticky function within kwicks as well as a click event to have them stay open like so…
    $().ready(function() {
    $(‘.jimgMenu ul’).kwicks({
    isVertical : true,
    sticky : true,
    event : ‘click’
    });
    });
    In response to Rob El-Hani the above example also shows the use a vertical setup option which will require the css to be adjusted as well.

  47. artzy65
    December 7, 2009 at 9:17 am

    I’m working in Dreamweaver CS4 (Mac) and need help inserting the Jquery Image Menu (version 2) into my document. I have the basic layout (without images) at http://pages.interlog.com/~pagewise/basiclayout.html
    I’m currently using the Phatfusion version, and although it works fine in all Mac browsers and in IE 8, Firefox and Safari in WinXP, it breaks in IE 6/7. I’m at least able to center it in XP using conditional style sheets, but cannot edit it furthur; I know some css and js tweaks but not nearly enough…. I’m not a coder.
    Here is the test page with images (using Phatfusion version): http://pages.interlog.com/~pagewise/carbonneon5.html
    Any suggestions would be greatly appreciated.

  48. aolee
    January 3, 2010 at 8:15 pm

    hi Dylan,
    sorry but your code doesn’t work, it stays open when clicked but doesn’t ease when hovered. Check out the original from mootools version. when u clicked on an image it will open, but when u try hovering the other images, it will move. http://www.phatfusion.net/imagemenu/
    thanks

  49. January 17, 2010 at 12:50 pm

    Hello,
    I, too, was having a lot of problems getting this going how I wanted with Mootools. Within 15 minutes, I had this one pretty well laid out how I like it. One question, though – Can I make my first graphic sticky, use mouseover to scroll effects, and make onclick make the graphic that the user clicked on sticky?
    Thanks,
    Scott

  50. MasterJuh
    April 27, 2010 at 4:19 am

    I’ve tried to have this awesome menu system as a “main categories” menu, and to insert two level submenu inside the different parts. But I didn’t manage to get it work: the second level of menu doesn’t develop.
    If somebody want to check and give advise, he or she is very welcome.
    My test page is here.
    Thanks for your work

  51. May 12, 2010 at 5:22 pm

    Once switching the menu to be vertical, awkward spacing appears between the images when hovering.
    Image height: 200px
    The images below cover 50% (100px) (can’t figure out how to change that) and the space is another 100px.
    Anyone got any idea how to eliminate the spacing? All margins and padding are set to 0.
    Cheers.

  52. May 12, 2010 at 5:33 pm

    I set the menu to be vertical and now spacing shows between the images (about 100px) when they slide out to show the active image. (images A,B,C: B and C slide down, leaving a 100px gap between the bottom of A and the top of B)
    Also I can’t, for the life of me figure out how to adjust the size of the preview image (how much is covered).
    Anyone got any ideas?
    Cheers.

  53. Dirk
    June 28, 2010 at 3:37 am

    Just to settle my own curiosity please…
    I used your image menu on a website and it worked 100% in Firefox, Opera and IE7. Than came IE8. It kept pushing my menu to the right & down. When one changed IE8 to compatable mode, it was fine again.
    After days of very little sleep & a lot of stress I changed to another menu alltogether.
    What was / is the bug between Image Menu & IE8??

  54. luke
    June 29, 2010 at 10:02 pm

    Dear Scott
    Did you ever resolve your issue. I’d like to do the same.
    Many Thanks
    luke

  55. June 30, 2010 at 5:58 am

    Has anyone had any success getting “sticky” to work in Internet Explorer?
    I’m using Version 2, and have been able to get the items to work flawlessly in Safari and Firefox. But for IE, I can’t seem to get “sticky” to work. I’ve tested in IE8 and IE 6 so far.
    Thanks!
    Andreah

  56. lia
    September 14, 2010 at 12:54 pm

    Awesome script! Does anyone know if there is a way to automate the hover effect? That would make a very cool header nav. THANK YOU!

  57. October 1, 2010 at 12:23 am

    Great menu :) I like it..
    I use it in vertical mode and it works grat. To remove 100px gap between lines, you have to put variable “max:” on to your picture height (200px) and that is almost it :)..
    $(‘.jimgMenu ul’).kwicks({max: 150, duration: 300, isVertical : true, easing: ‘easeOutQuad’});

  58. gm
    October 5, 2010 at 9:50 pm

    Hello All,
    Is there a possibility of autoscroll? Can we give a time limit to autoplay the slides?
    Thanks in advance… Pls advice

  59. November 17, 2010 at 2:04 am

    Thank you very much for the code. But I do have problems with chrome in Linux. I really don’t know how to explain what is happenning. It is just caothic. Has anybody else experimented this?

  60. slager
    November 25, 2010 at 5:45 am

    How to change opened tab, from the last to the first?
    (in demo landskapes)
    thanks for help

  61. rlnd
    December 2, 2010 at 2:43 pm

    Hi! I’d like to use the sticky function in version#1. How is it possible?
    Thank you in advance.

  62. January 17, 2011 at 4:59 pm

    Hi, i want to erase 2 sections from the original code but if i do that i make a mess with the code and the menu acts funny, can you help me please?

  63. mikeg
    February 3, 2011 at 12:05 am

    How can i have the active item stay open after click and site load? Thought it’ll will be possible with sticky but this would only be enable this for one specific tab.
    Thanks for your great work, it’s quite simple to add and modify.
    Kind regards
    Mike

  64. February 10, 2011 at 2:43 pm

    Is there any way to have the slide out images have multiple links within them, imagemap like (for a ghetto comparison)

  65. vujč
    February 12, 2011 at 4:59 pm

    and sorry for my language and mistakes :)

  66. vujč
    February 12, 2011 at 6:01 pm

    hm

  67. vujč
    February 12, 2011 at 6:06 pm

    why doesnt work this image menu with/in wordpress?

  68. usugarbage
    February 18, 2011 at 6:38 am

    I wanted a stick’ied version of #1 as well. This is what I’ve came up with.
    $(document).ready(function ()
    {
    // find the elements to be eased and hook the hover event
    $(‘.jimgMenu ul li a’).hover(Hovered, Unhovered);
    // handle the click and bypass hover for the clicked element
    $(‘.jimgMenu ul li a’).click(function ()
    {
    // reset
    $(this).parent(“li”).siblings().children(“a.unbound”).stop().animate({ width: “78px” }, { duration: 350, easing: “easeInOutQuad” })
    $(this).parent(“li”).siblings().children(“a.unbound”).hover(Hovered, Unhovered);
    // turn off my leave
    $(this).addClass(“unbound”).unbind(‘mouseenter’).unbind(‘mouseleave’)
    });
    });
    function Hovered()
    {
    // if the element is currently being animated (to a easeOut)…
    if ($(this).is(‘:animated’))
    {
    $(this).stop().animate({ width: “310px” }, { duration: 450, easing: “easeOutQuad” });
    } else
    {
    // ease in quickly
    $(this).stop().animate({ width: “310px” }, { duration: 400, easing: “easeOutQuad” });
    }
    }
    function Unhovered()
    {
    // on hovering out, ease the element out
    if ($(this).is(‘:animated’))
    {
    $(this).stop().animate({ width: “78px” }, { duration: 400, easing: “easeInOutQuad” })
    } else
    {
    // ease out slowly
    $(this).stop(‘animated:’).animate({ width: “78px” }, { duration: 450, easing: “easeInOutQuad” });
    }
    }

  69. db4l
    March 1, 2011 at 12:06 pm

    i think this is a lovely tutorial / example. i am curious though how to include an image swap on a mouseover / hover on the 5 source images defined in the CSS and how that would mesh with the existing javascipt.
    please forgive my ignorance…this is day two of forcing myself to learn web design. many thanks for any help.

  70. Dylan Wagstaff
    March 14, 2011 at 6:37 pm

    Very slick sticky usugarbage. Thank you for sharing

  71. pmz
    April 7, 2011 at 12:22 am

    Hi,
    great stuff but is there an option to change this to show for eg. first photograph on the left as big one and others which are on the right as thumbs and when You mouseover second image (thumbed) it will slide and cover the image on his left. So change the direction of sliding/hiding images? I hope You understood me.

  72. Ritchie
    April 7, 2011 at 9:42 pm

    Thx4 this Awesome script!
    I want it vertical, but what are the steps to do that?
    In firefox/firebug its working and putting it in the server not.
    Please help.
    Ritchie

  73. sho
    June 1, 2011 at 9:02 am

    Thanks for making the sliding menu available. I believe I have the basic functions working. However, I am new to this and am unable to figure out how to place my own images into the frame work. Any assistance would be greatly appreciated.
    Thanks

  74. card
    July 23, 2011 at 11:26 am

    Hi
    Pls can i get some help i want to change the picture size i need the width: 1000px and height: 200px can someone help me

  75. Robin
    July 28, 2011 at 12:55 pm

    Hi,
    I integrate version 2 of this jquery on a wordpress template. The script by self works without any problem, but I got trouble with other jquery scripts who I have installed over the plugins.
    I try to embed the FancyBox (http://fancybox.net), but with the installed imagemenu it doesn’t work. Same with some other query plugins.
    If I load another template in WP without any code around imagemenu, the plugins work absolutely fine.
    I spend now several hours to fix it, but I found no solutions.
    Anyone an Idea what I can do??? I also try to fix the problem with the noConflict part. No way :-(

  76. Robin
    July 28, 2011 at 12:56 pm

    Hi,
    I integrate version 2 of this jquery on a wordpress template. The script by self works without any problem, but I got trouble with other jquery scripts who I have installed over the plugins.
    I try to embed the FancyBox (http://fancybox.net), but with the installed imagemenu it doesn’t work. Same with some other query plugins.
    If I load another template in WP without any code around imagemenu, the plugins work absolutely fine.
    I spend now several hours to fix it, but I found no solutions.
    Anyone an Idea what I can do??? I also try to fix the problem with the noConflict part. No way :-(

  77. Jay
    September 11, 2011 at 10:00 pm

    Hi…
    Is it Possible that Sliding Works in Reverse Order..
    Means Floats in Left direction.

  78. February 1, 2012 at 5:37 am

    I can not put on my website. He’s making many mistakes, but I did and redid the procedure several times the way it was passed and does not work at all. Please, Help me!

  79. February 14, 2012 at 2:57 pm

    For anybody who’s trying to get this great script working on Mootools 1.3 be sure to check updated version by Arian here https://github.com/arian/ImageMenu
    There were some major changes with new version of Mootools so sliding wont work fine without this updated jscript.

  80. PeterU
    March 10, 2012 at 5:41 am

    Hi
    Is there a way to adjust the size of the inactive slie?
    I mean when you hover over a slide, that becomes bigger and the rest smaller. I would like to have the one i hover upon even bigger, and the rest even smaller. Is there a way to do this?

  81. PeterU
    March 10, 2012 at 6:02 am

    Hi
    Is there a way to adjust the size of the inactive slie?
    I mean when you hover over a slide, that becomes bigger and the rest smaller. I would like to have the one i hover upon even bigger, and the rest even smaller. Is there a way to do this?

  82. PeterU
    March 24, 2012 at 1:51 am

    nevermind, I got it

  83. jastech29
    April 2, 2012 at 1:43 pm

    Great tutorial! I got this working but would now like to add submenus to Version 1. Do you have another tutorial that does this?

  84. rafia
    June 26, 2012 at 11:29 pm

    Great tutorial,it works for me.currently image become bigger in right side,i want it to left..How can i do it?

  85. rachel xu
    September 27, 2012 at 12:52 pm

    Great post!
    My images are 400×300, so the images are shown partially except the very right one, which i’ve changed the min width to 400.
    Is there a way to adjust the width of the images that are hidden by default? Thanks!

  86. January 13, 2013 at 8:32 am

    i would like to ask if this can be used commercially? because our Head manager for marketing liked this kind of menu slider for a new website for our company and since we would have different branch of sites and want to link them in one page for easier navigation.

Comments are closed.