MenusLesson 47Free preview

Curtain Menu

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of the Curtain Menu (Expanding Curtain Navigation). This menu opens a full-screen navigation layer with dramatic animation as if opening a stage curtain, stretching the width of the element from 0% to 100% with large navigation text in the middle of the screen.

Key points

Curtain overlay using position: fixed, height: 100%, width: 0%, and high z-index
Open the menu by setting style.width = "100%" through JavaScript
Applying CSS transition: 0.5s width for animation opens a magnificent curtain
Close the curtains by returning style.width = "0%" when the cross button or link is clicked

Full lesson

Code examples and quizzes

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