DDM Menu Prototype

Left Menu

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Another Left Menu

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Requirements

Push the page over.
Smooth (enough) animation.
Disable vertical scrolling when open.
Disable horizontal scrolling when open.
Maintain page scroll position through opening and closing.
Must play well with fixed position elements on screen.
Reset scroll within the menu to top when opening a second time.
Click outside to close (clicks should not trigger anything on the page, just close the menu).
Menu scrolls independent of page.
Smooth scrolling.
Needs to be easy to pop back into page
Option to position menu on the right
Multiple menus on same page operate independently
Option to teardown menu at any point

Issues

Answer backward compatibility questions.
Technical annoyance: Header, Menus, and content, as well as other fixed position elements, animated separately, rather than the animation being controlled on a single parent element.
Android 2.3.5 Stock Browser: Menu not scrollable (But Android Firefox on Android works perfect; don't have a clue how to fix this without getting complicated (css-transform translate instead of overflow auto/hidden)).
~~Mobile Safari: Address bar opens when the menu opens.~~
~~Desktop Browsers (Firefox, Chrome, Safari, IE8): Page is scrollable.~~
~~Mobile Safari: Scroll bounce on page after scrolling past end of menu.~~
~~Background color on menu doesn't extend into overscroll area.~~
~~Scrollbar detached from menu.~~
~~Overlay on menu open to catch clicks.~~
~~Public interface doesn't match current ddm-menu version (function call, event names, methods, namespaces).~~

Tested Browsers

Desktop

Safari
Chrome
Firefox
IE8, Windows XP
IE11

iPhone 6 Plus

Safari
Chrome

Windows Mobile 8.1

Stock

Android 2.3.5

Stock
Firefox

Android 5.0.1

Chrome

iPhone 4s

Safari

Android 4.0

Stock

Teardown Menu

DDM Menu has a teardown method that removes all ddm-menu styling and functionality.

Teardown Menu

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Dummy Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis

Fin

Menu Demo

Requirements

Issues

Tested Browsers

Desktop

iPhone 6 Plus

Windows Mobile 8.1

Android 2.3.5

Android 5.0.1

iPhone 4s

Android 4.0

Teardown Menu

Dummy Content