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!

Tagged with:

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

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!