Encide Side Navigation

This is my take on fully loaded side bar burger menus with sub-menus and search fields. I wanted to build a custom slide-out navigation system that would scale to support input fields, and multiple levels of hierarchy. After researching the options that were out there, I quick realized that I just needed to build this from scratch. I wanted to have a light-weight DOM structure, with mostly CSS-based animations since JavaScript/jQuery doesn’t perform as smoothly or consistently in comparison. This succinct GIF shows the end result of my rapid iteration. As with anything coded, you should really play with it live: http://encide.com/

Note: The top navigation only appears when your browser's viewport is <1280px. Otherwise, the navigation is replaced by a top navigation system with drop-down menus. You can see the top navigation on the live site or here: http://dribbble.com/shots/3029980-Encide-Top-Navigation