Clone Apple.com Mobile Menu and enhance it
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Bounty: Create a modern responsive burger menu for mobile inspired by Apple.com, based on an unfinished code.

Libraries to use:

Unfinished code and model to copy:

UNFINISHED CODE: https://codepen.io/anon/pen/BOjPGj

- Go to apple.com and see the menu mobile version (desktop version not needed).

Extra Features needed:

  • Adjust sizes. Sizes on codepen do not match sizes of apple.com

  • Menu should support multi-level navigation (allowing menus to have submenus). Currently apple.com does not support multi-level. Please add this for the left menu only.

  • Menu should have left and right panel like apple.com does (left icon opens menu on left / right icon opens menu on right). The left menu is already working on the codepen, but please make the right icon (the shopping bag) also open a menu. The right side menu should be in the same style as mac's page (white) and with icons.

  • Add micro interactions : any extra CSS animations for eye candy, or on hover and on click effects (micro interactions) to your liking.

Support:
- Should support all phones and tablets including old Safari based phones (use progressive enhancement).

awarded to MarkGrok

Crowdsource coding tasks.

1 Solution

Winning solution

Hi George, I was able to solve all the best I could except your requirement of multi level menus. I submitted the solution via private message sending you the files. Let me know if is accepted.