COMPANY BLOG & NEWSROOM

12Nov

Our Faves: Top 10 Navigation Menu Effects

menu_effects

Are you looking for inspiring effects and interaction ideas for your site? Well, we’ve put together a collection of some of the most creative and fresh navigation menu demos and tutorials. Enjoy!

Greedy Navigation

See the Pen Greedy Navigation by lukejacksonn (@lukejacksonn) on CodePen.

This is a great way to handle a responsive menu. With just a little JavaScript, you’ll get a menu that stacks items into a dropdown when they overflow. Not only that, but a hamburger style button with a badge count appears when there are hidden items to reveal. Luke Jackson calls it Greedy Navigation—we call it genius.

One Page Navigation

See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.

If you are looking for a simple one page navigation to access different sections, and if you want transitions with pure CSS, then look no further. This One Page Navigation Menu is super clean, super neat, and super cool!

Oooey Gooey Menu Effect

See the Pen svg goo effect demonstration by Lucas Bebber (@lbebber) on CodePen.

Lucas Bebber offers a perfect explanation of how SVG filters work, including how to use them to create a fun, gooey navigation menu effect. Check out the full tutorial here.

Responsive Navigation Ideas

See the Pen Responsive Navigation Ideas by Andrzej Dubiel (@dubiel) on CodePen.

Here you’ll find six different ways to turn plain old hamburger menus into something exciting. Simple hamburgers and a couple of plus icons flip, rotate, and transform into menus with just a few lines of JavaScript! No need for fries and a shake with these burgers—they are a visual feast in and of themselves.

Navigating the Vertical Design

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

Here’s another way to tackle one page navigation when you’re working with a vertical scrolling layout. This menu starts with a simple hamburger icon and expands into vertical navigation with cool, bouncy animation. The scrolling effect is just as good.

Responsive Sidebar Navigation

dashboard This is an awesome responsive solution for big, complex sites like dashboards and admin areas, with many sub-categories in the menu. It’s neat, elegant, and intuitive. Just give it a try!

Flat Navigation

See the Pen Flat Navigation by Andy Tran (@andytran) on CodePen.

Are you looking for a simple menu with more classic lines? If so, then check out this flat menu concept by Andy Tran and prepare to get inspired. All it takes is a little JavaScript and CSS under the hood to make this menu purr.

Flexbox Menu with Animation

See the Pen Lovely Flexbox Navigation Menu With Animation by Tomas Liashuk (@MyCarrera) on CodePen.

The beauty of a flexbox menu is that you can easily design for items to take up as much space as they need. Flex items grow, shrink, and wrap as needed. This menu shows just how easy it is to combine all the awesome flexbox features with animation for a truly remarkable menu. If you want to learn more about flexbox, check out this tutorial.

Stacked Navigation

stacked If you thought the Stacked Navigation over on Dribble was cool, then you’re going to love this demo! To activate the stacked menu, click the icon in the upper left corner. The navigation is provided by a collection of 3D pages that appear at the bottom of the screen. Then the next two pages are behind the current page in a stack. Clicking on a menu item calls the respective page up. This creative use of JavaScript — along with some modern CSS properties — has us saying “Deal us in!”.

Bulb Style Navigation Menu

See the Pen Bulb Style Navigation Menu by Brady Sammons (@soulrider911) on CodePen.

Here’s another great navigation idea that makes good use of flexbox. This main menu design also uses the CSS :pseudo element to create bulbs for a nice subtle interaction. Add a bit of color change to the background and hover, and you’ve got the base for a super bulb style main menu!

That’s it! We hope you’ll find this roundup of demos as fresh, innovative, and exciting as we do. If you have any comments or suggestions for our future articles, please let us know. We’d love to hear from you!

leave a comment

All posts Back to top