intro-section-with-dropdown-navigation with js, html, and css

Community feedback

• 

  T

  Josh•400

  @burrijwPosted over 1 year ago

  HI 👋🏻 Nice start!

  You've got some HTML/a11y issues:

  • The nav isn't keyboard operable. Make sure you follow patterns like this APG example when implementing interactive widgets and things.
  • I don't think <aside> is the right element to use in this case. Don't let the visual form of a component dictate the HTML elements you choose. Just because a mobile navigation drawer is a sidebar, doesn't mean you should use <aside> just because it's meant for "sidebar" content. Think about the semantics. You can just use the <nav> without nesting it in another landmark. All you really have on this page for landmarks are the <header>, <nav>, and <main>.
  • Consider if you really need to duplicate the navigation in your HTML. Can you just style it differently without duplicating the markup?
  • Focus styles could be better. Right now what you have is hard to see when the black "Learn More" button is focused. Maybe offset the focus ring.
  • I'd place those image/logos at the bottom in a list.

  Good stuff. Keep it up!

  1
• 

  alexander•1,300

  @alex931dPosted over 1 year ago

  hello great solution i notice a few issuses now im not able to see your code bc your github link is not working but i still notices a few things the mobile menu is still showing even outside of mobil view if its open

  1

  ---

  

  Frank Ezene•350

  @frank1003APosted over 1 year ago

  @alex931d I apologize my GitHub was still in private and I wasn't aware. As for the mobile menu, I will check that out. I wasn't checking the designs with a mobile so I guess there would be errors there.

  0
• 

  Mukwende•1,370

  @mukwende2000Posted over 1 year ago

  You have set the height of the dropdown container to 0 on small screens, no wonder its not showing

  0

  ---

  

  Frank Ezene•350

  @frank1003APosted over 1 year ago

  @mukwende2000 Thanks for the heads up, by default the height of the dropdown container is set to 0, and this changes with the click of the dropdown button. I will check this out now.

  1