20 Examples of Fullscreen Responsive Menus

We’ve covered responsive navigation a number of times over the last couple of years, from off-canvas reveals and nested accordians, to the simpler <select> drop-down menu system. There really are a multitude of responsive navigation solution out there. Recently though, there has been a new trend emerging, namely the fullscreen responsive menu.

Typically activated by a hamburger button, the fullscreen menu is in it’s simplest form, an overlay that covers the entirety of the screen giving you lots of space for your menu items. It is typically used by, but not restricted to, sites with limited space as an effective replacement for the mega-menu.

If you’re looking for some interactive examples, Codrops has a created a bunch of fullscreen overlay effects that you can explore, Damon Bauer has created a fullscreen menu plugin for jQuery, and we have also published a tutorial on how to create a full-width tiled menu with CSS.

Anyway, below we have found 20 sites that use the fullscreen menu effectively, here they are:

Examples of Responsive Fullscreen Menus

Huge →
Huge fullscreen responsive navigation example site

Threadslike →
Threadslike fullscreen responsive menu example site

Square →
Square fullscreen responsive navigation example site

Ready Set Rocket →
 fullscreen responsive menu example site

Tictail →
 fullscreen responsive navigation example site

Zaarly Employee Handbook →
 fullscreen responsive menu example site

Reach Partners →
 fullscreen responsive navigation example site

Brooklyn Bridge Park →
 fullscreen responsive menu example site

Pavel Proshin →
 fullscreen responsive menu example site

KLM's – Flat or Not →
KLM's - Flat or Not fullscreen responsive menu example site

Plasticbionic →
 fullscreen responsive menu example site

Southpaw →
 fullscreen responsive navigation example site

EKWIP →
 fullscreen responsive menu example site

Rokkan →
 fullscreen responsive navigation example site

Brad Haynes →
 fullscreen responsive menu example site

Jim Ramsden →
 fullscreen responsive navigation example site

Teehan+Lax →
 fullscreen responsive menu example site

Virgin America Elevate Login →
 fullscreen responsive navigation example site

Sports Illustrated →
 fullscreen responsive menu example site

Not Complex →
 fullscreen responsive navigation example site

Comments

  • There is mine too : edenpulse.com ;)

  • Kath

    Hey, nice site you have there! :D

  • Murad Swaleh

    Great Inspiration.

  • Bhadresh Shiroya

    Nice Post Very Helpful :)

  • Great! Thanks for sharing :D

  • Hi there guys,

    We’re really loving these full screen menu ideas. Infact, this specific post has inspired to create a free WordPress plugin which allows a WordPress user to create one of these full screen menu effects.

    We’be be really happy if you checked it out and gave us some feedback on it – we’d be happy to make other iterations of improvements based on your feedback. For now, it only allows one specific effect, however you can customize the fonts using Google fonts, the direction of the animation and the various colors involved.

    If you want to have a look at it, reply here and we can get in touch!

    Keep up the excellent inspirational work you do :)

    David

  • Paul Prevoo

    Would love to check your fullscreen menu overlay plugin for wordpress

  • These are nice! Thanks for sharing

  • Amit Papushe Shely

    hello,
    how can i add “Not Complex” through WordPress?

  • Siju Sudheer

    :(

  • Very nice examples! Any of these using Bootstrap?

  • Nice site!