@9CB5
Posted
Great work. It almost matches the design perfectly!
As for your question, the code in your nav isn't that bad. There's naturally going to be a lot more code than a typical nav since this one has multiple dropdowns with lots of children inside. But you can really trim down your markup if you use a front-end framework like Vue for example and using list rendering with v-for for the dropdowns. You may also use tailwind to reduce code in your stylesheet.
Going through your solution, I have noticed a few minor issues which I will highlight below:
- The animation takes too long on the dropdowns and the fact that it starts off fast then slows down makes it feel clunky. You should aim to minimise waiting times for better UX.
- The layout breaks on some screen widths. For example, when viewed on the iPad mini (768px), the header has a white gap on the right hand side, and on the surface duo (540px) some images are off-centered and there are some overlapping elements.
Marked as helpful
@JustANipple
Posted
Hi @9CB5,
I will surely try Tailwind to optimize timing with these components
I managed to make a better animation for the dropdowns so it doesn't feel that slow
I adjusted some of the responsiveness errors you mentioned, but somehow in Ipad pro view, the footer hides part of the list. I couldn't find a way to fix it
Thank you for your help!
@9CB5
Posted
@JustANipple Thanks for taking the time to fix the issues I've noted.
The website is much better now! It feels snappier and it seems to respond better.
I cannot replicate the issue on the footer so I am unable to help with this. It must have fixed itself 😃.
Happy coding.
Marked as helpful
