Drip Drop Navigation Menu

Go to Source

See the Code
See it Full Page
See Details

Goal: To create a navigation bar with animation that feeds directly into loading page content.

Goal Achieved: There are some minor tweeks that could be done, but I'd classify them all as design related, and those would likely change based on the branding of whatever would use this anyways. Aside from design changes, in a real use case I would swap out the content using Ajax instead of just showing and hiding sections.
I found that the animation chugged on mobile devices due to the svg filtes, so for smaller screens the filter is turned off. This makes the drop non-gooey, but the rest of the animation and interactivity is intact.

This Pen uses: Jade, Sass, JavaScript, and