MenusLesson 44Free preview

Dropup

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of the Drop-Up Menu. In contrast to conventional dropdowns that open down options, the drop-down menu opens an upward-directed list box of options, ideal for a menu button in the bottom bar (bottom navbar) or footer.

Key points

Using position: absolute with bottom coordinate: 100% (or bottom: 50px)
Make sure the menu expands up without going beyond the top screen boundary
Apply the arrow icon up (fa-caret-up) as the directional signal of the animation
Avoid the problem of cutting the menu when placed near the bottom of the screen

Full lesson

Code examples and quizzes

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