Line25

30 Web Designs Featuring Pop Out Navigation Menus

Read the full post

Once upon a time navigation menus were constantly anchored in place along the top or side of a web design, but nowadays as Javascript and CSS animations are becoming more popular, we’re starting to see different UI approaches when it comes to directing your users to where they want to go. The “hamburger” icon has become the recognised metaphor for menu, which allows designers to hide away their links until they’re needed. Today’s post features 30+ modern website designs which make use of pop out navigation, these sites cleverly bring the menu into view using slide-in or overlay effects.

Hanno

Hanno

Visage

Visage

Digital Telepathy

Digital Telepathy

Medlio

Medlio

Alto Labs

Alto Labs

YOOBIC

YOOBIC

Deux.is

Deux.is

fragrance.ly

fragrance.ly

The Blnce

The Blnce

Emmy Twenty Shoes

Emmy Twenty Shoes

Huge.

Huge.

Planetary

Planetary

VHX

VHX

H. Creative Group

H. Creative Group

Griflan Design

Griflan Design

Jim Ramsden

Jim Ramsden

Soundslice

Soundslice

James McGill

James McGill

INCORE

INCORE

Web Design Field Manual

Web Design Field Manual

Keegan Burkett

Keegan Burkett

TOWA

TOWA

Sporting Edge

Sporting Edge

Fjord Trends

Fjord Trends

Whil

Whil

Vity’s Design

Vity's Design

Muse

Muse

Lightfoot & Wolfville Vineyards

Lightfoot & Wolfville Vineyards

Cobble Hill

Cobble Hill

CUPP Computing

CUPP Computing

OwnerListens

OwnerListens

Chris Davis

Chris Davis

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

16 Comments

  1. Victoria says:

    Great collection! I thought that pop up menues, as any pop ups always look annoying, but after seeing these designs, i agree that there are ways to make stylish and professionally looking pop ups

  2. Tom Durkin says:

    Great list as usual! Not only is there some great nav inspiration, the designs are amazing too!

  3. .. just take a look at that cool off-canvas sliding nav menu on http://rajtoral.com .. BOOM!

  4. You done different in favor of blog creation and make menu in different style. Thanks for your collections.

  5. Justin says:

    Thanks for the great examples. Now I know what web design trend our clients will be begging for over the next six months (even if it’s not appropriate for their site).

  6. Chris says:

    Thanks for the feature! Some great examples here :)

  7. Steffen says:

    There is also a great codrops tutorial on how to create those overlays:

    http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/

  8. Teelah says:

    I really like the idea of pop up menu navs like these. Designers use to be all about putting the nav somewhere really accessible and easy to find. A good user experience would help clients navigate but sometimes this means it should just be clean and concise. These are really great, thanks for sharing!

  9. Pop out navigation bars usually go unnoticed, don’t you think? Its a great idea to save some space on page and looks clean. But will it attract clicks often?

  10. The user experience will be amazing and the site will look a lot cleaner :) The designs are great as usual.

  11. Colegio bilingüe says:

    Great collection, i might use one of those ideas to my site. Thanks

  12. Hi dear
    i really intrested in yout sites post!
    you are perfect !
    Thanks very mutch

  13. Niki Singh says:

    Great designs! I think I saw a few of them on awwwards.com. thanks for sharing with us.

  14. Chris,

    So timely this is something we are running into especially on the app side.

    Thanks

    Joe Costantino

    http://www.einsteinseyes.com

  15. jasmine says:

    What a great collection… The idea of having a main menu with banner in the background got my attention….. this concept sounds good and may also break the monotony of having a menu at the top or side of the page…

  16. Allen Robert says:

    I like Medlio and Towa’s featuring pop out navigation menu designs they are really great and I will use them in my next projects. Thanks for sharing.
    Web Design Our Services

Sorry, comments are now closed