UI Details – Horizontal Overlay Navigation

Horizontal Overlay Navigation

Good example of a left side fly-out overlay style navigation. The links to sub pages are bold and pretty much the only option once you discover the nav is there via the hamburger icon.
Source

Horizontal Overlay Navigation

Another left-side fly out menu. In this design they cover the entire page content and have a neat little interactive menu design. They’ve put the word “home” right next to the hamburger icon too to help reinforce where that leads you.
Source

Horizontal Overlay Navigation

This interaction is cool, because it all starts with the placement of that hamburger icon. The layout of the page is such that your eye is drawn almost instantly to it. It’s hard to miss, which helps lead you directly into interacting with the sub nav below it.
Source

Horizontal Overlay Navigation

Here’s an example of an overly minimal approach to using the hamburger nav. I can only assume the #1 thing they want you to do is watch the video first, then explore. I’m not a huge fan of it but it’s a great example of this minimal usage.
Source

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More News & Articles

Sign-Up: Enhancing Conversions through good UX

Sign-Up: Enhancing Conversions through good UX

Optimize your website’s sign-up process by focusing on clarity, ease, and user mindset. Clearly explain the purpose, benefits, and steps, and use social proof to build trust and drive conversions.

The Essential Guide to Getting Started on Freelance Writing

The Essential Guide to Getting Started on Freelance Writing

Explore the lucrative and fulfilling world of freelance writing with our essential guide. Learn about specialties like blogging, social media, article, and technical writing. Build a portfolio, find work, set up your business, and discover the potential earnings. Embrace the freedom of working from home and follow tips for success in your dream career.

EMAIL NEWSLETTER