How to close the NavBar when clicking outside the Navbar | Sololearn: Learn to code for FREE!

+4

How to close the NavBar when clicking outside the Navbar

https://code.sololearn.com/W3dp4vvBNw0g/?ref=app

12/29/2020 1:13:56 PM

DINESH

5 Answers

New Answer

+1

document.addEventListener("click", () => { if (navEl.classList.contains("active")) { navEl.classList.remove("active") } }, true); This seems to be the easiest solutuion that make sence when the user uses a mouse. It uses capturing so the menu gets the class "active" after the condition above is checked. NOTE: The menu will close once you click anywhere on the page, including the menu itself, but maybe you want that? If not, please tell me...

+5

I think there are 2 solutions: You can use on hover or on active. If you use on hover, the menu or your element will only open if you hover it, buy it closed if you remove your cursor. (this is css solution) For more help please post your code 🙂 Tnx. Hope this helps. Here an example: https://code.sololearn.com/WJwn45lkSr9b/?ref=app

+2

DINESH, Could you please share your code here? It'll help us to understand the problem.

+2

https://code.sololearn.com/W3dp4vvBNw0g/?ref=app

+2

Yeah bro ..let me try this.. Tq bro😊