15: Navigation

Now that the index page was complete from the initial load, the toasts for the disclaimer and help, modals to go with the toasts and accessibility icons to allow these toasts and modals to be accessed at a later time once they initially were hidden after the first load, it was time to move onto the navigation menu.

For this, again, I did not want to take away from the existing aesthetic and look of the page, so it was vital to add a navigation that had a very small icon that was still easily accessible to the user.

For this, I felt that the perfect solution would be creating and adding a hamburger icon that would then overlay a menu over the top of the existing page that the user was currently on.

Creating the icon

To keep in line with the existing icons to create a coherent set and to allow consistency throughout the site, I went back to the Google Font Icons and found a clean Hamburger Menu icon that could be exported as a vector icon.

I exported this icon as an SVG and added it to Figma, changing the colour of the icon to match the existing Info and Help icon on the index page.

Once this colour was changed, I resized the icon and exported it again as an SVG to preserve its vector qualities.

The next step was to create a reusable solution for the navigation that did not need to be maintained across multiple pages but rather be updated from the one location, to firstly make the navigation easy to maintain but to also avoid inconsistencies across each page.

For this solution, I created an HTML asset that could be loaded in on each page into a dedicated div. This allowed only needing a single div to be written per page for the asset to be loaded into and allowed the one asset to be updated when there were any code changes needed.

Within this newly created asset that could be loaded in, I added in the Hamburger Icon that was recently exported from Figma, and set the following inline positioning to the wrapper of the SVG icon so that there was no delay on the icon moving to its correct CSS position.

                                
    style="top: 10px; left: 10px; color: #FFFFFF; z-index: 9; opacity: 0.7; cursor: pointer;"
                            

Creating the navigation UI

Now that image was displaying in the correct location, the next thing to do was to create the navigation menu that would eventually be triggered by this Hamburger Icon.

I looked into Bootstrap's library to find if there was something that could be used to achieve the toggling vertical navigation menu overlay. I was able to find that the Offcanvas component in the Bootstrap 5 library could be used to successfully implement this.

I created the offcanvas component in the loadable navigation asset and then was able to trigger the show and hide functionality via clicking on the hamburger icon.

                                
    data-bs-toggle="offcanvas" href="#offcanvasNavigation" role="button"
                            

I then added vertical buttons to the navigation menu using the existing colour palette, and then created a hover effect that would allow a drop shadow to appear on hover of any of the menu buttons.

Finally, before moving onto any other pages, the key was to make sure that the navigation asset loaded in correctly to each page. We can now utilise the div that was created earlier as a placeholder for this navigation to load into.

In the JavaScript file of each page, I included the below in the document ready function.

                                
    $('#navPlaceholder').load('assets/navigation.html');
                            

This successfully loaded the navigation into the page and allowed the functionality to work correctly.

The next thing was to link the buttons to the pages that were existing.

Usually when linking, we can go straight to the page such as in the below.

                                
    href="../contact.html"
                            

However, because we only have the index page currently existing, if we were to link to the index page in this way, we would be taken to 'example.com/index.html' which would then show the name of the index page rather than representing the root page of the site in the URL.

Due to this not being ideal, I was able to instead link the button to the below.

                                
    href="../"
                            

This then allowed redirection to instead take as to 'example.com' which is a much better display in the URL. Also, I wanted to make sure that the current page that the user was on would redirect, rather than opening in a new tab. This was able to be achieved with the below.

                                
    href="../" target="_self"