search

fabric8-ui / fabric8-ux

Design Links
https://uxd.fabric8.io/
Apache License 2.0
9 stars 9 forks source link

HTML/CSS: Navigation prototype #2 - Mega Menu Desktop with Bottom mobile nav #899

Closed catrobson closed 6 years ago

catrobson commented 6 years ago

Create a HTML/CSS prototype in a local environment that can be posted to a rawgit for demoing to the team following the designs found here: https://redhat.invisionapp.com/share/29EZHR8N3#/screens/269560197

AdamJ commented 6 years ago

GitHub repository for prototype: https://github.com/mindreeper2420/megamenu

Rawgit URL for prototype: https://rawgit.com/mindreeper2420/megamenu/master/index.html

AdamJ commented 6 years ago

To view the mobile navigation, shrink the browser down to 900px in width (or below). If visited on a mobile device, the user will automatically be shown the mobile view.

AdamJ commented 6 years ago

Desktop View:

screen shot 2018-03-02 at 12 44 34 pm

Mobile View:

screen shot 2018-03-02 at 12 44 44 pm
AdamJ commented 6 years ago

Improved animations of the menus by making the megamenu appear faster and the mobile menu now moves from bottom to top, with a smooth transition.

The anchor for the megamen (what starts off as 'Space') updates to show the current space that the user is in when they open up that subsection of the menu.

AdamJ commented 6 years ago

Megamenu Expanded:

screen shot 2018-03-02 at 5 21 28 pm screen shot 2018-03-02 at 5 21 35 pm

Mobile Menu Expanded:

screen shot 2018-03-02 at 5 21 45 pm
AdamJ commented 6 years ago

@catrobson I've updated the prototype with a new animation for the mobile menu and changed the animation speeds for the mega menu.