WMT Dock Menu Gallery — Image Gallery in a Dock-Style Panel

What WMT Dock Menu Gallery Actually Does

If you have ever used a Mac, you know the dock — that sleek row of icons at the bottom of the screen that animates when you hover over it. The icons magnify, bounce, and respond to cursor position with a fluidity that makes the interaction feel physical rather than mechanical. WMT Dock Menu Gallery brings that exact interaction model to Joomla. Not an approximation. Not a CSS imitation that falls apart on mobile. The real thing: bounce animations, smooth scaling, tooltip overlays, and icon-based navigation that makes your site feel like a native application rather than a webpage.

The module takes any Joomla menu you have already created in the backend and renders it as an animated dock panel. You do not rebuild your navigation from scratch. You do not learn a new menu manager. You point the module at an existing menu, configure the visual parameters, and your standard navigation transforms into something that visitors actually want to interact with. The transformation is dramatic — what was once a bulleted list of text links becomes a row of glowing, responsive icons that pulse under the cursor.

+

\u{201c}

The dock metaphor works because it is familiar. Hundreds of millions of Mac and iPad users already know how to interact with it. You are not teaching anyone a new interface — you are borrowing muscle memory that already exists.

But the module does more than just display menu items. It doubles as a portfolio gallery. Instead of pointing to menu links, you can populate the dock with images — photographs, design samples, product shots — and each icon opens a larger preview. This is where the "Gallery" part of the name earns its spot. It is not just a menu; it is a visual showcase wrapped in a navigation panel. A single module instance can serve as your primary navigation, a featured product carousel, and a lightbox gallery simultaneously — depending on how you configure each menu item's link target.

The visual versatility goes further. You can set a solid color background, a fully transparent one where icons appear to float on your page content, or a semi-transparent frosted-glass effect that adds depth without obscuring the content behind it. The animation engine responds to cursor position within the icon area — not just a binary hover state — so the scaling effect follows your mouse movement, creating the organic responsiveness that makes the macOS dock so satisfying to use.

Installation and First Setup

Installing WMT Dock Menu Gallery follows the standard Joomla extension workflow, but there are a few steps worth spelling out because skipping them leads to the most common support question: "Why is my dock empty?"

1. Download the module ZIP from the developer's site.
2. Go to Extensions → Manage → Install in your Joomla admin panel.
3. Upload the ZIP file. Joomla unpacks and registers the module automatically.
4. Navigate to Extensions → Modules and click New.
5. Select WMT Dock Menu Gallery from the module type list.
6. Assign it to a module position — debug or footer work best for a bottom dock; a sidebar position works for vertical mode.
7. Select the menu you want to display from the Menu Assignment tab.
8. Save and check the frontend.

Module Position Recommendations

Where you place the module changes the entire feel of the site. Here is a breakdown of positions and their effects:

Configuration Options in Detail

The module settings panel is dense but logically organized. Every visual parameter has a corresponding field. Here is what each section controls.

Icon Settings

The module uses PNG images as dock icons. This is not negotiable — JPEGs lack transparency, and GIFs lack color depth. Each menu item can have its own icon, assigned through the Link Type Options tab in the Joomla menu manager. Navigate to Menus → [Your Menu] → [Menu Item] → Link Type and set the Link Image field. Provide a title in the Link Title Attribute — this becomes the tooltip text that appears above the icon on hover.

Recommended icon dimensions:

• Standard dock: 64x64 px — crisp on retina displays, not too heavy
• Large dock: 128x128 px — for image-heavy galleries where detail matters
• Minimum: 48x48 px — anything smaller looks pixelated when the hover scale kicks in

Dock Orientation

The module supports two layouts:

• Horizontal: icons spread across a single row, left to right. This is the classic macOS dock look and it works best for main navigation and footer positions where screen width is abundant. The horizontal layout naturally draws the eye across the page in a left-to-right reading pattern.
• Vertical: icons stack top to bottom. Best for sidebar positions and inline content where horizontal space is limited. The vertical layout occupies minimal screen real estate and integrates seamlessly with blog sidebars, product filter columns, and narrow widget areas.

Switching between orientations is a single dropdown in the module settings. The animation behavior adjusts automatically — horizontal mode uses horizontal spacing calculations, vertical mode uses vertical ones. You do not need separate CSS overrides for each orientation.

Color and Transparency

The dock panel background can be a solid color set via hex code, fully transparent so dock icons float directly on top of your page content, or semi-transparent with an RGBA value for a frosted-glass effect. The transparent option is particularly effective when the dock sits over a hero image or a full-width banner. The icons appear to float on the photograph, creating a layered depth effect that flat CSS menus cannot replicate.

Animation Behavior

The dock animation has three tunable parameters. The scale factor on hover controls how much the icon enlarges when the cursor moves over it — default is 1.5x and values above 2.0x look comical. Neighbor scaling makes adjacent icons also scale up slightly, creating a ripple effect that makes the dock feel organic. Finally, animation speed measured in milliseconds controls how fast the transition happens — under 100ms looks jittery, over 500ms feels sluggish.

Comparison with Other Joomla Menu Modules

Joomla ships with a default menu module that renders unordered lists. It works. It is accessible. It is also visually identical to every other Joomla site on the internet. Here is how WMT Dock Menu Gallery stacks up against common alternatives:

The key differentiator is not the icon support — several menu modules offer that. It is the animation model. Every other module in the table animates via CSS transitions triggered by hover pseudo-classes. WMT Dock Menu Gallery uses JavaScript-driven scaling that responds to cursor position within the icon area, not just binary hover states. This creates the fluid, organic feel that CSS alone cannot produce.

Use Cases

Photography Portfolio

A photographer installs the module at the bottom of their homepage. Each icon is a PNG thumbnail of a gallery category: weddings, portraits, landscapes, events. Hovering scales the icon and shows the category name. Clicking opens a lightbox with the full gallery. The dock replaces both the navigation menu and the thumbnail grid — two interface elements collapsed into one elegant component.

Product Showcase

An online store uses the vertical dock in the sidebar. Each icon represents a featured product with the product name and price shown as a tooltip. Clicking navigates to the product detail page. The visual presentation makes product discovery feel like browsing a physical catalog rather than scrolling a list. The floating icon row draws attention without competing with the main content column.

Team Directory

A corporate site displays team member photos in the dock. Each photo icon has the employee name as a tooltip and clicking opens a bio page or a contact form. This approach is infinitely more engaging than a grid of headshots with text underneath. The hover animation creates a sense of interactivity that static layouts cannot match.

Performance Considerations

The JavaScript animation runs on requestAnimationFrame, which means it synchronizes with the browser's paint cycle. On modern hardware, the performance cost is negligible — the animation uses GPU-accelerated transforms that bypass the CPU layout recalculations entirely. On older mobile devices, a dock with 15+ icons can cause frame drops during rapid cursor movement, but for typical use cases of 5-10 icons, the performance impact is imperceptible.

To optimize, compress PNG icons using TinyPNG or ImageOptim so a 64px icon stays under 5 KB. Limit dock icon count to 5-10 items, which is the sweet spot for both aesthetics and performance. Use sprite sheets if the module supports them, reducing HTTP requests from one per icon to a single request. If the dock sits below the fold, defer its JavaScript initialization so it does not block the initial page render.

Common Issues and Troubleshooting

Icons Not Appearing

Triple-check the image path in the menu item's Link Type Options. Joomla stores image paths relative to the site root by default. If you entered an absolute filesystem path, the browser will not resolve it. Use paths like images/icons/home.png — never /var/www/html/images/icons/home.png. Also verify that the image file actually exists in the specified location and that file permissions allow the web server to read it.

Dock Overlaps Content

This is a z-index issue. The dock uses a relatively high z-index by default so it floats above page content. If your template has elements with z-index values in the thousands — common in themes with sticky headers or modal overlays — the dock may get buried. Add a custom CSS rule setting .wmt-dock-container z-index to 9999 with position: relative.

Animation Choppy on Mobile

Disable the hover animation on touch devices. Touch screens do not have hover states, so the animation serves no purpose and only wastes GPU cycles. Add a media query that sets the animation duration to zero for devices with pointer: coarse. This also prevents accidental icon magnification when users scroll past the dock on a touchscreen.

When Not to Use the Dock Module

The dock module is not a universal replacement for your main navigation. If your menu items have long labels that cannot be represented by an icon alone, the visual metaphor breaks down. Visitors need to understand what each icon means without guessing. If your site requires multi-level navigation with nested dropdowns, the dock cannot support that — use a traditional menu for the primary hierarchy and keep the dock for a secondary quick-access bar. For accessibility-critical sites where screen reader compatibility is mandatory, icon-only navigation requires careful ARIA labeling that the module may not provide out of the box. In these cases, the dock works best as a supplementary visual element rather than the sole navigation method.

FAQ — Frequently Asked Questions