Examples
Unless otherwise indicated, the examples provided below use the ‘latest’ version of jQuery, have a doctype of XHTML 1.0 Transitional, and use a menu consisting of images only (less code to type!).
Where a jqDock version number is indicated (top right corner of a box, in red) it refers to the minimum version required for the functionality that the example illustrates. It does not take into account any bugs fixed in subsequent versions.
CSS, Javascript and HTML snippets are provided on the pages themselves, but only the bits directly relevant to the example are displayed; if you wish to see the entire code, open an example up in a new browser tab and inspect it at your leisure.
Please bear in mind that these examples are literally just that … examples! It is extremely unlikely that they will even come close to matching any real-life scenarios you may have, but they are merely intended to illustrate some of the options available, and provide hints for their use.
Warning : Some of the examples have been specifically styled for a 700×400 display frame (‘page’), so displaying them in a full size browser window may not position the menu exactly where expected.
If you take a copy of an example, please remember to remove my example.js file from your page – or your links will not work!
|
|
|
|
|
|
|
|
|
|
1.3Fade in | |||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Call jqDock() with no overriding options at all, ie. options all have their default values.
Horizontal menu placed at the top edge of the page, with align set to ‘top’, and labels enabled (at the default position)
Horizontal menu at the bottom edge of the page, with align set to ‘bottom’, and labels enabled (at the default position)
Vertical menu against the left-hand edge of the page, with align set to ‘left’, and size set to 60.
Vertical menu against the right-hand edge of the page, with align set to ‘right’, and labels enabled (at the default position).
Horizontal menu, with align set to ‘middle’, size reduced to 36, and labels enabled – positioned at top-center (‘tc’), and styled with color and background.
Vertical menu, with align set to ‘center’, labels enabled – positioned at bottom-right (‘br’) – and an inactivity timeout of 4 seconds.
Horizontal menu with ‘middle’ alignment. The images’ ‘alt’ attributes are used to provide alternative images for the expansion.
Horizontal menu with ‘middle’ alignment. Alternative images for the expansion are provided via a javascript function as the ‘source’ option.
Horizontal menu with ‘middle’ alignment. Instead of an immediate ‘show’ the menu is set to fade in over 2 seconds.
Horizontal menu consisting of linked images (images within anchors), with ‘middle’ alignment, and labels enabled (‘tr’).
Vertical menu in a ‘fixed’ position against the left-hand edge of the page, with ‘left’ alignment.
Horizontal menu with ‘middle’ alignment. The distance option is extended to be half the width of the ‘at rest’ menu.
Horizontal menu of mixed link and images, with ‘middle’ alignment, and labels enabled (‘tr’). Images are given extra padding.
Horizontal mixed menu, with ‘middle’ alignment, and labels enabled (‘tr’). Images are padded, and distance is extended to compensate.
A more complex example, demonstrating the facility to change a menu item’s image post-initialisation (in this case, by clicking the buttons).
Switches image source paths based on an ‘enable/disable’ checkbox, and has ‘current option’ styling.
Horizontal menu with ‘middle’ alignment. The dock has a full border, using images with a transparent background.
Horizontal menu with ‘top’ alignment. The dock is styled with a background and partial border.
Horizontal menu with background and border styling applied to the dock’s wrapper – which provides a static background instead of a moving one.
Horizontal menu with a background and bottom border applied to the original menu element instead of elements added by jqDock.
Horizontal menu with background and border styling applied to the dock’s wrapper, fadeLayer set to ‘dock’, and fade in over 2 seconds.
Horizontal menu with a background and bottom border applied to the original menu element, fadeLayer set to ‘wrap’, and fade in over 2 seconds.
Horizontal menu with a background and bottom border applied to the original menu element, faded in over 2 seconds with fadeLayer left at its default.
Horizontal menu, with styled dock; 7 second idle period, after which the dock fades out, reinstated by mouseover of the faded-out dock.
Horizontal menu, with styled wrapper; 7 second idle period, after which the dock fades out, reinstated by mouseover of the wrapper.
Horizontal, styled menu; 6 second idle period, after which the entire menu fades out, reinstated by mouseover. (Note IE’s opacity requirements)
Horizontal menu; 6 second idle period, after which the dock slides up, reinstated by mouseover of the original menu element.
Horizontal menu; 7 second idle period, initiating a slide up, reinstated by mouseover of a custom element prepared on ‘dockshow’.
Horizontal menu; 6 second idle period, initiating a slide up and lock; locked menu must be ‘unlocked’ before it can be slid back into view.
Horizontal menu, initially out of sight; 7 second idle period, initiating a slide up and fade, reinstated by mouseover of custom element prepared in onReady().
Horizontal menu with labels : image titles have no HTML (for W3C validation) and the labels are formatted in a function supplied as setLabel option
Horizontal menu with labels : labels are positioned off the bottom of the images, and are also coloured using the setLabel option
Vertical menu on left-hand edge, with ‘flow’ enabled; the dock no longer takes up its maximum (fully expanded) required space, and does not auto-center.
Horizontal menu in top-left corner, with ‘flow’ enabled; menu and surrounding elements are floated left.
Horizontal menu (of links), which can be frozen by clicking any image; clicking again un-freezes it.
Horizontal menu, with sub-menus set up as labels using the setLabel option.
Horizontal menu of links, with an initially ‘active’ item. The dock is asleep at the start (onReady returning false), and the ‘active’ item can be toggled by clicking.
Horizontal menu (of links) at the top, vertical menu on the right, both with labels enabled.
Horizontal and vertical menu : the vertical menu is completely and solely controlled by the horizontal menu (of links).
Five horizontal menus, each with 5 elements and a 1 second fade-in. The loader option can be changed to test against different browsers.
Horizontal menu of links, with the links actually active (ie. not intercepted by my default click handler!) and calling other examples.
Vertical menu with ‘center’ alignment, where the bias is set for 25% expansion to the left, 75% right, instead of the default 50/50.
Horizontal menu with ‘middle’ alignment, where the bias is set for 20% expansion at the top, 80% bottom, instead of the default 50/50.
Horizontal menu of links with ‘top’ alignment, using setLabel to set and permanently show labels, *without* setting the ‘labels’ option!
Horizontal menu of images with ‘top’ alignment, using setLabel to set and permanently show labels, *without* setting the ‘labels’ option!
Horizontal menu of links with ‘top’ alignment. Uses clear images as the main elements, and the setLabel option to append other images directly to the link.
Horizontal menu of links with ‘top’ alignment. Similar to the preceding ‘jigsaw’ example, but with labels enabled at mid-centre.
Horizontal & vertical menus of links, with a ‘top’ level activating 1 or more of 3 ‘sub-levels’. Out-of-sight menus are positioned outside the viewport.
HTML5 version of preceding example, utilising ‘data-‘ attributes to set options, and calling $( ).jqdock() instead of $( ).jqDock().
Wide horizontal menu, using background images, and a slider to move the menu left/right. onReady is set by overriding the defaults, rather than from options.
The only difference between this and an earlier example (Multiple horizontal menus, with selectable loader) is that there is virtually no gap between rows here, and an expanding image overlaps the neighbouring rows.
Uses ‘data-‘ attributes and the jqDockAuto class to get jqdock to automatically initialise the menu. No extra javascript required! (This is new functionality introduced in v2.0)
This takes an unordered list (UL) that has ‘data-‘ attributes and a jqDockAuto class, and automatically runs jqdock on it. A new menu is constructed from the list – one that jqdock can work with – and is displayed. (This is new functionality introduced in v2.0)
This is another list example, primarily to demonstrate that destroying a list returns it to its initial state. The list is not hidden, and you get to create it, and destroy it, at will. (This is functionality introduced in v2.0)
I was asked if it was possible to sit the menu on a 3D-type base, similar to 
Very basic example of how it’s possible to manipulate menu items by destroying the Dock (requires v2.0+), changing it, and then re-initialising it. I’ve used a list, but the same principles apply for non-lists. Note that care needs to be taken with styling in order to get seamless transition between docked and undocked!
Hey, nice plugin. did u ever came across the idea to make it work on mobile-devices ? I mean it whould be super-nice if we could use it with gestures, or like a slider which expands images in the center of your scrollarea.
Not sure how I missed this one, so my apologies…
Someone else has asked about ‘touch’ capability, so I think the easiest thing to do is refer to the response I gave to that enquiry : http://www.wizzud.com/jqdock/#comment-1827
good one!
Regardless, This is one incredible work!!!
Thank you very much!
Heya i am for the first time here. I found this board and I in finding It truly useful & it helped me out a lot. I’m hoping to present something again and aid others such as you aided me.
Фишка с vertical-align: midlde все-таки работает в семантической верске. Так как таблицы тоже ее часть, если используются по назначению. Я переписал бы начало, а в остальном вроде хороший материал. Кстати, пытался запостить сюда коммент с мобилы (Нокия, Симбиан, Опера-мини). Безуспешно. Сказало: нет такой страницы 🙁
Google’s Translation (Russian to English) :
“Chip with vertical-align: midlde all – actually working in the semantic verske. Since the table is also part of it, if used as directed. I copied to the beginning, but otherwise like the good stuff. By the way, tried to post the comments here with mobile phones (Nokia, Symbian, Opera mini). Unsuccessfully. Said: there is no such page”.
Well, from the above translation I can not tell whether there is a problem with jqDock or not. If you have a website URL I could look at then I might be able to help?
Regarding posting comments from a mobile phone : I have just tried the Symbian browser, and Opera Mobile, from my Nokia N8 and they both submitted a comment successfully. I can’t vouch for other mobiles and their browsers.
Hello, I took the code from an example. When I try to run it, it shows me the menu, but I can not go to the page. Shows the alert: you clicked name of the menu and not going to the link provided.
Do not include my example.js file in your page. It contains a click handler that nearly all my examples use, so that the example can be seen to be working without actually moving away from the current page.
Can be a vertical menu, with sub-menus set up as labels using the setLabel option?
Sure, just set the align option (to left, center or right) and modify the styling of my example sub-menus to suit a vertical instead of horizontal dock.
Thank you!
Nice plugin…
Nice Plugin!
How can you change the zoom out?
I’m sorry, but I don’t understand the question. Could you be a bit more specific?
There are loads of examples here, with their html, css and javascript accessible – maybe you could use one as a reference point.
jqdock submenu items is compatible with HTML5 draggable???
how can i use this on visualforce page
I’m sorry but I have no experience of VisualForce so I don’t know how it would be integrated.
How can I change the size of the menu (not pictures) as want the pictures are a great distance from one another in peace. The actual menu fills most of the page in length
when changing div.jqdockwrap how do i go around and make div responsive. i want to resize screen and to see both ends stay relative.
How do I implement a remove circle kinda like notification style inplace on title span