Kategorien: Alle - navigation

von josephat mokamba Vor 9 Jahren

251

SSP 740 - Navigation

When members or advisors log into their manage portal, they are greeted with a navigation menu bar situated under the header of the homepage. This navigation bar includes various menu items, each of which can be hovered over to reveal a dropdown list of sub-menu links.

SSP 740 - Navigation

Navigation

Compatibility

refer to "PC & Mobile Browsers.mm"

Mobile

Header height, logo size etc. scales down in mobile view
Member Navigation
Navigation should have 'logout' and 'contact us' menu items
Default view

After logging in on mobile view, mobile menu should be minimised

Taps anywhere outside navigation menu

Navigation menu collapses

Sub-menus should collapse when another sub-menu is expanded
Taps links in drop drop down menu

Currently active link drops down displaying sub-menu links

Taps menu icon

'MENU' text

Clickable

Menu drop down displaying links

Given: An advisor is viewing sub-menu items in the navigation bar dropdown When: They tap outside the dropdown list Then: Dropdown list should collapse

Given: An advisor in their manage portal and wants to navigate to a page When: They tap the menu icon in the navigation bar Then: A drop down list of sub-menu links should be displayed

Given: A member logs in to their manage portal When: Successfully logged in and landed on homepage Then: Menu icon should be presented to the right in the header

Given: An advisor in their manage portal and wants to navigate to a page When: They tap the menu icon in the navigation bar Then: A drop down list of sub-menu links should be displayed

Given: A member logs in to their manage portal When: Successfully logged in and landed on homepage Then: Menu icon should be presented to the right in the header

Given: An advisor is viewing sub-menu items in the navigation bar dropdown When: They tap outside the dropdown list Then: Dropdown list should collapse

Desktop

UI
Min width of drop-down menus is width of header
Member Manage Portal
Advisor Manage Portal
Current 'Active' menu item

Shaded grey

Hover over sub-menu items

Hovered link's text color does not change

Hovered link 's background highlighted to grey

Navigates Outside the menu item

Drop down list collapses

Hover over menu item

Drop down list of sub-menu items displayed

Scenarios
Member

Given: An advisor is viewing sub-menu items in the navigation bar dropdown When: They navigate outside the hovered menu item Then: Dropdown list should collapse

Given: A member in their manage portal and wants to navigate to a page When: They hover over a menu item in the navigation bar Then: A drop down list of sub-menu links should be displayed

Given: A member logs in to their manage portal When: Successfully logged in and landed on homepage Then: Navigation menu bar should be presented under the header

Advisor

Given: An advisor is viewing sub-menu items in the navigation bar dropdown When: They navigate outside the hovered menu item Then: Dropdown list should collapse

Given: An advisor in their manage portal and wants to navigate to a page When: They hover over a menu item in the navigation bar Then: A drop down list of sub-menu links should be displayed

Given: An adviser logs in to their manage portal When: Successfully logged in and enterred their portal Then: Navigation menu bar should be presented under the header