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!

( found)Highlight by Tags :

Call jqDock() with no overriding options at all, ie. options all have their default values.

Share

Horizontal menu placed at the top edge of the page, with align set to ‘top’, and labels enabled (at the default position)

Share

Horizontal menu at the bottom edge of the page, with align set to ‘bottom’, and labels enabled (at the default position)

Share

Vertical menu against the left-hand edge of the page, with align set to ‘left’, and size set to 60.

Share

Vertical menu against the right-hand edge of the page, with align set to ‘right’, and labels enabled (at the default position).

Share

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.

Share

Vertical menu, with align set to ‘center’, labels enabled – positioned at bottom-right (‘br’) – and an inactivity timeout of 4 seconds.

Share

Horizontal menu with ‘middle’ alignment. The images’ ‘alt’ attributes are used to provide alternative images for the expansion.

Share

Horizontal menu with ‘middle’ alignment. Alternative images for the expansion are provided via a javascript function as the ‘source’ option.

Share

Horizontal menu with ‘middle’ alignment. Instead of an immediate ‘show’ the menu is set to fade in over 2 seconds.

Share

Horizontal menu consisting of linked images (images within anchors), with ‘middle’ alignment, and labels enabled (‘tr’).

Share

Vertical menu in a ‘fixed’ position against the left-hand edge of the page, with ‘left’ alignment.

Share

Horizontal menu with ‘middle’ alignment. The distance option is extended to be half the width of the ‘at rest’ menu.

Share

Horizontal menu of mixed link and images, with ‘middle’ alignment, and labels enabled (‘tr’). Images are given extra padding.

Share

Horizontal mixed menu, with ‘middle’ alignment, and labels enabled (‘tr’). Images are padded, and distance is extended to compensate.

Share

A more complex example, demonstrating the facility to change a menu item’s image post-initialisation (in this case, by clicking the buttons).

Share

Switches image source paths based on an ‘enable/disable’ checkbox, and has ‘current option’ styling.

Share

Horizontal menu with ‘middle’ alignment. The dock has a full border, using images with a transparent background.

Share

Horizontal menu with ‘top’ alignment. The dock is styled with a background and partial border.

Share

Horizontal menu with background and border styling applied to the dock’s wrapper – which provides a static background instead of a moving one.

Share

Horizontal menu with a background and bottom border applied to the original menu element instead of elements added by jqDock.

Share

Horizontal menu with background and border styling applied to the dock’s wrapper, fadeLayer set to ‘dock’, and fade in over 2 seconds.

Share

Horizontal menu with a background and bottom border applied to the original menu element, fadeLayer set to ‘wrap’, and fade in over 2 seconds.

Share

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.

Share

Horizontal menu, with styled dock; 7 second idle period, after which the dock fades out, reinstated by mouseover of the faded-out dock.

Share

Horizontal menu, with styled wrapper; 7 second idle period, after which the dock fades out, reinstated by mouseover of the wrapper.

Share

Horizontal, styled menu; 6 second idle period, after which the entire menu fades out, reinstated by mouseover. (Note IE’s opacity requirements)

Share

Horizontal menu; 6 second idle period, after which the dock slides up, reinstated by mouseover of the original menu element.

Share

Horizontal menu; 7 second idle period, initiating a slide up, reinstated by mouseover of a custom element prepared on ‘dockshow’.

Share

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.

Share

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().

Share

Horizontal menu with labels : image titles have no HTML (for W3C validation) and the labels are formatted in a function supplied as setLabel option

Share

Horizontal menu with labels : labels are positioned off the bottom of the images, and are also coloured using the setLabel option

Share

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.

Share

Horizontal menu in top-left corner, with ‘flow’ enabled; menu and surrounding elements are floated left.

Share

Horizontal menu (of links), which can be frozen by clicking any image; clicking again un-freezes it.

Share

Horizontal menu, with sub-menus set up as labels using the setLabel option.

Share

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.

Share

Horizontal menu (of links) at the top, vertical menu on the right, both with labels enabled.

Share

Horizontal and vertical menu : the vertical menu is completely and solely controlled by the horizontal menu (of links).

Share

Five horizontal menus, each with 5 elements and a 1 second fade-in. The loader option can be changed to test against different browsers.

Share

Horizontal menu of links, with the links actually active (ie. not intercepted by my default click handler!) and calling other examples.

Share

Vertical menu with ‘center’ alignment, where the bias is set for 25% expansion to the left, 75% right, instead of the default 50/50.

Share

Horizontal menu with ‘middle’ alignment, where the bias is set for 20% expansion at the top, 80% bottom, instead of the default 50/50.

Share

Horizontal menu of links with ‘top’ alignment, using setLabel to set and permanently show labels, *without* setting the ‘labels’ option!

Share

Horizontal menu of images with ‘top’ alignment, using setLabel to set and permanently show labels, *without* setting the ‘labels’ option!

Share

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.

Share

Horizontal menu of links with ‘top’ alignment. Similar to the preceding ‘jigsaw’ example, but with labels enabled at mid-centre.

Share

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.

Share

HTML5 version of preceding example, utilising ‘data-‘ attributes to set options, and calling $( ).jqdock() instead of $( ).jqDock().

Share

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.

Share

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.

Share

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)

Share

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)

Share

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)

Share

I was asked if it was possible to sit the menu on a 3D-type base, similar to another ‘Dock’ plugin for jQuery. The answer is … Yes.

Share
   

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!

Share
 Posted by at 12:59 pm

  20 Responses to “Examples”

Comments (20)
  1. 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.

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

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

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

  5. Thank you!

  6. Nice plugin…

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

  8. jqdock submenu items is compatible with HTML5 draggable???

  9. how can i use this on visualforce page

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

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

  12. How do I implement a remove circle kinda like notification style inplace on title span

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)