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
Threadslike →
Ready Set Rocket →
Pavel Proshin →
KLM's – Flat or Not →
Rokkan →
Brad Haynes →
Teehan+Lax →
Virgin America Elevate Login →
Not Complex →
Related Posts
- 10 CSS & JavaScript Code Snippets for Creating Responsive Navigations
- 30 Simple Responsive Navigation Solutions & Tutorials
- Tiny Details: A Look at Hamburger Menu Reveal Transitions
- 10 Innovative Navigation Examples in Mobile App Design
- 30 Fantastic Examples of Fixed Navigation Menus in Web Design
- How to Create Responsive Off-Screen Menus with CSS3
- Exploration of Single Page Navigation Systems
- 40 Effective Examples of Responsive Website Layouts
- How to Create a Full Width Responsive Tiled Menu with CSS
- Exploring the Use of Sticky Vertical Navigation in Web Design