this_is_dhananjay
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
I am marking this thread as solved now. For anyone who stumbles upon the same issue, please checkout the Codepen link. I have added the final code there.
Kudos to @clevermissfox for guiding me. Glad to be a part of this amazing community!
31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
I just followed you on GH. Let's rather continue this conversation on messages, it's getting off-topic 😄
31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
Yes, this was really fun learning. I am sort of proud of the code, looks kinda professional 😄
a11ty is something I have started taking seriously. I want the website to be highly (if not equally) accessible by everyone.
@clevermissfox Thanks again for all the help! I enjoyed our discussion. Please let me know if you have a GitHub account, I would like to follow you there.
31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
Sure. I removed that.
31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
I added an additional check to make sure that the DOM has fully loaded. I got this idea from a stackoverflow post while I was searching for alternate solutions. Do you think it is necessary? I am already deferring the script and using priority hints when the script is called.
31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
Hi @clevermissfox, finally did it. Check out: https://codepen.io/is_dhananjay/pen/yLWyYjK
Yet to rename that
no-scroll utility class, but apart from that, everything now works as intended.31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
I actually previously implemented the animation that ways. Instead of using
display property, I was using the transform which allowed me to animate the slide-out behavior. But that had it's own problems, like the animation appearing when resizing the window. That's exactly when I joined this community. Fortunately, i was able to fix it. Thanks to Steven: https://stevenwoodson.com/blog/solving-animation-layout-flickering-caused-by-css-transitions/
Anyways, I will check out the video by Kevin, animating to display: none would be soo cool 😉31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
Oh, and wait, I really had
<title> as direct child element of the <button> and not the <svg>. Close save! Would have been a big mess, huge thanks!31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
Oh, I think, I messed up the title part when I was copying the code from the project to Codepen.
About using the
:has selector, that seems like a good idea. And if I end up still using the utility class, I would think of a better name.
And thank you so much for all the help and kind words. You were of great help! I am glad I joined this community. I learnt quite a few things about JS today.
Will go ahead and work on the final solution. I want to post it before I mark this thread as solved.31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
In the meanwhile, I will rework the JS, as I would need to conditionally add/remove the
no-scroll utility class to/from the body element.31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
Thanks a lot for all the input. The code works great too!
As for the
<title> element, it's not the document title element. It's the SVG accessible name element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title.31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
Remove
aria-expanded from where? The toggle buttons?31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
You mean, using
aria-expanded on both the toggles and the container?31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
@clevermissfox While I was waiting for an initial reply, I also came up with some logic, and it does seem to work. I have updated the code on the pen. Can you please check?
31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
I mean the for the button toggles.
31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
One more thing, I will also need to set the
aria-expanded value for either to false first.31 replies
KPCKevin Powell - Community
•Created by this_is_dhananjay on 5/13/2024 in #front-end
Help with JS logic to close menu if search is clicked, or vice-versa
That seems apt. The attribute is only being used by the menu and the search containers.
Would it possible for you to spare some time and share some sample code? Sorry, I am a bit of a novice to JS.
31 replies
KPCKevin Powell - Community
•Created by Naks on 10/10/2023 in #front-end
Responsive navbar question - Kevin's video
Thanks! If I do find a different approach, I will let you know.
12 replies
KPCKevin Powell - Community
•Created by Naks on 10/10/2023 in #front-end
Responsive navbar question - Kevin's video
Thanks, I will try it out. Just out of curiosity, is there any other way we could fix this issue?
12 replies
KPCKevin Powell - Community
•Created by Naks on 10/10/2023 in #front-end
Responsive navbar question - Kevin's video
You will see the transition issue when resizing the preview
12 replies