Improve main navigation

[bdolor]

• major issue relates to consolidation of content from other sites.

• sitemap would be helpful

• main navigation requirement is 3+ levels of nesting. No flyouts due to accessibility issues. Megamenu as a possibility.

[bdolor]

sitemap provided: https://bccampus.slickplan.com/ojyakpemc

[bdolor]

@murphybarb this is ready for validation. Main navigation now has 3 levels. Some notes:

1. A general trend among modern CSS frameworks including Bootstrap 4 is that they don't come with support for multilevel navbars beyond 2 levels. Partially this is because of the priority placed on mobile use. That it is a trend implies that we should be re-thinking Information Architecture and UI. The 3 level tier in the navbar is implemented but I had to build our own 'library' (functionality) for it https://github.com/BCcampus/wp-bootwalker and I fear we may be dating ourselves if we pursue more tiers.

2. The dropdown menu happens on a 'click' event rather than a 'hover' event which the bccampus.ca site currently employs. This is also due to a 'mobile first' strategy among frameworks. Navigate the main menu for the current bccampus.ca on a phone and try to get to some of the lower level subpages and you'll see why dropdowns on hover events don't work. The consequence of a 'click' event however is that the link to that 'parent' page is changed from a link the content on that page to an anchor link whose only function is to activate the 'dropdown' — knowing this will mean needing to make adjustments to the content of 'parent pages'.

Example: the content on the page 'Lines of Service' can't be accessed by clicking on 'Lines of Service'

Fortunately, on a mobile device, all the 'child' pages can now be accessed.

[murphybarb]

I'm playing with the menus and will be creating some pages to see what the new architecture will look like based on the site map I did https://bccampus.slickplan.com/ojyakpemc

I'll finish working on this tomorrow (Friday).