MenusLesson 21Free preview

Hover Sidenav Buttons

This lesson is part of How To · All levels

Summary

This lesson reviews the making of the Floating Side Buttons (Hover Sidenav Buttons). The set of navigation buttons is partially hidden beyond the boundary of the left edge of the screen and will slide out dynamically as the mouse cursor hovers over it.

Key points

The key is given position: fixed with negative left value (example: left: -80px)
When you hover, the left property transitions to 0px so the button slides full.
Apply different background coloring for each button category (Blogs, Projects, Contacts)
Provide quick shortcut access to popular pages without consuming the page's visual space

Full lesson

Code examples and quizzes

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