magic*coffee — Off-canvas Menu

This is the first concept for an off-canvas side menu.

By clicking the Hamburger Icon / "MENU" link in the top right corner of the Demo Shop, the icon will transform to a X icon via CSS.
MENU turns into CLOSE. At the same time the side menu will push in, a transparent white background dims the unimportant content and keeps the focus straight.

It will be used by either the SHOPPING BASKET (aka. Cart) and SIGN IN (login, sign up) features.

This concept is designed to fit for almost every desktop and mobile device. (Mobile / Phone would be less wide though.)