MenusLesson 19Free preview

Fullscreen Navigation

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of Fullscreen Overlay Navigation. When the menu button is activated, a transparent or solid menu curtain layer stretches 100% to cover the entire screen viewport with large menu text in the middle.

Key points

Overlay using position: fixed, width: 100%, height: 0%, and high z-index
Open the menu by changing the height to 100% (or width from 0% to 100%)
Link content centers in the middle of the screen using position: relative and top: 25%
Delivers a dramatic navigation experience and focus on mobile applications and agency sites

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.