This demo is for a simple responsive mobile menu. The navigational menu is full width for larger screens. When the screen is narrowed past a width of 775px, the full width navigational menu is hidden and a small icon is added. The icon is the well known icon for expanding a menu, sometime referred to as the "hamburger icon".

When the menu icon is clicked upon, the dropdown version of the same menu appears. Click again, the menu disappears.

Their is only one menu in an unordered list, it is simply styled according to which class has been applied.

This functionality is achieved with jQuery methods of: click(), resize(), width(), show(), hide(), addClass(), and removeClass().

Click here to see this demo in a separate browser window