Intro section with dropdown navigation project

Community feedback

• 

  Gabriel Duraye•445

  @baldwinboy

  Posted about 2 years ago

  That much styling should not be controlled in JS. Use media queries and classes to toggle the menu and determine when it's shown. Then use JS to write functions toggling the ARIA attributes. ARIA will become a lot easier. Instead of counters and conditionals based on remainders, just use booleans. Much easier to toggle and you can use the state of a boolean variable as the ARIA attribute's value. Finally, selecting all of the targeted elements at the same time instead of just one and then looping through them will greatly reduce the amount of code you have to write.

  var menuDisplay = false
  ...
  element.attr(ariaAttribute, menuDisplay)
  

  Resources:

  • W3 WAI-ARIA best practices and examples
  • Mozilla Docs
  • A Guide on Practical Web Accessibility
  • An automated accessibility checker for your command line

  00

  Marked as helpful
• 

  cmb347827•900

  @cmb347827

  Posted about 2 years ago

  I did use media queries that determined when the menu is shown in mobile , from line 242 in the scss file. But the code you posted above would have been a neater solution to what I did.

  I liked to seperate my code (add eventlistener one at a time) as I did as I think it's more readable maybe .

  00