Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Nikos Papapetrou
Nikos Papapetrou
6,305 Points
Posted by Nikos Papapetrou
Nikos Papapetrou
6,305 Points

Hello! Can someone explain me why after refresh I need to click two times to open the mobile menu?

https://codepen.io/nikospapapetrou/pen/gOPrzWB

How can avoid an unwanted double click after the refresh? The first click doesn't do anything and I have to click second time to open the mobile menu.

Eventually what is your opinion for creating a responsive mobile menu should you use pure CSS only, JavaScript or both? Thanks all!

2 Answers

Phil Livermore
Phil Livermore
11,018 Points
Phil Livermore
Phil Livermore
11,018 Points

I believe it is because the Javascript is looking for the inline style of the HTML element so ignores what is set in the external stylesheet. When you use the if statement to check if the display is None, it is looking at the HTML and there is no inline style for display: none. This means on the first click the if statement returns false, so sets the display to none and on the second click the if statement returns true, changes to display block and the menu appears.

I usually find the easiest way for a dropdown is to add a class of open to the element and then have the stylesheet change the display based on the class rather than setting the style directly from the Javascript.

Nikos Papapetrou
Nikos Papapetrou
6,305 Points
Nikos Papapetrou
Nikos Papapetrou
6,305 Points

Thank you Phil. I haven't thought that way now it is clear.

So in your way you don't to use JS? Or do you use remove and add classes in a click in JS cause I don't understand what do you mean by that you add open class on element. Do you know any tutorial or code I can see to understand how it works.

Thank you again I was struggling a long time about this.

Phil Livermore
Phil Livermore
11,018 Points
Phil Livermore
Phil Livermore
11,018 Points

I still use Javascript but all it does is to add a class to an element. Here is an example using JQuery: https://codepen.io/designcouch/pen/Atyop

Based on you code you could use somethign like this:

mobile_Button.addEventListener("click", () => { main_nav__list.classList.toggle("open"); });

This will add the class "open" to the main nav block if it is not already there and remove it if it is. Then you can reference the "open" class in the stylesheet to change the display property. You do not need to use "open" as the class, you can call it whatever you like.

Nikos Papapetrou
Nikos Papapetrou
6,305 Points
Nikos Papapetrou
Nikos Papapetrou
6,305 Points

Yes, I see. I don't know jQuery but I get the point. I will practice with this technique and try to understand the way it is work.

Thanks for helping!