Draggable Menu with Image Grid Previews

A draggable inline menu with a scattered thumbnail preview of an image grid.

By in Playground on
Demo Code

After our little draggable image strip experiment, we wanted to explore using the dragging functionality on a menu. The idea is to show a large inline menu with some scattered thumbnails. The menu can be dragged and while doing so, the thumbnails get moved with an animation. Each menu item also changes the letters to show an outlined version. When clicking on the “explore” link under a menu item, the thumbnails move and enlarge to form a grid.

The animations are powered by TweenMax and we use Dave DeSandro’s Draggabilly.

Attention: Note that the demo is experimental and that we use modern CSS properties that might not be supported in older browsers.

The initial view looks as follows:

DraggableMenu_01

When clicking on the explore link, we animate all thumbnails to their place in a custom grid.

DraggableMenu_02

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

You can see it in action here:

DraggableMenu.2019-06-19 10_45_16_optimized

We hope you enjoy this menu and find it useful!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

How to Code a Subtle Shader Background Effect with React Three Fiber

Server-first Web Components with DSD, HTMX, and Islands

Reflection Scroll Effect

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!