fter using pre-rolled scripts and simple jQuery commands for several years, I decided to design and build a custom jQuery powered navigation bar. I'm quite sure my attempt could be improved upon considerably, but as far as I can tell, my humble attempt almost works.

Here's a Fiddle of my creation so far: https://jsfiddle.net/8boqt6n9/ 

• Opening the hamburger menu works as intended, exposing the main navigation
• Clicking the second or third menu item works as intended (exposing the sub-navigation)
• Closing the hamburger menu at any time closes both levels (boy that was a trip)

Issues I can't resolve:

• If you open a menu item that has a submenu, I add a class to a wrapper div that acts as a background for the submenu. This is the only way I could get the markup as semantic as I wanted and have the expanded submenu centered within a wrapping element that was 100% wide. What I can't figure out is how to NOT have the wrapper expand on menu items that DON'T have a submenu (see menu item one).
• The only other issue I can see is that if I click a menu item in the sub-navigation level, the sub-navigation closes. At this point the DOM will change pages, so it's not the end of the world, but I'd rather nothing happen to the menu post-click there.

Thanks in advance for any suggestions!