jqDock
jqDock is a jQuery plugin that transforms images into a Mac-like Dock menu, with icons that expand on rollover!
Illustration of jqdock
The plugin works with images, or images within anchors, and has a number of configuration options which provide :
- Horizontal or vertical alignment
- Image expansion out from an edge or a mid-point
- Positioned labels
- Different small and large images
- Menu fade-in
- Size and sensitivity adjustment
- Initial expansion and instant ‘freezing’
- Inactivity timeouts and ‘wake up’ calls
There are also a number of callback hooks and custom events that can be used to control how the Dock operates, and create some interesting effects.
Full documentation is available (see sub-pages), and there are 50+ examples available to help you get started. I’ve cherry-picked half a dozen here : no options , 2 menus , labelled images , switch images , slide in-out , multiple navigation
NB : There’s also a WordPress plugin : jqDock Post Thumbs by Shaun Scovil.
Good afternoon,
I use jqDock and it works great except that it inserts a # at the end of the links’ href. I don’t want that since it breaks my page refresh. Is there any way to remove this additional #?
Regards,
Pierre
Pierre
jqDock does not modify the href attribute of links surrounding an image, as examples such as this demonstrate. Can you provide a web-accessible example that I can look at?
Regards…
Very nice work! I have two questions:
- is it possible to have labels visible all the time?
- does it work with canvas/svg instead of img?
Thanks
Thank you.
1. Yes, with a bit of extra code. See example : http://www.wizzud.com/2012/01/05/permanent-labels-just-images/ (now tagged with ‘permanent labels’)
2. Currently No, but I’ll look into it for the next release
Exelent blog, awesome js you provide here man.
I was looking at the labelled images and I was wondering:
is there a way to make the images “expand” upwards instead of in front?
I think what you’re asking for can be achieved by simply setting the align:’bottom’ option … as in the http://www.wizzud.com/2012/01/05/horizontal-bottom-of-page-centred-labelled/ example?
That is exactly what I wanted.
Thanks a lot man! Keep it up!
is there anyway to add a submenu to a submenu? so that first menu opens the sub, and thet sub opens anotehr sub on click?
http://www.wizzud.com/2012/01/05/sub-menus-as-labels/ uses hover rather than click, but otherwise it has sub-sub-menus…
thanks. however thats not what i need. i meant like in the example “multinavigation”, when for instance the second menu point is clicked, it reveals a new row (the submenu). From there I want the same function for a new submenu under that submenu? Anyway to do this? I’ve managed to get it to work, but it will only go back to the first submenu, from there it wont go back to the main menu.
Like this:
Main Menu >> Submenu >> Sub-submenu
Back it goes:
Sub-Submenu >> Submenu >>(wont return to main menu)
Ah, okay.
Backward navigation is actually the easiest thing to set a generic handler for…
The jqdock requirements for navigation are fairly simple : if you click a nav image/link, hide/idle the current menu and unhide/nudge the target menu.
My sub-menus are set up such that the first image is a Home navigator. If we modify that slightly to say that the first image/link of any sub- (or sub-sub-, or whatever) menu is a Back navigator (ie. “go back to whichever menu opened this menu”) then all you need for any Back navigation is to know which menu you came from.
Therefore the click handler on a nav image/link (eg. all the top menu ones, and any sub-menu one that opens a sub-sub-menu) has to do one extra thing to the target menu : as well as doing an unhide/nudge, simply store the ‘current menu’ somewhere on the ‘target menu’ (eg.
$('#targetMenu').data('opener', thisMenu);). Then the click handler on any Back image can simply determine the target menu from$(thisMenu).data('opener');.The ‘opener’ doesn’t even have to be stored on the menu : it might be better to store it on the Back image/link itself, eg
$('#targetMenu .backLink').data('opener', $(this).closest('.jqDocked'));to set it, and$(this).data('opener')for the Back image/link to retrieve it.Going forward is a lot harder to be generic about, because it very much depends on your menu structure and how you detemine which sub- or sub-sub- (or whatever) menu to open when a particular nav image/link is clicked. You could use the html structure, or classes, or ids with increasing levels of numbering (#sub_1, #sub_1_1, #sub_1_1_1, etc) … there are so many ways of defining a ‘menu structure’, but whichever one you pick it should be possible to determine the target menu from any clicked-on nav image/link without having to assign different click handlers to each one.
I realise that this response may not be as specific as you would have liked, but I hope it helps.
Hi,
I need to incorporate a slider under the above example but not able to control its width? How can we do that please advise?
Thanks & Regards,
Ankur
I don’t know which example you are referring to, and I’m unsure which width you are “not able to control” : the example (or some part thereof) or the slider?
Not knowing anything about the slider, or what it needs to match (in terms of width), I suggest initialising the jqDock, and then inspecting div.jqDockWrap or div.jqDock. You could then try simply appending your slider to one or other of those (making a suitable adjustment for height) with a width of 100%?