dropdown PC/slides in-out mobile menu SASS, semantic, Aria atributes

Community feedback

• 

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  hey Tryt4n😄, congratulations on completing the challenge.. here are a few tips to make your site better..

  1.The hero image seems cropped you can use

  .main__image {
      background-size: contain;
      background-repeat: no-repeat;
     width:70%;
  }
  

  might seems to solve the problem.. but play around to make your site design accurate..

  2.The images in the .main__wrap__clients seems to have the same issue.. use the property object-fit: contain on the images to prevent them from getting stretched..

  3.And the hamburger svg doesn't seem clickable on the mobile.. you can fix that

  Hope that helps,Happy coding👍🏻🔥🔥💯

  Marked as helpful

  1

  ---

  

  Tryt4n•960

  @Tryt4nPosted almost 2 years ago

  @sulemaan7070 Thanks for answer.

  1. I did that on purpose. I think it's better when image is cropped than not because it's always the same size as the first column with text. So for different screen sizes it would be always 100% height of the container.
  2. There was error and page did not load the script. Now it's fixed.

  Could you check again my project? I was trying do something more than just simple expanded list on click etc. So I create some functions with purpose to do:

  • When we click on the "features" or "company" it should expand
  • When it's expanded and we click anywhere besides expanded container it should collapse ( and it's partially work, because when we click it's collapsing but in the different way that I wanted. It's collapsing if we click anywhere but "features" if it's expanded or "company" if it's expanded and we can't click on any list element because it's also collapsing container. We can tab through list element though and after clicking enter key in any list element it's properly collapsing). It should work only in desktop view, in mobile view if we expand element and close menu and then again open menu, expanded element should be expanded
  • On the mobile view menu slides smoothly in both ways (here is the same problem like above. Menu is properly expanding but we can only tab through list element)
  • Mobile menu can be closed by clicking close btn or anywhere besides menu
  • When screen changing from desktop view to mobile and reverse, all elements return to their default states (to avoid situation when we open menu in the mobile view and then resize screen to desktop view)
  • All elements that have aria-hidden toggle states whether element is visible in the screen or not

  I think problem is caused by handleSlides() in function handleDefaultStates() but I don't know how to fix it.

  Do you know why it's that and how to fix it? And also do you know whether I correctly use aria attributes and whether my HTML is semantic correctly? Is that a good thing that I used <details> element for expanded menu? And also did I correctly extracted function into another functions is JS files or maybe that was unnecessary? I'd be glad for any feedback and help.

  0