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

Looking Fast: The Art of Website Speed Perception

Looking Fast: The Art of Website Speed Perception

In the web world, technical speed and user perception matter. By improving design for a faster appearance, you boost conversions and stand out online. Speed isn’t just loading time; it’s perception.

Designing for Errors: Creating User-Friendly Contingency Plans

Designing for Errors: Creating User-Friendly Contingency Plans

Contingency Design hinges on empathy, understanding user frustration, and transforming errors into positive impressions. By embracing these principles, you enhance user experiences, retain customers, and boost revenue in the competitive digital landscap

EMAIL NEWSLETTER