Inline Menu Layout with Gallery Panel

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

From our sponsor: Jamf Now sets up and secures your team's Apple devices so you can get back to more creative work.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.