Inline Menu Layout with Gallery Panel

An inline menu layout with a playful hover animation and a gallery content preview panel.

Sometimes, sh*t happens. Some days ago it was one of those days for me, you know, one of those spilling coffee on your mac day without having made a backup for a month. What was I thinking? Well, I did finish up this design but lost the link to the Dribbble shot I got inspired from, so if you are the original designer, I apologize for posting this without a reference, so please let me know, I’ll fill the credits in the demo asap.

Anyhoo, this layout is just a little play with hover animations and transitioning to a new panel with a (dummy) gallery layout. I really like the trend of squeezing and squooshing images and words slightly and making them fly in and out as it gives a special dynamic to the design.

The initial view is an “inline” style menu with a hover effect that shows an image for each item.

When we click on the menu item, all items disappear with a cut-off animation and the images from the gallery appear from below, imitating that same motion.

I hope you like this little layout and the animations!

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.

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!