This PR enhances the Core Navigation block's mobile experience. The styling is improved with left-aligned items that have spacing and bottom borders. The submenu's can be opened by clicking the arrow. The top menu item is added to the menu allowing it to be clickable to dropdown the menu and the first submenu item is the new link to the top menu item.
If the menu is "About us" and it has a submenu. Then the top item "About us" will only function to reveal to submenu rather than a link to the "About us" page. Then in the submenu, "About us" is the first link and takes you to that page.
This feature has been tested in several existing projects like: Parsons, Rising Bank, and MBC. In this projects it was refined and it is refined further here. Some issues were addressed like the submenu not opening on click the first couple of tries and the mobile menu was not hiding if you increased the browser width. This left it unstyled and covering the page until a refresh of the page by the user. There's a resize function that hides the menu when increasing the screen over 960 width.
As the functional tester for this pull request, I verify that:
[ ] The test site has a generic menu added with parent pages and some submenus
[ ] View the site on mobile and interact with the links. Tapping/clicking items without submenus should take you to that page. Items with submenus should reveal the submenu instead.
[ ] Resizing the window over 960 should hide the menu
[ ] The menu should be keyboard accessible.
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana. If all tests pass, move the task to "Ready for Code Review" in Asana and tag a team member for code review.
Code review
As the code reviewer for this pull request, I verify that:
[ ] All automated tests have passed.
[ ] The code is written (or documented) in a way that is easy to understand.
[ ] The code is free of obvious errors.
[ ] The code is free of obvious duplication.
[ ] The code follows our coding standards.
[ ] The code is sanitized or escaped appropriately for any SQL or XSS injection possibilities.
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana or continue with the "merging" steps below.
Merging
As the individual merging this pull request, I verify that:
[ ] All automated tests have passed.
[ ] All functional tests have passed.
[ ] All code review tests have passed.
[ ] I have moved the task to "Ready to Deploy" in Asana and notified the pull request author.
Changes proposed in this pull request
This PR enhances the Core Navigation block's mobile experience. The styling is improved with left-aligned items that have spacing and bottom borders. The submenu's can be opened by clicking the arrow. The top menu item is added to the menu allowing it to be clickable to dropdown the menu and the first submenu item is the new link to the top menu item.
If the menu is "About us" and it has a submenu. Then the top item "About us" will only function to reveal to submenu rather than a link to the "About us" page. Then in the submenu, "About us" is the first link and takes you to that page.
This feature has been tested in several existing projects like: Parsons, Rising Bank, and MBC. In this projects it was refined and it is refined further here. Some issues were addressed like the submenu not opening on click the first couple of tries and the mobile menu was not hiding if you increased the browser width. This left it unstyled and covering the page until a refresh of the page by the user. There's a resize function that hides the menu when increasing the screen over 960 width.
Closes https://app.asana.com/0/1203895219649773/1206518703604992/f
Pre-submit checklist
As the author of this pull request, I verify that:
master.Testing
How to test the changes in this pull request
Follow the steps below to test the changes in this PR.
Functional tests
As the functional tester for this pull request, I verify that:
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana. If all tests pass, move the task to "Ready for Code Review" in Asana and tag a team member for code review.
Code review
As the code reviewer for this pull request, I verify that:
Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana or continue with the "merging" steps below.
Merging
As the individual merging this pull request, I verify that: