Why don't we just use a media query in css?

Yes! This is bad practice :(. Even though the focus is learning jQuery and not how to build a responsive web site i don't think this is good.

Not every browser supports media queries that's why we do mobile-first design. However mobile-first doesn't work as well as for menus because of the selectors you need to position it.

There are polyfills for this exact problem. IE6+ can be supported via media queries with Respond.js. However, this is supposed to be teaching you jQuery. So it's another exercise to help you learn to build web apps. So even if the media query does deprecate this method, it's nice to know what exactly the media query is doing behind the scenes and use this to expand on other areas that are not deprecated.

I think this course is great actually. Thanks Andrew! I really find it it useful when you walk us thought each step of the process (from writing the sudo code to the perfecting stage).

I think there are 2 good reasons why someone might want to use jQuery instead of css media queries in this particular case:

1. First of all our alternative menu uses javascript anyway. Without javascript, the navigation with <select> etc. won't work as expected. If you used css media queries only, you would need to create the <select> and <option>s manually in the html source, making by the way your code less maintenable in case the navigation changed, and such a menu would not let the user go to the selected page by itself, it's javascript that brings them there. You don't want to modify the html source including markup that breaks without javascript. It may display well, but not let the user navigate, in case the javascript file for some reason doesn't load. The original menu, gross as it is, would be preferable since it at least preserves the links. So, any element that heavily relies on javascript should be dealt with through javascript, for safety.

2. You could generate the select menu through javascript and use css with media queries to manage its visibility. This would not lead to the same problems as point 1, BUT if for some reason the css file doesn't load, then you will get a confusing double menu on your page on every display. That's not what you want.

Media queries were invented to optimize user experience and accessibility. In this particular case, using them without keeping in mind what actually happens if the css OR the javascript don't load, would just decrease a bit one and the other, and defeats their purpose.

Because we are learning jQuery Basics

This question was first asked two years ago. I'm glad that someone asked it since I found myself asking the same thing. Looking at the arguments for and against using jQuery, I was wondering if anyone could weigh in on whether or not this is still relevant with browsers in 2016.

It seems that either way there's a potential drawback to both solutions - media query and jQuery - i.e. the off chance that a user still has an outdated browser that doesn't support a media query or they have Javascript disabled.

I definitely like to see different ways of doing the same thing since it puts more tools in the developer's toolbox. But I agree, I believe that this course should be revisited and updated to touch upon jQuery relevance in 2016 amidst an ever present tide of browser updates and deprecation of old technologies. After all, when does legacy support become a non-thing in the developer world?

Either way, I'm curious if anyone has any thoughts regarding best practices in 2016... In other words, is it more appropriate and best practice to use a media query or jQuery for responsive menus?

Thanks!

I will admit that I to feel the same way. I think he could have used another example for these methods. I would have used media queries in my .css. However, I would also agree that I like the consistent comments listing the steps. That is a nice way of reenforcing the planning phase of problem resolution.