Streaming live at 10am (PST)

Trying to create Navbar with Menu that covers page (instead of sliding in)


#1

The the Navbar “dropdown” function lets us cover the entire page and let the menu slide in the from top, left and right… But what if we where able to cover the entire page (fade in and cover the screen, instead of slide in), and then just click on an empty space to close the menu.

I’ve seen this one very often – Example Menu: http://www.instrument.com/work/

I’ve been trying to recreate this one, and in the beginning I thought it would be simple (create interaction that blends in a div Block wit position on “Fixed” that covers the entire screen… or create a interaction that blends out the page content beneath, showing just the menu…
But every time I try one of both, I end up covering the links of my menu (because the menu is behind the page content, or I end up covering the links of the page content (because the menu is on top, with 0% oppacity but still covering the content with its “fixed” position and therefor blocking the links and hover effects beneath…

Any Idea how this could be solved?