Responsive landing page HTML CSS JavaScript

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted 6 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your question that I believe will be of great interest to you.

  ---

  FIXING SLIDE OUT ANIMATION 🪄:

  • " give some idea's for animating slide out of the navigation menu Slide in is fine slide out have me stuck ", Well I'm here to share my thoughts with a working code!

  ---

  • First, the issue lies with using animation property because the moment we click the hamburger/button the slidein class is added. It contains the animation rule so the "slide-in" works because you only defined for sliding in and not for sliding out.

  ---

  • Second, You're using visibility rule for menu. So what i would like to suggest is to remove the animation "slidein" rule and add these rules,

  .ss__prim-navlist {
    visibility: hidden;
    translate: 100% 0;
    opacity: 0;
    transition: .7s ease;
  }
  
  .slidein {
    visibility: visible;
    translate: unset;
    opacity: 1;
  }
  

  • Here, we first setting the nav menu on "slide-out" position which is ready to be "slide-in" whenever the class slidein added for ul. Using these rules we can achieve a smooth-in-out sliding navigation as you wished!

  ---

  • Additionally we added opacity and transition to make it more visually appealing.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Stefan Grobler•150

  @StefanGrobler78Posted 6 months ago

  @0xabdulkhalid Thank you for the help appreciated

  0