ruuen / challenge-dropdown-navigation

Solution for the dropdown navigation challenge on frontendmentor.io

Frontend Mentor - Intro section with dropdown navigation solution

This is Max Ruuen's solution to the Intro section with dropdown navigation challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Running this solution locally
• Author

Overview

The challenge

Users should be able to:

• View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
• View the optimal layout for the content depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Mobile Layout

Desktop Layout

Links

• Solution URL: Frontend Mentor
• Live Site URL: Netlify

My process

Built with

• SCSS / BEM
• JavaScript
• Parcel

What I learned

I found the greatest problem on this challenge was drawing the line between doing everything in CSS vs. shifting some of the load over to JavaScript in favour of reliability/simplicity. I'll need to do more practice and reading on some common progressive enhancement techniques as I've known about the concept for a while but never dove too deep into a lot of common use cases.

This challenge solidified a lot of small past learnings and allowed me to find some new stuff too, but I've identified areas of improvement and have asked the Frontend Mentor community for feedback on a few queries (which I will update here as I implement feedback).

I think the accessibility & screen reader experience is good on this challenge and I've made sure to implement the previous accessibility feedback from my other solutions. Some points of focus were:

• Not using separate nav elements for desktop/mobile navs
• Good accessible names which aren't overly descriptive and account for context as much as possible
• Keyboard & screen reader control of navigation on both mobile & desktop feel great and announce smoothly
• Proper placement of nav controls within nav element with respect to content
• Hiding non-essential decorative images
• Ensuring my animations had prefers-reduced-motion rules for users who disable animations

There were problems with CLS metrics being high due to variable hero image load times, and I struggled with this a bit before finding a decent solution. Part of my struggle was due to incorrect usage of width/height values causing unexpected behaviour, and I was able to resolve this after a fair bit of reading and cycling to other tasks for mental space.

Another part was solved with optimisation of the image assets into jpg/webp and applying compression, and additionally learning about preloading critical images. I'm a bit surprised there isn't a better standard solution for preloading <picture> element sources including alternate types, but I ended up decided to preload only the WebP images as the browser support for WebP and preloads align pretty closely.

I plan on spending more time understanding CLS prevention techniques and playing around with these, but I found utilising Chrome Dev Tool's Performance tab incredibly helpful for working through these issues.

I ran into a fun Safari bug where the outline property doesn't obey an element's border-radius property values, and thankfully this was fixed in Safari v16.4+.

• WebKit bug tracker discussion
• Safari Tech Preview 157 release notes containing fix
• Safari 16.4 release notes containing fix

This was my first time using Parcel and it's a lovely little build tool for these static site challenges - will definitely be using this in projects moving forward & exploring it more.

I am not enjoying SCSS nesting syntax as much as I used to and I'm going to move away from using this in future, and looking at some better solutions & ways other people use SCSS responsibly.

Useful resources

• Stephanie Eckles' article on CSS-only accessible dropdown navigations
• CSS-Tricks article on CSS-only dropdown menus
• Kevin Powell's video on CSS megamenus
• Logrocket article on dropdown menus
• ARIA Authoring Practice Guide on accessible names and descriptions
• WIA docs on handling decorative images
• web.dev article on optimising CLS
• web.dev article on preloading
• web.dev article on preloading sources for <picture> elements

Running this solution locally

The project is a static site using Parcel as the build tool & dev server.

All site files are located in the /src directory & site files build into the /dist directory.

The development server can be started with npm run dev which runs on port 1234, and will be accessible on your local network. You can edit the dev script within package.json to disable this if required, by removing the --host 0.0.0.0 flag from the parcel command.

A production build is performed with npm run build.

Both scripts will hard delete the existing /dist directory before triggering a new build, but you can clear this folder manually if the removal is not successful for any reason.

Author

• Frontend Mentor - @ruuen
• Twitter - @maxruuen

challenge-dropdown-navigation's Issues

Review remaining hover effects to implement

Pretty sure I've got all of them except for the hero button colour inversion, but double-check before completion.

Review animations for menu open & dropdown expand

Set background colour on body & mobile nav

Background colour should be the $clr-offwhite variable & not default #FFF

Add rotate animation for dropdown menu icons

Mobile: when --open state class present, icon should rotate

Desktop: when dropdown has :hover or :focus-within, icon should rotate

Optimise high CLS measure for hero content

Image load time causes a big CLS measure when hero content shifts down page on mobile (and presumably desktop, although haven't ran desktop layout through lighthouse yet)

Optimising the image under #4 but need to review CLS measure again post-fix. Some work can probably be done here as it's the only metric killing my page scores right now, but visually 0.3sec of CLS on 3G throttling isn't super visually problematic.

Optimise hero image load time

Export webp & jpg versions of hero picture
Load these within the picture element

Currently variable hero image load times has a big effect on page CLS, and I need to optimise this file anyway as it is majority of the page weight while being .png.

Will look at CLS issues on another issue to see if I can get browser to reserve the space while loading (have tried a few ways but no success so far)

Review if mobile nav close button should be placed above content list

Currently I have the mobile nav close button at the bottom of DOM order, after the links. This seemed to be best practice when reviewing a11y resources, but it does feel a bit strange when actually using it when the screenreader.

Need to do a bit more reading on this point & maybe get some feedback on how other devs approach it if I can't make a decision.

Improve accessible labels for screenreader

Will add to below list as I find them during SR reviews:

• Mobile: open navigation button needs better name.
  • Change from "open menu" to "open site navigation"
  • Maybe nav element needs better accessible name so that it announces "navigation menu" and then "open menu"?
• Dropdown groups can probably have accessible names removed. "Feature pages" might be weird when you know that you're already in a navigation
• Client logos, do they need to be hidden? If not, they need better alt text & the section needs an accessible label

Add aria-expanded behaviour for dropdowns

Mobile should toggle expanded when dropdown is pressed

Desktop should toggle expanded on hover or focus/blur